/* Identidad tomada de urenque.com: marfil, tinta vino y acento coral. */
/* Unfold 0.104 no incluye utilidades ámbar en su CSS distribuido. */
.estado-retardo {
    background-color: #fef3c7;
    color: #92400e;
}

:root {
    --urenque-paper: #f2eadb;
    --urenque-ink: #27100f;
    --urenque-line: rgba(39, 16, 15, 0.22);
    --urenque-coral: #ef5b3f;
}

.numero-ficha { font-size: 3rem; font-weight: 800; line-height: 1.3; }
.pestanas-asistencia, .pestanas-asistencia > div { display: flex; gap: .5rem; align-items: center; }
.pestanas-asistencia { justify-content: space-between; margin-bottom: 1.5rem; border-bottom: 1px solid var(--urenque-line); padding-bottom: .75rem; }
.pestanas-asistencia a { display: block; padding: .65rem .8rem; border-radius: 8px; }
.pestanas-asistencia [aria-current="page"] { background: #cc3b24; color: white; font-weight: bold; }
.descargar-asistencia { border: 1px solid var(--urenque-line); }
.solo-movil { display: none; }
.solo-escritorio { display: block; min-width: 0; }
.contadores-dia { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.tarjeta-persona { border: 1px solid var(--urenque-line); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; background: #fffdf8; }
.cabecera-persona { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: start; }
.nombre-persona { font-weight: bold; color: #b5321e; }
.numero-persona { font-size: .8rem; margin-top: .25rem; }
.dato-persona { font-size: 1.35rem; font-weight: bold; margin: .75rem 0 .3rem; }
.chip-estado { display: inline-block; white-space: nowrap; padding: .25rem .5rem; border-radius: 6px; background: #f2eadb; color: #402420; font-size: .8rem; }
.puntos-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; margin: 1rem 0; }
.punto-dia { border-radius: 50%; text-align: center; padding: .4rem 0; background: #f2eadb; color: #402420; }
[data-estado="Presente"], [data-estado="Adentro"], [data-estado="Autorizado"] { background-color: #dcfce7; color: #166534; }
[data-estado="Salió"], [data-estado="Pendiente"] { background-color: #f3f4f6; color: #4b5563; }
[data-estado="Retardo"] { background-color: #fef3c7; color: #92400e; }
[data-estado="Falta"], [data-estado="Rechazado"] { background-color: #fee2e2; color: #991b1b; }
/* Bolsa de tiempo por tiempo: en rojo cuando la persona debe horas. */
.saldo-negativo { color: #991b1b; font-weight: bold; }
html.dark .saldo-negativo { color: #fca5a5; }
/* Ausencias justificadas: azul. El estado es el nombre del tipo (Vacaciones,
   Incapacidad...), así que no puede colorearse por [data-estado] y lleva clase propia.
   Va después de las anteriores para ganar con la misma especificidad. */
.estado-ausencia { background-color: #dbeafe; color: #1e3a8a; }
.dia-festivo { cursor: help; }
.leyenda-festivos { font-size: .8rem; margin-top: .5rem; }
.detalle-semana li { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--urenque-line); }
.tarjeta-persona summary { cursor: pointer; padding: .5rem 0; font-weight: bold; }
.acciones-revision { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.anomalia-persona + .anomalia-persona { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--urenque-line); }
html.dark .tarjeta-persona { background: #321817; border-color: #997c67; }
html.dark .nombre-persona { color: #faab97; }
html.dark .estado-ausencia { background-color: #1e3a8a; color: #dbeafe; }
.acciones-ficha, .navegacion-mes { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin: 1.5rem 0; }
.navegacion-mes { justify-content: space-between; }
.calendario-ficha { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.dia-ficha { padding: .6rem; border: 1px solid var(--urenque-line); border-radius: 8px; min-width: 0; }
.dia-ficha summary { display: flex; flex-direction: column; gap: .4rem; cursor: pointer; }
.dia-ficha .chip-estado { font-size: .7rem; padding: .2rem; }
.formulario-operativo p { margin-bottom: 1.25rem; }
.formulario-operativo label { display: block; margin-bottom: .5rem; }
.formulario-operativo input, .formulario-operativo select, .formulario-operativo textarea { max-width: 100%; }
.ultimas-checadas li { padding: .5rem 0; border-bottom: 1px solid var(--urenque-line); }
.historial-ausencias li { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--urenque-line); }
.historial-ausencias .ausencia-cancelada { opacity: .6; text-decoration: line-through; }
.nota-ausencia { font-size: .85rem; }
@media (max-width: 767px) {
    .solo-movil { display: block; }
    .solo-escritorio { display: none; }
    .contadores-dia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .pestanas-asistencia { gap: .2rem; }
    .pestanas-asistencia a { padding: .6rem .55rem; }
    .pestanas-asistencia > div { gap: .1rem; }
    .formulario-operativo { min-width: 0; }
    .calendario-ficha { display: flex; flex-direction: column; }
    .hueco-calendario, .dia-sin-checada { display: none; }
    /* Un día de ausencia no tiene checadas, pero sí interesa verlo en el teléfono. */
    .dia-ficha.estado-ausencia { display: block; }
    .dia-ficha summary { flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
}

body {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* Controles editables: borde suficientemente oscuro y superficie separada del fondo.
   Se usan selectores HTML estables, no clases internas de Unfold. */
body:not(.login) input:is(
    [type="text"],
    [type="email"],
    [type="password"],
    [type="url"],
    [type="tel"],
    [type="number"],
    [type="date"],
    [type="time"],
    [type="datetime-local"]
),
body:not(.login) textarea,
body:not(.login) select {
    background-color: #fffdf8 !important;
    border-color: #997c67 !important;
    box-shadow: 0 1px 2px rgba(39, 16, 15, 0.08) !important;
}

body:not(.login) input:focus,
body:not(.login) textarea:focus,
body:not(.login) select:focus {
    border-color: var(--urenque-coral) !important;
    box-shadow: 0 0 0 3px rgba(239, 91, 63, 0.18) !important;
}

/* Los datos informativos se distinguen de inmediato de un campo editable. */
.readonly {
    background: var(--urenque-paper);
    border-left: 3px solid var(--urenque-coral);
    color: var(--urenque-ink);
    padding: 0.65rem 0.8rem;
}

/* Unfold presenta el login sin tarjeta. Sobre el marfil de Urenque le damos una
   superficie claramente delimitada para que el formulario no se pierda. */
body.login #page {
    background-color: var(--urenque-paper) !important;
}

body.login #page .w-full.sm\:w-96 {
    background: #fffdf8;
    border: 1px solid var(--urenque-line);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(39, 16, 15, 0.14);
    padding: 2rem;
}

#site-name {
    color: var(--urenque-ink) !important;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

h1,
h2,
h3,
.login #content h1 {
    font-family: Georgia, "Times New Roman", serif !important;
    letter-spacing: -0.02em;
}

::selection {
    background: var(--urenque-coral);
    color: #fff;
}

html.dark body.login #page .w-full.sm\:w-96 {
    background: #321817;
    border-color: rgba(242, 234, 219, 0.24);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

html.dark body:not(.login) input:is(
    [type="text"],
    [type="email"],
    [type="password"],
    [type="url"],
    [type="tel"],
    [type="number"],
    [type="date"],
    [type="time"],
    [type="datetime-local"]
),
html.dark body:not(.login) textarea,
html.dark body:not(.login) select {
    background-color: #321817 !important;
    border-color: #997c67 !important;
}

html.dark .readonly {
    background: #321817;
    color: var(--urenque-paper);
}

html.dark #site-name {
    color: var(--urenque-paper) !important;
}