/* =================================================================================================
   agenda-base.css - lo que los mockups llevan en su <style> de cabecera
   AgendaModule · .NET 10.0

   Los mockups ponen el estilo visual en atributos style= y dejan en la cabecera solo estas cinco
   reglas, que son las que no caben en un atributo porque afectan a todo. Se copian tal cual de
   mockups/day.html (D-033), con una salvedad: alli el ambito es <body> y aqui es .agenda, porque
   esta aplicacion tiene otras pantallas -las de configuracion, las del framework- que no deben
   heredar ni la tipografia ni el fondo de la agenda.

   Va DESPUES de agenda-paletas.css, que es de donde salen las variables --ag-*.
   ================================================================================================= */

.agenda {
    margin: 0;
    font-family: Archivo, "Helvetica Neue", sans-serif;
    color: var(--ag-tinta);
    background: var(--ag-fondo);
    -webkit-font-smoothing: antialiased;
}

.agenda a {
    color: inherit;
    text-decoration: none;
}

.agenda a:hover {
    color: inherit;
}

.agenda .serif {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
}

/* Cifras que se leen en columna -horas, importes, versiones- con todos los digitos del mismo
   ancho. Sin esto, una lista de importes baila de linea en linea. */
.agenda .num {
    font-variant-numeric: tabular-nums;
}

/* El cursor de lo que se puede pulsar. En los mockups no hace falta -no se pulsa nada- y aqui si:
   un <button> sin fondo ni borde no se distingue de un texto hasta que se pasa por encima. */
.agenda button {
    cursor: pointer;
}

.agenda button:disabled {
    cursor: default;
    opacity: .55;
}

/* La muestra de color redonda de la pantalla de Apariencia. Definida en el <style> de
   appearance.html; se copia aqui porque es una clase, no un atributo. */
.agenda .mu {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(22, 19, 15, .10);
}

/* La tarjeta de las pantallas de ajustes. Del <style> de profile.html. */
.agenda .card {
    background: var(--ag-papel);
    border: 1px solid var(--ag-borde);
    border-radius: 8px;
    padding: 22px 24px;
}

/* La fila de la tabla de campos de una pestana. Del <style> de tabs.html. */
.agenda .fila {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 148px 92px 34px;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-bottom: 1px solid var(--ag-linea);
}

/* La rejilla del mes. Del <style> de month.html. */
.agenda .cel {
    position: relative;
    border-right: 1px solid var(--ag-linea);
    border-bottom: 1px solid var(--ag-linea);
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
    background: var(--ag-papel);
}

.agenda .dia {
    font-size: 12px;
    font-weight: 600;
    color: var(--ag-texto);
    font-variant-numeric: tabular-nums;
}

.agenda .ent {
    font-size: 10.5px;
    line-height: 1.25;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.agenda .pt {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 4px;
    flex-shrink: 0;
}