/* ============================================================
   Garza Hogar — Gestión · estilos base
   Un único archivo mientras la app sea pequeña. Cuando crezca
   el calendario (Fase 4) tendrá sentido separarlo.
   ============================================================ */

:root {
    --azul:       #2563eb;
    --azul-hover: #1d4ed8;
    --texto:      #0f172a;
    --gris:       #64748b;
    --borde:      #cbd5e1;
    --fondo:      #f1f5f9;
    --rojo:       #dc2626;
    --rojo-fondo: #fef2f2;
    --rojo-borde: #fecaca;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Login ---------- */

.login-pantalla {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.login-caja {
    width: 100%;
    max-width: 24rem;
    background: #fff;
    padding: 2rem;
    border-radius: .75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 8px 24px rgba(15, 23, 42, .06);
}

.login-caja h1 {
    margin: 0 0 .25rem;
    font-size: 1.35rem;
}

.login-caja .sub {
    margin: 0 0 1.5rem;
    color: var(--gris);
    font-size: .9rem;
}

label {
    display: block;
    margin: 1rem 0 .3rem;
    font-size: .875rem;
    font-weight: 600;
}

input[type="email"],
input[type="password"] {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    font-size: 1rem;
    background: #fff;
    color: var(--texto);
}

input:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
    border-color: var(--azul);
}

button {
    width: 100%;
    margin-top: 1.5rem;
    padding: .75rem;
    border: 0;
    border-radius: .4rem;
    background: var(--azul);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

button:hover:not(:disabled) { background: var(--azul-hover); }

button:disabled {
    opacity: .6;
    cursor: progress;
}

/* El mensaje de error vive siempre en el DOM (para que los lectores
   de pantalla lo anuncien vía aria-live); solo se oculta visualmente. */
.error {
    margin-top: 1rem;
    padding: .7rem .85rem;
    border-radius: .4rem;
    background: var(--rojo-fondo);
    border: 1px solid var(--rojo-borde);
    color: var(--rojo);
    font-size: .875rem;
}

[hidden] { display: none !important; }

/* ---------- Cabecera de las páginas internas ---------- */

.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid var(--borde);
}

.barra .quien { font-size: .9rem; color: var(--gris); }
.barra .quien strong { color: var(--texto); }

.barra button {
    width: auto;
    margin: 0;
    padding: .45rem .9rem;
    font-size: .875rem;
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borde);
}

.barra button:hover:not(:disabled) { background: var(--fondo); }

.contenido { padding: 1.5rem 1.25rem; }
.contenido h1 { margin-top: 0; font-size: 1.3rem; }
.pendiente { color: var(--gris); }

/* ============================================================
   Siniestros — listado, filtros y ficha
   ============================================================ */

:root {
    --verde:      #059669;
    --ambar:      #b45309;
    --morado:     #7c3aed;
    --fondo-tenue:#f8fafc;
}

.barra nav {
    display: flex;
    gap: .35rem;
    margin-left: 1rem;
}

.barra nav a {
    padding: .4rem .7rem;
    border-radius: .35rem;
    color: var(--gris);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.barra nav a:hover { background: var(--fondo); color: var(--texto); }
.barra nav a[aria-current="page"] { background: #eff6ff; color: var(--azul); }

.barra .izq { display: flex; align-items: center; min-width: 0; }
.barra .marca { font-weight: 700; white-space: nowrap; }

/* ---------- Barra de filtros ---------- */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.1rem;
}

.filtros .buscador { flex: 1 1 16rem; min-width: 0; }

.filtros input[type="search"],
.filtros select,
.dialogo select,
.dialogo input,
.dialogo textarea,
.panel-ficha select,
.panel-ficha input,
.panel-ficha textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    font: inherit;
    font-size: .95rem;
    background: #fff;
    color: var(--texto);
}

.filtros select { flex: 0 1 11rem; }

.boton-principal {
    width: auto;
    margin: 0;
    padding: .55rem 1rem;
    white-space: nowrap;
    font-size: .95rem;
}

/* ---------- Distintivos de estado ---------- */

.estado {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.estado-pendiente  { background:#fef3c7; color:var(--ambar);  }
.estado-en_curso   { background:#dbeafe; color:#1d4ed8;       }
.estado-finalizado { background:#d1fae5; color:var(--verde);  }
.estado-facturado  { background:#ede9fe; color:var(--morado); }
.estado-urgente    { background:var(--rojo-fondo); color:var(--rojo); }

/* ---------- Tabla ---------- */

.tabla-caja {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .6rem;
    overflow: hidden;
}

table { width: 100%; border-collapse: collapse; font-size: .92rem; }

thead th {
    text-align: left;
    padding: .7rem .85rem;
    background: var(--fondo-tenue);
    border-bottom: 1px solid var(--borde);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gris);
}

tbody td { padding: .7rem .85rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--fondo-tenue); }

.col-acciones { text-align: right; white-space: nowrap; }

.enlace-accion {
    background: none;
    border: 0;
    width: auto;
    margin: 0;
    padding: .25rem .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--azul);
    cursor: pointer;
    border-radius: .3rem;
}

.enlace-accion:hover:not(:disabled) { background: #eff6ff; }
.enlace-accion.peligro { color: var(--rojo); }
.enlace-accion.peligro:hover:not(:disabled) { background: var(--rojo-fondo); }

.vacio { padding: 2.5rem 1rem; text-align: center; color: var(--gris); }
.sin-dato { color: #94a3b8; }

/* ---------- Ficha (diálogo nativo) ---------- */

.dialogo {
    width: min(42rem, calc(100vw - 2rem));
    padding: 0;
    border: 0;
    border-radius: .75rem;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .25);
    color: var(--texto);
    background: #fff;
}

.dialogo::backdrop { background: rgba(15, 23, 42, .45); }

.dialogo header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--borde);
}

.dialogo header h2 { margin: 0; font-size: 1.1rem; }

.cerrar {
    width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: .35rem;
    background: none;
    color: var(--gris);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.cerrar:hover { background: var(--fondo); color: var(--texto); }

.dialogo .cuerpo { padding: 1.2rem 1.4rem; max-height: 65vh; overflow-y: auto; }

.rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .1rem 1rem;
}

/*
 * Sin esto, una columna de la rejilla no puede encoger por debajo de lo
 * que mida su hijo más ancho: un elemento de rejilla nace con
 * `min-width: auto`. En un móvil eso hacía que el formulario midiera 413
 * dentro de un diálogo de 352, y la ficha se desplazaba de lado — con el
 * botón de la derecha fuera de la pantalla.
 */
.rejilla > * { min-width: 0; }

.ancho-total { grid-column: 1 / -1; }

.dialogo label,
.panel-ficha label { margin: .85rem 0 .3rem; }
.dialogo textarea,
.panel-ficha textarea { resize: vertical; min-height: 4.5rem; }

/* Dirección + botón de Maps en la misma línea */
.campo-direccion { display: flex; gap: .5rem; align-items: stretch; }
.campo-direccion input { flex: 1 1 auto; min-width: 0; }

.boton-maps {
    width: auto;
    margin: 0;
    padding: 0 .8rem;
    white-space: nowrap;
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borde);
    font-size: .85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    border-radius: .4rem;
}

.boton-maps:hover { background: var(--fondo); }

.boton-maps[aria-disabled="true"] {
    opacity: .45;
    pointer-events: none;
}

.dialogo footer {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid var(--borde);
    background: var(--fondo-tenue);
}

.dialogo footer button { width: auto; margin: 0; padding: .6rem 1.1rem; }

.boton-secundario {
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borde);
}

.boton-secundario:hover:not(:disabled) { background: var(--fondo); }

.error ul { margin: .4rem 0 0; padding-left: 1.2rem; }

/* ---------- Móvil: la tabla pasa a tarjetas ---------- */

@media (max-width: 720px) {
    .contenido { padding: 1rem .75rem; }

    .filtros select, .filtros .buscador { flex: 1 1 100%; }
    .boton-principal { width: 100%; }

    .tabla-caja { border: 0; background: none; }
    thead { display: none; }

    tbody tr {
        display: block;
        margin-bottom: .75rem;
        background: #fff;
        border: 1px solid var(--borde);
        border-radius: .6rem;
        padding: .35rem .2rem;
    }

    tbody tr:hover { background: #fff; }
    tbody td { display: flex; gap: 1rem; border: 0; padding: .4rem .85rem; }

    /* La etiqueta de la columna viaja en data-etiqueta y se pinta aquí,
       para que cada dato siga sabiendo qué es sin la cabecera de la tabla. */
    tbody td::before {
        content: attr(data-etiqueta);
        flex: 0 0 7.5rem;
        font-size: .78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--gris);
    }

    .col-acciones { justify-content: flex-end; text-align: right; }
    .col-acciones::before { display: none; }

    .rejilla { grid-template-columns: 1fr; }
    .dialogo { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
    .dialogo .cuerpo { max-height: none; }
}

/* ---------- Paginación ---------- */

.paginacion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1rem;
    padding: .5rem .2rem;
}

.paginacion .resumen {
    margin: 0;
    font-size: .875rem;
    color: var(--gris);
}

.paginacion .paginas {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.boton-pagina {
    width: auto;
    margin: 0;
    padding: .45rem .85rem;
    font-size: .875rem;
    font-weight: 600;
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: .4rem;
    cursor: pointer;
}

.boton-pagina:hover:not(:disabled) { background: var(--fondo); }

.boton-pagina:disabled {
    opacity: .45;
    cursor: default;
}

.paginacion .indicador {
    font-size: .875rem;
    font-weight: 600;
    min-width: 7.5rem;
    text-align: center;
}

.por-pagina {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--gris);
}

.por-pagina select {
    width: auto;
    padding: .4rem 1.6rem .4rem .55rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    font: inherit;
    font-size: .875rem;
    background: #fff;
    color: var(--texto);
}

@media (max-width: 720px) {
    .paginacion {
        justify-content: center;
        text-align: center;
    }

    /* En móvil los botones mandan: van arriba y ocupan el ancho. */
    .paginacion .paginas { order: -1; width: 100%; justify-content: space-between; }
    .paginacion .resumen { width: 100%; }
    .boton-pagina { flex: 0 0 auto; }
}

/* ============================================================
   Trabajadores y usuarios
   ============================================================ */

.seccion { margin-bottom: 2.5rem; }
.seccion:last-child { margin-bottom: 0; }

.seccion-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.seccion-cabecera h1 { margin: 0; font-size: 1.25rem; }

.explicacion {
    margin: 0 0 1rem;
    font-size: .88rem;
    color: var(--gris);
}

/* ---------- Badge de rol (reutiliza los colores de .estado) ---------- */

.rol-admin    { background:#ede9fe; color:var(--morado); }
.rol-operario { background:#dbeafe; color:#1d4ed8; }

/* ---------- Muestra de color junto al nombre del trabajador ---------- */

.muestra-color {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    vertical-align: middle;
}

/* ---------- Selector de color en la ficha ---------- */

.campo-color {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.campo-color input[type="color"] {
    width: 3.2rem;
    height: 2.4rem;
    padding: .2rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    background: #fff;
    cursor: pointer;
}

.color-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9rem;
    color: var(--gris);
}

.pista { flex-basis: 100%; font-size: .8rem; color: var(--gris); }

/* ---------- Casilla (checkbox + etiqueta en línea) ---------- */

.casilla {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
}

.casilla input { width: auto; }

/* ---------- Tamaños de diálogo adicionales ---------- */

.dialogo-ancho   { width: min(52rem, calc(100vw - 2rem)); }
.dialogo-estrecho{ width: min(26rem, calc(100vw - 2rem)); }

.boton-pequeno {
    padding: .4rem .75rem;
    font-size: .82rem;
}

/* ---------- Editor de horario semanal ---------- */

.horario-acciones {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.dias-semana {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.dia-tarjeta {
    border: 1px solid var(--borde);
    border-radius: .5rem;
    overflow: hidden;
}

.dia-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .55rem .85rem;
    background: var(--fondo-tenue);
}

.dia-nombre { font-weight: 700; font-size: .9rem; }

.dia-anadir {
    width: auto;
    margin: 0;
    padding: .3rem .6rem;
    font-size: .8rem;
    font-weight: 600;
    background: #fff;
    color: var(--azul);
    border: 1px solid var(--borde);
}

.dia-anadir:hover { background: #eff6ff; }

.dia-tramos { padding: .5rem .7rem; }

.dia-sin-tramos {
    padding: .35rem .15rem;
    font-size: .84rem;
    color: #94a3b8;
}

.tramo-fila {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
}

.tramo-fila input[type="time"] {
    width: auto;
    padding: .4rem .5rem;
    border: 1px solid var(--borde);
    border-radius: .35rem;
    font: inherit;
    font-size: .9rem;
}

.tramo-separador { color: var(--gris); font-size: .85rem; }

.tramo-quitar {
    margin-left: auto;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 0;
    border-radius: .35rem;
    background: none;
    color: var(--gris);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.tramo-quitar:hover { background: var(--rojo-fondo); color: var(--rojo); }

@media (max-width: 720px) {
    .dialogo-ancho { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
    .dialogo-ancho .cuerpo { max-height: none; }
    .tramo-fila { flex-wrap: wrap; }
}

/* ============================================================
   Calendario — rejilla semanal / diaria
   ------------------------------------------------------------
   Cabeceras pegajosas arriba, canalón de horas pegajoso a la
   izquierda, y columnas que scrollean en horizontal. Cada
   columna es un par (día, trabajador). Los bloques se colocan
   en absoluto dentro de su columna.
   ============================================================ */

.cal-barra {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.cal-nav { display: flex; align-items: center; gap: .35rem; }

.cal-nav button {
    width: auto;
    margin: 0;
    padding: .45rem .7rem;
    font-size: .875rem;
    font-weight: 600;
    background: #fff;
    color: var(--texto);
    border: 1px solid var(--borde);
    border-radius: .4rem;
    cursor: pointer;
}

.cal-nav button:hover:not(:disabled) { background: var(--fondo); }

.cal-rango {
    font-size: .95rem;
    font-weight: 700;
    min-width: 15rem;
    padding: 0 .4rem;
}

.cal-modo {
    display: inline-flex;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    overflow: hidden;
    background: #fff;
}

.cal-modo button {
    width: auto;
    margin: 0;
    padding: .45rem .9rem;
    font-size: .875rem;
    font-weight: 600;
    background: #fff;
    color: var(--gris);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.cal-modo button + button { border-left: 1px solid var(--borde); }
.cal-modo button[aria-pressed="true"] { background: var(--azul); color: #fff; }

/* El de Móvil/Escritorio va en gris, no en azul: es la misma clase de
   interruptor, pero decide otra cosa. Con los dos en azul y pegados
   parecían un solo grupo de cuatro botones donde eliges uno. */
.cal-presentacion button[aria-pressed="true"] {
    background: var(--texto);
    color: #fff;
}

/* ---------- Ampliar la rejilla ---------- */

.cal-zoom {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    overflow: hidden;
    background: #fff;
}

.cal-zoom button {
    width: 2.1rem;
    margin: 0;
    padding: .45rem 0;
    background: #fff;
    color: var(--texto);
    border: 0;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.cal-zoom button:hover:not(:disabled) { background: var(--fondo); }
.cal-zoom button:disabled { color: #cbd5e1; cursor: default; }

.zoom-nivel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.1rem;
    border-left: 1px solid var(--borde);
    border-right: 1px solid var(--borde);
    color: var(--gris);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Ampliar solo tiene sentido sobre la rejilla; en la lista no hay nada
   que ampliar, cada cita ocupa lo que necesita. */
body[data-presentacion="movil"] .cal-zoom { display: none; }

.cal-barra select {
    width: auto;
    padding: .45rem 1.8rem .45rem .6rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    font: inherit;
    font-size: .875rem;
    background: #fff;
    color: var(--texto);
}

.cal-espaciador { flex: 1 1 auto; }
.cal-aviso-modo { font-size: .8rem; color: var(--gris); font-weight: 600; }

.cal-caja {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .6rem;
    overflow: auto;
    /*
     * Un dedo desplaza, y lo hace el navegador —con su inercia, que
     * imitarla a mano nunca sale igual—. Dos dedos NO hacen el zoom del
     * navegador: se dejan pasar como eventos para ampliar la rejilla, no
     * la página entera.
     */
    touch-action: pan-x pan-y;
    max-height: calc(100vh - 15rem);
    /* dvh ("dynamic viewport height") sí cuenta con que en Safari la
       barra de direcciones aparece/desaparece al hacer scroll: 100vh
       ahí incluye el hueco que tapa la barra, así que el cálculo sale
       más alto de lo que de verdad se ve y la rejilla parece "cortada"
       o el scroll se comporta raro. Se deja el vh primero como
       respaldo para el puñado de navegadores que aún no soportan dvh;
       el que sí lo soporta usa esta segunda línea, que pisa la primera. */
    max-height: calc(100dvh - 15rem);
    position: relative;
}

.cal-rejilla {
    display: grid;
    position: relative;
    min-width: max-content;
}

/* ---------- Cabeceras de la rejilla ---------- */

.cal-esquina {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 5;
    background: var(--fondo-tenue);
    border-right: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}

.cal-dia-cabecera {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: .4rem .5rem;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gris);
    background: var(--fondo-tenue);
    border-bottom: 1px solid var(--borde);
    border-left: 2px solid var(--borde);
    white-space: nowrap;
}

.cal-dia-cabecera.hoy { color: var(--azul); background: #eff6ff; }

.cal-trab-cabecera {
    position: sticky;
    z-index: 3;
    padding: .4rem .35rem;
    text-align: center;
    font-size: .76rem;
    font-weight: 700;
    background: #fff;
    border-bottom: 1px solid var(--borde);
    border-left: 1px solid var(--borde);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-trab-cabecera .punto {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    margin-right: .3rem;
}

.cal-trab-cabecera.inicio-dia,
.cal-columna.inicio-dia { border-left: 2px solid var(--borde); }

/* ---------- Canalón de horas ---------- */

.cal-horas {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    border-right: 1px solid var(--borde);
}

/* El alto de la media hora, de donde salen todos los demás altos de la
   rejilla. calendario.js la reescribe al ampliar; el valor de aquí es
   el de partida y el que vale si algo fallara al leerla. */
.cal-rejilla { --alto-franja: 22px; }

.cal-hora {
    position: relative;
    height: var(--alto-franja);
    font-size: .72rem;
    color: var(--gris);
    box-sizing: border-box;
}

/* La etiqueta sube media línea para alinearse con la raya de la hora */
.cal-hora span {
    position: absolute;
    top: -.55em;
    right: .4rem;
    background: #fff;
    padding-left: .2rem;
}

/* La primera no puede subir: se saldría por encima de la rejilla y
   quedaría cortada por el borde de la caja. */
.cal-hora.primera span { top: 0; }

/* ---------- Columnas y franjas ---------- */

.cal-columna {
    position: relative;
    border-left: 1px solid var(--borde);
    background: #fff;
}

.cal-franja {
    height: var(--alto-franja);
    box-sizing: border-box;
    border-bottom: 1px solid #f1f5f9;
}

.cal-franja.en-punto { border-bottom-color: #e2e8f0; }

/* Fuera de la jornada base: se atenúa para que el ojo vea de un vistazo
   dónde SÍ se puede asignar sin sacar a nadie de su horario. */
.cal-franja.fuera-jornada {
    background: repeating-linear-gradient(
        45deg,
        #f8fafc, #f8fafc 4px,
        #f1f5f9 4px, #f1f5f9 8px
    );
}

.cal-columna.editable .cal-franja:hover { background: #eff6ff; }

.cal-seleccion {
    position: absolute;
    left: 2px;
    right: 2px;
    background: rgba(37, 99, 235, .18);
    border: 1px dashed var(--azul);
    border-radius: .25rem;
    pointer-events: none;
    z-index: 4;
}

/* ---------- Bloques de asignación ---------- */

.cal-bloque {
    position: absolute;
    box-sizing: border-box;
    padding: .18rem .3rem;
    border-radius: .28rem;
    border-left: 4px solid;
    font-size: .72rem;
    line-height: 1.25;
    overflow: hidden;
    cursor: grab;
    z-index: 1;
}

.cal-bloque:hover { filter: brightness(.97); z-index: 2; }
.cal-bloque.arrastrando { opacity: .45; cursor: grabbing; }
.cal-bloque.solo-lectura { cursor: default; }

/* ---------- Coger un bloque con el dedo ----------

   Mantener pulsado lo "coge". Mientras se cuenta el tiempo, el bloque
   se hunde un poco: es lo que dice que el dedo está haciendo algo y
   que merece la pena esperar en vez de levantarlo. */

.cal-bloque.a-punto {
    transform: scale(.96);
    transition: transform .18s ease-out;
}

/* Cogido de verdad: levantado, con sombra, y siguiendo al dedo. */
.cal-bloque.arrastrando {
    box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
}

/* Mientras se arrastra con el dedo, la rejilla no se desplaza: el gesto
   es del arrastre. Lo pone y lo quita calendario.js. */
body.arrastrando-dedo .cal-caja { touch-action: none; }

/* Y no se selecciona texto sin querer al mover el dedo por encima. */
body.arrastrando-dedo { user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
    .cal-bloque.a-punto { transition: none; }
}

/* Cada dato en UNA sola línea, recortado con puntos suspensivos.
   Sin esto, en las columnas estrechas de la vista semanal el navegador
   parte "Rotura de tubería en cocina" en una palabra por línea y el
   bloque se vuelve ilegible. */
.cal-bloque .b-hora,
.cal-bloque .b-quien,
.cal-bloque .b-extra {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-bloque .b-hora  { font-weight: 700; }
.cal-bloque .b-quien { font-weight: 600; }
.cal-bloque .b-extra { opacity: .8; }

/* ---------- La compañía, arriba a la derecha del bloque ----------

   De quién es el siniestro cambia el papeleo y a quién se factura, así
   que se ve sin abrir nada. Va flotada a la derecha para que el texto
   de debajo la rodee en vez de que le robe una línea entera al bloque,
   que en una cita de media hora no sobra ninguna.

   Para que enseñe el logotipo en vez del nombre basta con dejar el
   archivo en `img/aseguradoras/<slug>.svg` — mapfre.svg, pelayo.svg,
   asitur.svg, particular.svg. El calendario lo detecta solo. */

/* La esquina de arriba a la derecha del bloque: la compañía y, cuando
   la hay, la insignia 🔗.

   En vista de SEMANA flota: las columnas son estrechas y conviene que
   el texto la rodee en vez de quedar tapado. En vista de DÍA se ancla
   a la esquina (más abajo), que ahí sobra ancho. */
.cal-bloque .b-esquina {
    float: right;
    display: flex;
    align-items: center;
    gap: .2rem;
    max-width: 60%;
    margin: 0 0 .1rem .25rem;
}

.cal-bloque .b-aseguradora {
    max-width: 100%;
    padding: 0 .25rem;
    border-radius: .2rem;
    background: rgba(255, 255, 255, .75);
    color: var(--gris);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Un borde de color a la izquierda: es lo que distingue de un
       vistazo sin tener que leer el nombre. */
    border-left: 3px solid currentColor;
}

/* Sin sitio para el nombre: un cuadradito del color de la compañía.
   Sigue distinguiendo de un vistazo y deja la hora entera. */
.cal-bloque .b-aseguradora.compacta {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: .12rem;
    background: currentColor;
}

/* Con logotipo no hace falta ni fondo ni borde: la marca ya distingue. */
.cal-bloque .b-aseguradora.con-logo {
    padding: 0;
    background: none;
    border-left: 0;
}

.cal-bloque .b-aseguradora img {
    display: block;
    height: .8rem;
    width: auto;
    max-width: 100%;
}

/*
   Los colores NO son los corporativos de cada compañía: son sólo cuatro
   tonos distinguibles entre sí sobre el color del trabajador, que es el
   que pinta el fondo del bloque. Cuando estén los logotipos, la marca
   la pondrá cada uno con el suyo.
*/
.cal-bloque .aseg-mapfre     { color: #b91c1c; }
.cal-bloque .aseg-pelayo     { color: #1d4ed8; }
.cal-bloque .aseg-asitur     { color: #b45309; }
.cal-bloque .aseg-particular { color: #475569; }

/* Nota destacada dentro del bloque: resaltada en amarillo, como si se
   hubiera pasado un marcador por encima. Se le pone color de texto
   propio (y no se hereda) porque el fondo del bloque es el color del
   trabajador, que puede ser oscuro: sobre amarillo haría falta texto
   oscuro sí o sí para poder leerla. */
.cal-bloque .b-nota {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: .1rem 0;
    padding: 0 .2rem;
    border-radius: .2rem;
    background: #fde047;
    color: #422006;
    font-weight: 700;
}

/* El estado se marca en el borde izquierdo. El color de relleno ya
   está ocupado identificando al TRABAJADOR, así que el estado necesita
   otro canal para no competir con él. */
.cal-bloque.est-en_curso   { border-left-style: double; border-left-width: 6px; }
.cal-bloque.est-finalizado { border-left-style: dotted; opacity: .72; }
.cal-bloque.est-urgente    { border-left-color: var(--rojo) !important;
                             box-shadow: inset 0 0 0 1px var(--rojo); }

.cal-bloque .b-etiqueta {
    display: inline-block;
    margin-top: .1rem;
    padding: 0 .25rem;
    border-radius: .2rem;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .75);
}

.cal-tirador {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    cursor: ns-resize;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .12));
}

/* ---------- Leyenda ---------- */

.cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .85rem;
    font-size: .78rem;
    color: var(--gris);
}

.cal-leyenda span { display: inline-flex; align-items: center; gap: .35rem; }

.leyenda-muestra {
    display: inline-block;
    width: 1.6rem;
    height: .85rem;
    border-radius: .2rem;
    border-left: 4px solid var(--gris);
    background: #e2e8f0;
}

.leyenda-muestra.doble { border-left-style: double; border-left-width: 6px; }
.leyenda-muestra.punteada { border-left-style: dotted; opacity: .72; }
.leyenda-muestra.urg { border-left-color: var(--rojo); box-shadow: inset 0 0 0 1px var(--rojo); }

.leyenda-muestra.fuera {
    border-left: 0;
    border: 1px solid var(--borde);
    background: repeating-linear-gradient(45deg,#f8fafc,#f8fafc 4px,#f1f5f9 4px,#f1f5f9 8px);
}

/* ---------- Rejilla o lista: lo elige quien mira ----------

   Dos formas de ver lo mismo, y son independientes de si se está
   mirando una semana o un día:

     escritorio → la rejilla, con una columna por trabajador
     móvil      → la lista, un día detrás de otro

   Antes lo decidía el ancho de la pantalla, y solo en la vista de
   semana: girar el móvil cambiaba el aspecto del calendario sin que
   nadie lo hubiera pedido, y el mismo botón «Semana» daba dos cosas
   distintas según el aparato. Ahora lo dice `data-presentacion`, que
   calendario.js mantiene al día. */

.cal-agenda { display: none; }

body[data-presentacion="movil"] .cal-caja,
body[data-presentacion="movil"] .cal-leyenda { display: none; }
body[data-presentacion="movil"] .cal-agenda  { display: block; }
.agenda-dia { margin-bottom: 1.25rem; }

.agenda-dia-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: .5rem;
}

.agenda-dia h2 {
    margin: 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--gris);
}

.agenda-anadir {
    width: auto;
    margin: 0;
    padding: .3rem .7rem;
    font-size: .78rem;
    font-weight: 700;
    background: #fff;
    color: var(--azul);
    border: 1px solid var(--azul);
    border-radius: .35rem;
    cursor: pointer;
}

.agenda-anadir:hover { background: #eff6ff; }
.agenda-anadir:active { background: #dbeafe; }

.agenda-bloque {
    display: flex;
    gap: .7rem;
    padding: .6rem .7rem;
    margin-bottom: .5rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 4px solid;
    border-radius: .45rem;
    /* Ya no es solo un dato en pantalla: se toca para abrir su ficha,
       así que tiene que sentirse tocable, no solo informativo. */
    cursor: pointer;
}

.agenda-bloque:hover { background: var(--fondo-tenue); }
.agenda-bloque:active { background: #e2e8f0; }

.agenda-bloque:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

.agenda-horas { font-weight: 700; font-size: .82rem; white-space: nowrap; min-width: 5.2rem; }
.agenda-datos { min-width: 0; font-size: .85rem; }
.agenda-datos strong { display: block; }
.agenda-datos .apunte { color: var(--gris); font-size: .8rem; }
.agenda-vacio { color: var(--gris); font-size: .85rem; padding: .3rem 0; }

/*
 * NOTA: el ancho de la pantalla ya no decide entre rejilla y lista.
 *
 * Antes sí: por debajo de 900px la vista de semana se colapsaba sola a
 * la agenda y la de día no. Salían dos problemas. Uno, que girar el
 * móvil cambiaba el aspecto del calendario sin que nadie lo pidiera.
 * Y dos, que el botón «Semana» daba una cosa en un PC y otra en un
 * móvil, así que no se podía explicar qué hacía sin preguntar antes
 * desde dónde se estaba mirando.
 *
 * Ahora es una elección: el interruptor Móvil/Escritorio, que vale
 * igual para semana y para día. Ver `data-presentacion` más arriba.
 * Lo que queda aquí abajo es adaptar el tamaño de lo que se enseñe,
 * que es para lo que sirven las consultas de medios.
 */

@media (max-width: 900px) {
    /*
     * Aquí ya NO se decide entre rejilla y lista: eso lo elige quien
     * mira, con el interruptor Móvil/Escritorio, y vale igual para
     * semana que para día. Lo que queda es adaptar lo que se enseñe.
     *
     * Quien elija «escritorio» en un móvil verá la rejilla con scroll
     * lateral, que es lo que ya hacía la vista de día: la rejilla tiene
     * min-width: max-content y su caja overflow: auto, así que las
     * columnas no se encogen hasta ser ilegibles.
     *
     * Se reserva menos alto que en un PC: en un móvil la barra superior
     * y la de herramientas ocupan bastante menos que los 15rem
     * pensados para una ventana de escritorio, y con menos reservado se
     * ve más rejilla antes de tener que desplazarse dentro. dvh y no
     * vh porque en Safari, con la barra de direcciones entrando y
     * saliendo, 100vh no es fiable como "alto que se ve de verdad".
     */
    .cal-caja {
        max-height: calc(100vh - 9rem);
        max-height: calc(100dvh - 9rem);
    }

    .cal-rango { min-width: 0; font-size: .9rem; }
}

@media (max-width: 480px) {
    /* Sin espaciador, el aviso "Solo lectura" cae en la siguiente línea
       en vez de empujarse contra el borde y quedar cortado. */
    .cal-espaciador { display: none; }
    .cal-aviso-modo { flex-basis: 100%; }
}

/* ---------- Avisos flotantes (solapes) ---------- */

.cal-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 100;
    max-width: min(34rem, calc(100vw - 2rem));
    padding: .7rem 1rem;
    border-radius: .5rem;
    font-size: .85rem;
    line-height: 1.4;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: var(--ambar);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}

.cal-toast.es-error {
    background: var(--rojo-fondo);
    border-color: var(--rojo-borde);
    color: var(--rojo);
}

/* El pie de la ficha alinea Borrar a la izquierda y el resto a la derecha */
.dialogo footer .cal-espaciador { flex: 1 1 auto; }

/* Quién agendó la cita y quién la tocó, al pie del formulario. Discreto
   a propósito: se consulta cuando hay una duda, no se lee cada vez. */
.rastro {
    margin: 1.2rem 0 0;
    padding-top: .7rem;
    border-top: 1px solid var(--borde);
    color: var(--gris);
    font-size: .78rem;
    line-height: 1.5;
}

/* ---------- Cabecera en pantallas estrechas ---------- */

@media (max-width: 860px) {
    /* Sin esto, el nombre del usuario y el menú se pisan y el botón
       Salir se sale de la pantalla. Se apila en dos filas. */
    .barra {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .6rem .9rem;
    }

    .barra .izq { flex-wrap: wrap; gap: .5rem; }
    .barra .marca { font-size: .95rem; }
    .barra nav { margin-left: 0; width: 100%; }
    .barra nav a { padding: .35rem .55rem; font-size: .85rem; }

    /* El rol ya se deduce de lo que se ve; en móvil basta el nombre. */
    .barra .quien { font-size: .8rem; max-width: 9rem; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   Fotos de siniestro
   ============================================================ */

.subida-fotos {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: .6rem .9rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--fondo-tenue);
    border: 1px solid var(--borde);
    border-radius: .5rem;
}

.subida-fotos label { margin: 0 0 .25rem; flex-basis: 100%; }
.subida-fotos input[type="text"] { flex: 1 1 16rem; }
.subida-fotos input[type="file"] { flex: 1 1 16rem; padding: .4rem; }

.galeria-fotos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .75rem;
}

.foto-tarjeta {
    position: relative;
    margin: 0;
    border: 1px solid var(--borde);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
}

.foto-tarjeta img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    cursor: zoom-in;
}

.foto-tarjeta figcaption {
    padding: .35rem .5rem;
    font-size: .78rem;
    color: var(--gris);
    /* Ya no es una sola linea: descripcion arriba, fecha debajo. El
       nowrap se queda en la descripcion, que es la que puede ser larga. */
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.foto-tarjeta .foto-descripcion {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--texto);
}

/* La fecha, mas apagada: acompana, no compite con la descripcion. */
.foto-tarjeta .foto-fecha {
    font-size: .72rem;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}

.foto-quitar {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 1.7rem;
    height: 1.7rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, .55);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.foto-quitar:hover { background: var(--rojo); }

/* ---------- Visor a tamaño grande ---------- */

.dialogo-visor {
    max-width: min(92vw, 60rem);
    max-height: 92vh;
    padding: 0;
    border: 0;
    background: transparent;
}

.dialogo-visor::backdrop { background: rgba(15, 23, 42, .82); }

.dialogo-visor img {
    display: block;
    max-width: 100%;
    max-height: 82vh;
    margin: 0 auto;
    border-radius: .4rem;
}

.dialogo-visor p {
    margin: .6rem 0 0;
    text-align: center;
    color: #fff;
    font-size: .9rem;
}

.dialogo-visor p[hidden] { display: none; }

.cerrar-visor {
    position: absolute;
    top: -2.6rem;
    right: 0;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: .35rem;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.cerrar-visor:hover { background: rgba(255, 255, 255, .3); }

@media (max-width: 720px) {
    .galeria-fotos { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
    .subida-fotos input[type="text"], .subida-fotos input[type="file"] { flex-basis: 100%; }
}

/* ============================================================
   Panel "Hoy" (operario)
   ============================================================ */

.panel-hoy {
    margin-bottom: 1.25rem;
    padding: 1rem 1.1rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: .6rem;
}

.panel-hoy h2 {
    margin: 0 0 .7rem;
    font-size: 1rem;
    color: var(--azul);
}

.panel-hoy h2 span { color: var(--texto); font-weight: 400; }

#hoy-lista { display: flex; flex-direction: column; gap: .5rem; }

.hoy-bloque {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    padding: .6rem .8rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 4px solid;
    border-radius: .45rem;
}

.hoy-horas {
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
    min-width: 5.4rem;
}

.hoy-datos { flex: 1 1 14rem; min-width: 0; font-size: .88rem; }
.hoy-datos strong { display: block; }
.hoy-datos .apunte { color: var(--gris); font-size: .82rem; }
.hoy-datos .estado { margin-top: .25rem; }

.hoy-maps {
    flex: 0 0 auto;
    font-weight: 700;
}

#hoy-vacio { margin: 0; font-size: .88rem; color: var(--gris); }

@media (max-width: 720px) {
    .hoy-bloque { flex-direction: column; align-items: stretch; }
    .hoy-maps { align-self: flex-start; }
}

/* ============================================================
   Compañeros de visita — dos (o más) trabajadores a la vez en el
   mismo siniestro, a la misma hora.
   ============================================================ */

/* ---------- Checklist de trabajadores al crear ---------- */

.lista-trabajadores-check {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .8rem;
    margin-top: .3rem;
}

.check-trabajador {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .7rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    background: #fff;
}

.check-trabajador:has(input:checked) {
    background: #eff6ff;
    border-color: var(--azul);
}

.check-trabajador input { width: auto; margin: 0; }

.check-trabajador .punto {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 999px;
}

/* ---------- Lista de siniestros elegibles (sustituye al <select>) ---------- */

.lista-siniestros {
    margin-top: .4rem;
    max-height: 11rem;
    overflow-y: auto;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    background: #fff;
}

.siniestro-fila {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid #e2e8f0;
    font-size: .88rem;
    cursor: pointer;
}

.siniestro-fila:last-child { border-bottom: 0; }
.siniestro-fila:hover { background: var(--fondo-tenue); }

.siniestro-fila.elegida {
    background: #eff6ff;
    font-weight: 600;
}

.siniestro-fila:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: -2px;
}

/* El identificador no se encoge nunca: es la referencia con la que se
   distingue un siniestro de otro cuando la dirección se parece. */
.siniestro-id {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: .82rem;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

/* La dirección sí se recorta si no cabe (el tooltip y la ventana de
   información la enseñan entera). */
.siniestro-texto {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Botón pequeño: cuadrado, del alto de una línea, sin el aspecto de
   botón principal que tienen los <button> por defecto en esta hoja. */
.siniestro-info {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: .3rem;
    background: none;
    color: var(--azul);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.siniestro-info:hover { background: #dbeafe; }

.siniestro-info:focus-visible {
    outline: 2px solid var(--azul);
    outline-offset: 1px;
}

/* ---------- El siniestro ya elegido, en una línea ----------
   Lo que se ve cuando la elección está hecha y la lista sobra. Se
   parece a un campo relleno, no a una fila de lista: aquí ya no hay
   nada que escoger. */

.siniestro-elegido {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .4rem;
    padding: .55rem .6rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    background: #eff6ff;
    font-size: .88rem;
}

.siniestro-elegido .siniestro-texto { font-weight: 600; }

.siniestro-cambiar {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: .3rem .7rem;
    border: 1px solid var(--borde);
    border-radius: .3rem;
    background: #fff;
    color: var(--texto);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.siniestro-cambiar:hover { background: var(--fondo); }

/* Solo lectura: se apaga elegir, pero el botón de información sigue
   activo, que es justo para lo que sirve al consultar. */
.lista-siniestros.bloqueada { background: var(--fondo-tenue); }
.lista-siniestros.bloqueada .siniestro-fila { cursor: default; }
.lista-siniestros.bloqueada .siniestro-fila:hover { background: none; }
.lista-siniestros.bloqueada .siniestro-fila.elegida { background: #eff6ff; }

/* En pantalla estrecha se pulsa con el dedo: las filas y los dos
   botones necesitan sitio de verdad, y la lista puede ocupar más alto
   porque ahora solo se ve mientras se está buscando. */
@media (max-width: 900px) {
    .lista-siniestros { max-height: 16rem; }

    .siniestro-fila {
        gap: .65rem;
        padding: .7rem .6rem;
        font-size: .92rem;
    }

    .siniestro-elegido { padding: .6rem; }

    .siniestro-info {
        width: 2.4rem;
        height: 2.4rem;
        font-size: 1.15rem;
    }

    .siniestro-cambiar { padding: .6rem .9rem; font-size: .85rem; }
}

/* ---------- Datos del siniestro en el diálogo de consulta ---------- */

.datos-siniestro {
    display: grid;
    grid-template-columns: minmax(6rem, auto) 1fr;
    gap: .45rem .9rem;
    margin: 0;
    font-size: .9rem;
}

.datos-siniestro dt {
    font-weight: 700;
    color: var(--gris);
    font-size: .82rem;
}

.datos-siniestro dd {
    margin: 0;
    white-space: pre-wrap;   /* las notas pueden traer saltos de línea */
    word-break: break-word;
}

/* ---------- Nota destacada (agenda y panel "Hoy") ---------- */

/* <mark> ya viene resaltado por el navegador, pero cada uno usa su
   amarillo; se fija aquí el mismo tono que en la rejilla para que una
   misma nota se vea igual en los tres sitios. */
mark.nota-destacada {
    background: #fde047;
    color: #422006;
    font-weight: 700;
    padding: .05rem .3rem;
    border-radius: .25rem;
}

/* ---------- Nota + casilla de destacar en la ficha ---------- */

.campo-nota { display: flex; gap: .5rem; align-items: stretch; }
.campo-nota input[type="text"] { flex: 1 1 auto; min-width: 0; }

.check-destacada {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0 .7rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    background: #fff;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* Marcada, la propia casilla se tiñe del amarillo que va a salir en el
   calendario: así se ve de antemano qué hace, sin tener que guardar. */
.check-destacada:has(input:checked) {
    background: #fef9c3;
    border-color: #eab308;
}

.check-destacada input { width: auto; margin: 0; }

/* ---------- Nota de compañeros en la ficha (solo lectura) ---------- */

.companeros-info {
    margin: -.4rem 0 0;
    padding: .55rem .75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: .4rem;
    color: #1d4ed8;
    font-size: .85rem;
    font-weight: 600;
}

/* ---------- Insignia en el bloque de la rejilla ---------- */

/* Va dentro de `.b-esquina`, que es la que se coloca; antes se
   posicionaba ella sola, pero ahora comparte esquina con la etiqueta de
   la compañía y quien manda es la caja que las agrupa. */
.b-enlace {
    flex: 0 0 auto;
    font-size: .68rem;
    line-height: 1;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9));
}

/*
 * OJO: nada de "position: relative" aquí. `.cal-bloque` ya es
 * `position: absolute` (arriba), y eso YA basta como contexto de
 * posicionamiento para `.b-enlace` — un ancestro `absolute` es
 * "distinto de static" igual que uno `relative`, así que la insignia
 * ya se coloca bien respecto al bloque sin tocar nada más.
 *
 * Poner aquí `position: relative` (como hacía esta regla antes) NO
 * añadía nada y en cambio SOBRESCRIBÍA el `absolute` del bloque entero:
 * el bloque dejaba de sacarse del flujo del documento, así que además
 * de su `top` calculado ocupaba su hueco natural DETRÁS de las ~40
 * franjas horarias de su columna — cayendo muy por debajo de la
 * rejilla visible. Afectaba a todo bloque con al menos un compañero,
 * que es justo el caso que esta función existe para señalar.
 */

/* Al pasar el ratón por un bloque con compañeros, se resaltan tanto él
   como sus compañeros (que pueden estar en otra columna). El anillo va
   por fuera del borde normal para no pisar el borde de estado. */
.cal-bloque.cal-resaltado {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
    z-index: 3;
}

/* ---------- Apunte de compañeros en Hoy / agenda móvil ---------- */

.apunte-companeros {
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ============================================================
   Histórico de notas de siniestro
   ============================================================ */

.alta-nota {
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    background: var(--fondo-tenue);
    border: 1px solid var(--borde);
    border-radius: .5rem;
}

.alta-nota label { margin: 0 0 .3rem; }
.alta-nota label + label { margin-top: .75rem; }

.alta-nota input[type="date"] { max-width: 12rem; }
.alta-nota textarea { resize: vertical; min-height: 4.5rem; }

.historial-notas {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-height: 22rem;
    overflow-y: auto;
}

.nota-entrada {
    padding: .65rem .85rem;
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 3px solid var(--azul);
    border-radius: .4rem;
}

.nota-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .3rem;
}

.nota-fecha {
    font-weight: 700;
    font-size: .82rem;
    color: var(--gris);
}

.nota-texto {
    margin: 0;
    font-size: .9rem;
    white-space: pre-wrap;   /* respeta los saltos de línea que escriba el usuario */
    word-break: break-word;
}

/* ============================================================
   Ficha del siniestro a página completa (no ya en un popup):
   navegación real (siniestro.html?id=N), con sitio de sobra para
   ver ficha, fotos y notas a la vez en vez de ir abriendo diálogos
   uno detrás de otro.
   ============================================================ */

.enlace-volver {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--azul);
    text-decoration: none;
}

.enlace-volver:hover { text-decoration: underline; }

.cabecera-ficha {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.cabecera-ficha h1 {
    margin: 0 0 .25rem;
    font-size: 1.4rem;
}

.cabecera-ficha .subtitulo {
    margin: 0;
    color: var(--gris);
    font-size: .9rem;
}

.cabecera-ficha .acciones-cabecera {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.cabecera-ficha .acciones-cabecera > * { width: auto; margin: 0; }

.seccion-ficha {
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: .6rem;
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.25rem;
}

.seccion-ficha h2 {
    margin: 0 0 1rem;
    font-size: 1.05rem;
}

.seccion-ficha .pie-seccion {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--borde);
}

.seccion-ficha .pie-seccion button { width: auto; margin: 0; padding: .6rem 1.1rem; }

/* Página amplia: la rejilla de datos aprovecha el ancho sobrante en
   vez de quedarse a dos columnas fijas como en el popup estrecho. */
@media (min-width: 640px) {
    .panel-ficha .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .cabecera-ficha .acciones-cabecera { width: 100%; }
    .cabecera-ficha .acciones-cabecera > * { flex: 1 1 auto; }
}

/* ============================================================
   Importar parte de aseguradora
   ============================================================ */

.zona-soltar {
    padding: 2.5rem 1.5rem;
    text-align: center;
    border: 2px dashed var(--borde);
    border-radius: .6rem;
    background: var(--fondo-tenue);
    transition: background .15s, border-color .15s;
}

/* Mientras se arrastra un archivo por encima: que se note que la zona
   está viva y va a recogerlo. */
.zona-soltar.encima {
    border-color: var(--azul);
    background: #eff6ff;
}

.zona-soltar p { margin: .35rem 0; }
.zona-soltar .zona-icono { font-size: 2.5rem; margin: 0 0 .5rem; }
.zona-soltar .pista { margin-top: .9rem; }

/* Avisos previos al guardado. Ámbar el de duplicado (hay que decidir
   algo) y azul el informativo, para que se distingan de un vistazo. */
.aviso-duplicado,
.aviso-relacionado {
    padding: .85rem 1.1rem;
    margin-bottom: 1.25rem;
    border-radius: .5rem;
    font-size: .92rem;
    line-height: 1.45;
}

.aviso-duplicado {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #78350f;
}

.aviso-relacionado {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

/* ---------- Revisar el buzón ---------- */

.barra-buzon {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}

.barra-buzon select { width: auto; }

.acciones-lista {
    display: flex;
    gap: .5rem;
    margin: 1rem 0 .75rem;
}

.parte-fila {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem .9rem;
    margin-bottom: .5rem;
    border: 1px solid var(--borde);
    border-radius: .5rem;
    background: #fff;
}

/* Lo ya dado de alta se apaga: sigue a la vista para saber que se ha
   revisado, pero sin competir con lo que sí hay que decidir. */
.parte-fila.ya-existe { background: var(--fondo-tenue); opacity: .75; }

/* Selector mas especifico que ".panel-ficha input", que pone width:100%
   y padding a todos los campos: sin esto la casilla se comia la fila
   entera y el texto se salia por un lado. */
.parte-fila input.parte-check {
    width: auto;
    min-width: 0;
    margin: .2rem 0 0;
    padding: 0;
    flex: 0 0 auto;
}
.parte-datos { flex: 1 1 auto; min-width: 0; }

.parte-cabecera {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}

.marca-parte {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.marca-parte.compania     { background: #e2e8f0; color: #334155; }
.marca-parte.urgente      { background: var(--rojo-fondo); color: var(--rojo); }
.marca-parte.reasignacion { background: #ede9fe; color: var(--morado); }
.marca-parte.existe       { background: #fef3c7; color: var(--ambar); }

.marca-parte.alta   { background: #dbeafe; color: #1d4ed8; }
.marca-parte.update { background: #e2e8f0; color: #475569; }

/* El texto del aviso de la compañía: se distingue de los datos de la
   ficha porque es literal de ellos, no interpretación nuestra. */
.texto-nota {
    margin-top: .3rem;
    padding: .45rem .6rem;
    background: var(--fondo-tenue);
    border-left: 3px solid var(--borde);
    border-radius: .25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.apunte-huerfano { color: var(--ambar); font-weight: 600; }

/* ---------- Estado de los canales de entrada ---------- */

.estado-canales {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0 0;
}

.estado-canales .canal {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--fondo-tenue);
    border: 1px solid var(--borde);
    font-size: .78rem;
    font-weight: 600;
    color: var(--gris);
}

/* Lleva días sin llegar nada por ese canal: puede que la regla de
   reenvío se haya roto, y eso no lo avisa nadie. */
.estado-canales .canal.mudo {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #78350f;
}

/* ============================================================
   Vista de día: aprovechar el ancho
   ------------------------------------------------------------
   En la vista de día cada trabajador tiene una columna anchísima,
   pero los bloques cortos (media hora, una hora) apenas tienen alto:
   la dirección y la nota se cortaban por abajo mientras sobraba
   espacio de sobra a la derecha.

   Así que ahí el contenido pasa a fluir en horizontal — hora,
   dirección y nota en la misma línea— y solo salta de renglón si de
   verdad no cabe. En la vista de semana se queda como estaba: las
   columnas son estrechas y apilar es lo correcto.

   Se apoya en body[data-vista], que calendario.js mantiene al día;
   el CSS por sí solo no puede saber en qué vista está.
   ============================================================ */

body[data-vista="dia"] .cal-bloque {
    display: flex;
    flex-flow: row wrap;
    align-items: baseline;
    align-content: flex-start;
    column-gap: .45rem;
    row-gap: 0;
    /* Sitio para la esquina de arriba a la derecha (compañía + 🔗), que
       va anclada y no aparta el texto por sí sola. */
    padding-right: 4.6rem;
}

/* min-width: 0 en todos: sin eso, un texto largo se niega a encogerse
   por debajo de su contenido y empuja a los demás fuera del bloque. */
body[data-vista="dia"] .cal-bloque > span { min-width: 0; }

body[data-vista="dia"] .cal-bloque .b-hora  { flex: 0 0 auto; }
body[data-vista="dia"] .cal-bloque .b-quien { flex: 0 1 auto; }
body[data-vista="dia"] .cal-bloque .b-extra { flex: 0 1 auto; }

/*
 * En vista de día el bloque es flex, y dentro de un flex el float no
 * hace nada: la esquina se ancla de verdad a la esquina. Aquí hay ancho
 * de sobra, así que anclarla no tapa el texto — y el padding-right de
 * arriba ya le reserva sitio.
 *
 * (Nada de `position: relative` en `.cal-bloque`: ya es `absolute`, y
 * eso basta como contexto. Ver la nota larga junto a `.b-enlace`.)
 */
body[data-vista="dia"] .cal-bloque .b-esquina {
    position: absolute;
    top: .15rem;
    right: .25rem;
    float: none;
    margin: 0;
    max-width: 45%;
}

/* La nota se lleva el hueco que sobre a la derecha, que es justo el
   espacio que antes se desperdiciaba. */
body[data-vista="dia"] .cal-bloque .b-nota {
    flex: 1 1 7rem;
    margin: 0;
}

/* La nota sin destacar en vista de día: se ve, pero sin gritar. El
   amarillo se reserva para lo que alguien marcó a propósito. */
.cal-bloque .b-nota.b-nota-suave {
    background: none;
    color: inherit;
    font-weight: 400;
    opacity: .85;
    font-style: italic;
    padding: 0;
}

/* La nota va SIEMPRE la última de la fila: es lo más largo y variable,
   así se lleva el hueco que sobra en vez de partir la línea por medio
   y dejar el tipo de daño colgando a su derecha. */
body[data-vista="dia"] .cal-bloque .b-nota { order: 9; }

/* Casilla del fin de semana, en la barra del calendario. Mismo aire que
   los demás controles de la barra, sin parecer un campo de formulario. */
.check-finde {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .45rem .7rem;
    border: 1px solid var(--borde);
    border-radius: .4rem;
    background: #fff;
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.check-finde input { width: auto; margin: 0; }
.check-finde:has(input:checked) { background: #eff6ff; border-color: var(--azul); }


/* ============================================================
   Teléfono del asegurado en el calendario
   ------------------------------------------------------------
   Va en los bloques, en la agenda y en el panel "Hoy": llamar es lo
   primero que se hace al ir a una cita, y antes había que abrir el
   evento, saltar a la ficha y copiar el número a mano.
   ============================================================ */

/* En la rejilla: una línea más dentro del bloque, discreta. */
.b-telefono {
    display: block;
    font-size: .72rem;
    line-height: 1.25;
    color: inherit;
    text-decoration: none;
    opacity: .85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b-telefono:hover { opacity: 1; text-decoration: underline; }

/*
   En la agenda y en el panel del operario es un BOTÓN, no un apunte:
   ahí se toca con el dedo, y un enlace de 11 px en una lista es
   imposible de acertar en marcha.

   Se ha bajado de 44 px de alto a 38 y de ancho completo a lo que
   ocupe: a ancho completo pesaba más que la propia cita y parecía lo
   principal de la tarjeta, cuando lo principal es a dónde hay que ir.
   38 px queda por debajo de los 44 que recomiendan Apple y Google, pero
   sigue siendo un objetivo cómodo y ahora tiene aire alrededor, que
   para acertar cuenta tanto como el tamaño.
*/
.agenda-telefono {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.4rem;
    margin-top: .4rem;
    padding: .35rem .7rem;
    border: 1px solid var(--borde);
    border-radius: .45rem;
    background: #fff;
    color: var(--azul);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.agenda-telefono:hover,
.agenda-telefono:focus-visible {
    border-color: var(--azul);
    background: var(--fondo);
}

/* ---------- La dirección, que abre el mapa ----------

   Encabeza la tarjeta de la agenda y es lo que más se mira: al ver la
   lista lo siguiente que se hace es arrancar hacia allí. Tocándola se
   abre el navegador del teléfono, sin pasar por la ficha.

   Se pinta como el resto del encabezado —no en azul de enlace— porque
   es sobre todo el TÍTULO de la cita; el chincheta y el subrayado al
   tocarla dicen que además lleva a algún sitio. */
.agenda-direccion {
    display: inline-block;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.agenda-direccion:hover,
.agenda-direccion:focus-visible {
    color: var(--azul);
    text-decoration: underline;
}

.agenda-pin { text-decoration: none; }

/*
   Este es el teléfono de dentro de un bloque de la REJILLA. Se ve en un
   móvil siempre que se elija la presentación "escritorio", que es una
   opción de la barra; a 0,72rem no se acierta con el dedo desde una
   furgoneta.

   Aquí se convierte en algo pulsable de verdad: más grande, con fondo
   propio para que se distinga del resto del texto del bloque, y con
   sitio suficiente alrededor.

   Se decide solo por ANCHURA, sin mirar (pointer: coarse). Sería más
   fino distinguir dedo de ratón, pero no hay forma de comprobarlo en
   las pruebas automáticas, y un estilo que no se puede verificar es un
   estilo del que no se sabe si funciona en el móvil de quien lo
   necesita. Que en una ventana estrecha de escritorio el número salga
   grande no molesta a nadie.
*/
@media (max-width: 900px) {
    .b-telefono {
        display: inline-block;
        margin: .25rem 0;
        padding: .35rem .6rem;
        border-radius: .35rem;
        background: rgba(255, 255, 255, .75);
        border: 1px solid rgba(15, 23, 42, .12);
        font-size: .88rem;
        font-weight: 600;
        opacity: 1;
        font-variant-numeric: tabular-nums;
    }
}