/*
 * Hoja de estilos escrita a mano, sin build tools (sin Node/Vite): el hosting
 * de destino no tiene garantizado Node.js, así que este archivo se sirve tal
 * cual desde /public. Ver SETUP.md para el razonamiento completo.
 */

:root {
    /* Paleta corporativa ESEI Servicios Informáticos */
    --color-primario: #0EA5EC;
    --color-primario-oscuro: #0B84C4;
    --color-fondo: #f4f6f9;
    --color-superficie: #ffffff;
    --color-texto: #1c2530;
    --color-texto-suave: #5b6875;
    --color-borde: #dfe4ea;
    --color-exito: #1f9d55;
    --color-error: #c0392b;
    --color-urgente: #e60023;
    --color-alta: #c0392b;
    --color-media: #d68910;
    --color-baja: #2471a3;
    --color-nav-fondo: #0B1B3A;
    --color-nav-texto: #aebbd6;
    --color-nav-texto-activo: #ffffff;
    --radio: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 15px;
    line-height: 1.45;
}

a { color: var(--color-primario); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 22px; margin: 0 0 12px; }
h2 { font-size: 17px; margin: 24px 0 10px; }

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.app-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px;
    background: var(--color-nav-fondo);
    flex-wrap: wrap;
}

.app-nav a { color: var(--color-nav-texto); font-weight: 500; }
.app-nav a.activo { color: var(--color-nav-texto-activo); }
.app-nav__brand { display: flex; align-items: center; gap: 8px; }
.app-nav__logo { height: 30px; display: block; }
.app-nav__marca-sat {
    color: #fff; font-weight: 800; font-size: 15px; letter-spacing: 1.5px;
    padding-left: 8px; border-left: 1px solid rgba(255,255,255,.25);
}
.app-nav__derecha { margin-left: auto; }
.app-nav__usuario { display: flex; align-items: center; gap: 8px; color: var(--color-nav-texto); font-size: 14px; }
.app-nav__engranaje {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: 50%; background: rgba(255,255,255,.08); color: var(--color-nav-texto); font-size: 15px;
}
.app-nav__engranaje:hover, .app-nav__engranaje.activo { background: var(--color-primario); color: #fff; text-decoration: none; }
.app-nav__logout { margin-left: 4px; }
.app-nav__logout button {
    background: none; border: none; color: var(--color-nav-texto); cursor: pointer; font-size: 14px;
}
.app-nav__logout button:hover { color: var(--color-nav-texto-activo); }

.app-nav__cabecera { display: flex; align-items: center; }
.app-nav__hamburguesa {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 6px;
}
.app-nav__hamburguesa span { width: 22px; height: 2px; background: var(--color-nav-texto-activo); display: block; border-radius: 2px; }
.app-nav__enlaces { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; flex: 1; }

/* Submenú "ESEI" (Clientes/Contratos/Técnicos/Configuración agrupados).
   Nombrado "submenu" y no "dropdown": algunos bloqueadores de publicidad
   traen filtros cosméticos genéricos contra clases tipo "dropdown-menu"
   (muy habitual en menús de anuncios) y ocultaban esto por error. */
.app-nav__submenu { position: relative; }
.app-nav__submenu-boton {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--color-nav-texto); font-weight: 500; font-size: 15px; font-family: inherit;
    display: flex; align-items: center; gap: 4px;
}
.app-nav__submenu-boton:hover, .app-nav__submenu-boton.activo { color: var(--color-nav-texto-activo); }
.app-nav__submenu-flecha { font-size: 10px; transition: transform .15s; }
.app-nav__submenu.abierto .app-nav__submenu-flecha { transform: rotate(180deg); }
.app-nav__submenu-lista {
    display: none;
    position: absolute; top: calc(100% + 16px); left: 0; z-index: 20;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    box-shadow: 0 8px 24px rgba(0,0,0,.15); padding: 8px; min-width: 180px;
    flex-direction: column; gap: 4px;
}
.app-nav__submenu.abierto .app-nav__submenu-lista { display: flex; }
.app-nav__submenu-lista a { color: var(--color-texto) !important; padding: 10px 14px; border-radius: 6px; font-weight: 500; font-size: 14px; }
.app-nav__submenu-lista a:hover { background: var(--color-fondo); text-decoration: none; }
.app-nav__submenu-lista a.activo { color: var(--color-primario) !important; background: #eaf2fb; }

.app-contenido { flex: 1; padding: 24px; max-width: 1100px; margin: 0 auto; width: 100%; }

/* Discreta a propósito: solo visible si alguien se fija (esquina, tamaño mínimo, opacidad baja). */
.app-pie-version {
    position: fixed;
    right: 10px;
    bottom: 6px;
    font-size: 10px;
    line-height: 1;
    color: var(--color-texto-suave);
    opacity: .35;
    cursor: default;
    user-select: none;
    z-index: 5;
    transition: opacity .15s;
}
.app-pie-version:hover { opacity: .85; }

.cabecera-pagina { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* Pestañas de navegación entre pantallas hermanas (RRHH: Fichaje, Gastos,
   Actividad, Vacaciones) — cada una es una ruta propia, esto es solo la
   barra que las conecta visualmente como un mismo apartado. */
.pestanas-rrhh { display: flex; gap: 4px; border-bottom: 1px solid var(--color-borde); margin-bottom: 20px; flex-wrap: wrap; }
.pestanas-rrhh a {
    padding: 10px 16px; color: var(--color-texto-suave); font-weight: 500; font-size: 14px;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.pestanas-rrhh a:hover { color: var(--color-texto); text-decoration: none; }
.pestanas-rrhh a.activo { color: var(--color-primario); border-bottom-color: var(--color-primario); }

.aviso { padding: 10px 14px; border-radius: var(--radio); margin-bottom: 16px; font-size: 14px; }
.aviso--exito { background: #e6f7ec; color: var(--color-exito); }
.aviso--error { background: #fbeceb; color: var(--color-error); }
.aviso--error ul { margin: 0; padding-left: 18px; }
.aviso--info { background: #eaf2fb; color: var(--color-primario-oscuro); padding: 10px 14px; border-radius: var(--radio); }

/* Botones */
.boton {
    display: inline-block;
    padding: 9px 16px;
    border-radius: var(--radio);
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.boton--primario { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.boton--primario:hover { background: var(--color-primario-oscuro); }
.boton--secundario { background: var(--color-superficie); }
.boton--pequeno { padding: 5px 10px; font-size: 13px; }
.boton--aviso { background: #fff8e6; border-color: #f0c14b; color: #8a6d1a; }
.boton--aviso:hover { background: #f0c14b; color: #4a3a0d; }
.boton--peligro { background: #fbeceb; border-color: var(--color-error); color: var(--color-error); }
.boton--peligro:hover { background: var(--color-error); color: #fff; }
.boton--grande {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 14px 22px; font-size: 16px; min-height: 48px;
}

/* Ficha con un clic desde el dashboard */
.panel-fichaje-rapido {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 16px 20px; margin-bottom: 22px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.panel-fichaje-rapido:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--color-primario); }
.panel-fichaje-rapido__info { display: flex; flex-direction: column; gap: 6px; }
.panel-fichaje-rapido__nombre { font-weight: 700; font-size: 16px; }
.panel-fichaje-rapido__acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.panel-fichaje-rapido__acciones form { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }

.incidencias-cerradas { margin-top: 32px; }
.incidencias-cerradas h2 { margin-bottom: 2px; }

.ficha--envio-email { margin: 16px 0; }
.ficha--envio-email h3 { margin-top: 0; }

/* Ficha del parte con aspecto de documento real (inspirado en el PDF): franja
   de color, cajas de datos separadas, tablas de líneas con cabecera oscura. */
.documento-parte {
    background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: var(--radio); padding: 28px 32px; max-width: 860px;
    box-shadow: 0 2px 14px rgba(15,23,42,.05);
}
.documento-parte__cabecera {
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px;
    border-bottom: 3px solid var(--color-primario); padding-bottom: 18px; margin-bottom: 22px;
}
.documento-parte__numero { font-size: 22px; font-weight: 800; color: var(--color-nav-fondo); margin: 0; }
.documento-parte__subtitulo { color: var(--color-texto-suave); font-size: 13px; margin: 3px 0 0; }
.documento-parte__estado { display: flex; gap: 8px; align-items: center; }

/* Rejilla de "cajas de datos" (cliente, servicio...) — genérica, se usa
   tanto en el documento del parte como en la ficha de incidencia. */
.grid-cajas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.caja-datos { background: var(--color-fondo); border-radius: var(--radio); padding: 14px 18px; }
.caja-datos__titulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--color-texto-suave); font-weight: 700; margin: 0 0 8px;
}
.caja-datos dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 14px; }
.caja-datos dt { color: var(--color-texto-suave); }
.caja-datos dt::after { content: ':'; }
.caja-datos dd a { color: inherit; }
.documento-parte h2.documento-parte__seccion, h2.seccion-caja {
    font-size: 13px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--color-nav-fondo); margin: 22px 0 8px; display: flex; align-items: center; gap: 8px;
}

/* Tabla de líneas (material, mano de obra...) — genérica, cabecera oscura a
   juego con el PDF, usable dentro o fuera de .documento-parte. */
table.lineas { width: 100%; border-collapse: collapse; margin-bottom: 6px; font-size: 14px; }
table.lineas th {
    background: var(--color-nav-fondo); color: #fff; text-align: left;
    padding: 8px 12px; font-size: 12px; font-weight: 500;
}
table.lineas th:last-child, table.lineas td:last-child { text-align: right; }
table.lineas td { padding: 8px 12px; border-bottom: 1px solid var(--color-borde); }
table.lineas tr:nth-child(even) td { background: var(--color-fondo); }
@media (max-width: 640px) {
    /* En pantalla estrecha, la tabla se desplaza en horizontal en vez de
       aplastar columnas o partir el texto de una celda en varias líneas
       (que en .chip/.badge queda especialmente mal, como una mancha). */
    table.lineas { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
}
.caja-vacia { color: var(--color-texto-suave); font-size: 14px; font-style: italic; padding: 8px 0 16px; }
.documento-parte__vacio { color: var(--color-texto-suave); font-size: 14px; font-style: italic; padding: 8px 0 16px; }
.caja-texto, .documento-parte__observaciones {
    background: var(--color-fondo); border-radius: var(--radio); padding: 12px 16px;
    font-size: 14px; white-space: pre-wrap; margin-bottom: 6px;
}
.documento-parte__firma {
    border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 16px 18px; margin-top: 8px; background: var(--color-fondo);
}
.documento-parte__firma img { max-width: 240px; max-height: 100px; border: 1px solid var(--color-borde); border-radius: 6px; background: #fff; }
.documento-parte__firma .conforme { font-weight: 700; margin-bottom: 6px; }
.documento-parte__firma .meta { color: var(--color-texto-suave); font-size: 12.5px; margin-top: 8px; }
.badge--modalidad-remoto { background: #6b5b95; }
.badge--modalidad-presencial { background: var(--color-primario); }
@media (max-width: 640px) {
    .documento-parte { padding: 20px; }
    .grid-cajas { grid-template-columns: 1fr; }
}

/* Notas internas */
.notas-internas { margin-top: 32px; }
.notas-internas h2 { margin-bottom: 2px; }
.notas-internas__form { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 16px; }
.notas-internas__form textarea { flex: 1; resize: vertical; }
.notas-internas__lista { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.notas-internas__lista li {
    background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: var(--radio); padding: 10px 14px;
}
.notas-internas__lista p { margin: 4px 0 0; white-space: pre-wrap; }
.notas-internas__meta { display: flex; gap: 10px; font-size: 13px; color: var(--color-texto-suave); }

/* Copias de seguridad */
.copias-seguridad { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.texto-atenuado { color: var(--color-texto-suave); font-size: 13px; }
.tabla--copias__acciones { display: flex; gap: 6px; align-items: center; }
.tabla--copias__acciones form { display: inline; }
@media (max-width: 900px) {
    .copias-seguridad { grid-template-columns: 1fr; }
}

/* Badges de prioridad y estado */
.badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; vertical-align: middle; }
.badge--urgente { background: var(--color-urgente); box-shadow: 0 0 0 2px rgba(230,0,35,.25); animation: pulso-urgente 1.6s infinite; }
.badge--alta { background: var(--color-alta); }
.badge--media { background: var(--color-media); }
.badge--baja { background: var(--color-baja); }
.badge--estado-borrador { background: var(--color-texto-suave); }
.badge--estado-firmado { background: var(--color-exito); }
.badge--estado-exportado { background: var(--color-primario); }
.badge--tipo-empresa { background: var(--color-primario); }
.badge--tipo-autonomo { background: var(--color-exito); }
.badge--tipo-particular { background: #6b5b95; }
.badge--activo { background: var(--color-exito); }
.badge--inactivo { background: var(--color-texto-suave); }
.badge--pausa { background: #f0c14b; color: #4a3a0d; }
.badge--intervencion { background: #6b5b95; }

@keyframes pulso-urgente { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* Avatares */
.avatar-mini { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; vertical-align: middle; background: var(--color-borde); }

/* Contador de tiempo abierto por incidencia */
.contador-tiempo { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.contador-tiempo.nivel-normal { background: #eaf6ec; color: var(--color-exito); }
.contador-tiempo.nivel-atencion { background: #fff3da; color: var(--color-media); }
.contador-tiempo.nivel-critico { background: #fbeceb; color: var(--color-error); font-weight: 700; }

.tarjeta--nivel-critico { box-shadow: 0 0 0 2px var(--color-error) inset; }
.tarjeta--nivel-atencion { box-shadow: 0 0 0 2px var(--color-media) inset; }

/* Banner de incidencias urgentes en el dashboard */
.banner-urgente {
    background: var(--color-urgente); color: #fff; padding: 12px 18px; border-radius: var(--radio);
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 15px;
    animation: pulso-urgente 2s infinite;
}
.banner-urgente .boton { background: #fff; color: var(--color-urgente); border: none; margin-left: auto; }

/* Diálogo de alta rápida de cliente */
.selector-cliente__filtro { width: 100%; padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-size: 14px; margin-bottom: 6px; }
.selector-cliente__fila { display: flex; gap: 8px; }
.selector-cliente__fila select { flex: 1; min-width: 0; }
.dialogo-cliente { border: none; border-radius: var(--radio); padding: 20px; width: 360px; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.dialogo-cliente::backdrop { background: rgba(11,27,58,.5); }
.dialogo-cliente h3 { margin-top: 0; }
.dialogo-cliente label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.dialogo-cliente label[hidden] { display: none; } /* el display:flex de arriba, si no, gana al [hidden] por defecto */
.dialogo-cliente__error { color: var(--color-error); font-size: 13px; }
.dialogo-cliente__acciones { display: flex; justify-content: flex-end; gap: 8px; }

/* Filtros */
.filtros { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.filtros__form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filtros__check { font-size: 14px; display: flex; align-items: center; gap: 4px; }
.filtros__vista { display: flex; gap: 4px; background: var(--color-superficie); border-radius: var(--radio); padding: 3px; border: 1px solid var(--color-borde); }
.filtros__vista a { padding: 6px 12px; border-radius: 6px; color: var(--color-texto-suave); }
.filtros__vista a.activo { background: var(--color-primario); color: #fff; }

select, input[type=text], input[type=email], input[type=search], input[type=password],
input[type=number], input[type=date], input[type=time], textarea {
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    font-size: 14px;
    background: var(--color-superficie);
    color: var(--color-texto);
}

/* Tablero (kanban). 5 columnas (pendiente/asignada/en_proceso/en_pausa/
   finalizada, ver incidencias/index.blade.php) — antes decía repeat(4,...),
   desajustado con las 5 reales: la quinta se salía del grid definido y el
   navegador le daba un ancho por contenido en vez de igual a las demás.
   min-width: 0 en la columna evita además que una con contenido más ancho
   (una tarjeta con texto largo) crezca a costa de las otras — sin eso, un
   grid item nunca se encoge por debajo del ancho de su contenido aunque la
   pista sea "1fr", que es justo el otro síntoma reportado. */
/* grid-template-columns viene de una variable, NO puesta directamente en el
   style="" del div (ver incidencias/index.blade.php) — un valor puesto así
   en línea gana siempre a cualquier regla de la hoja de estilos, incluida
   la de móvil de más abajo que colapsa esto a una sola columna, así que
   rompía la vista móvil por completo si se ponía tal cual. Con la
   variable, la regla de móvil (que no la usa) puede seguir ganando. */
.tablero { display: grid; grid-template-columns: var(--tablero-anchos, repeat(4, 1fr)); gap: 14px; }
.tablero__columna { background: #eceff3; border-radius: var(--radio); padding: 10px; min-height: 120px; min-width: 0; }
.tablero__columna h2 { margin-top: 4px; font-size: 14px; text-transform: uppercase; color: var(--color-texto-suave); display: flex; justify-content: space-between; }
.contador { background: var(--color-borde); border-radius: 999px; padding: 1px 8px; font-size: 12px; margin-left: 4px; }
.contador--urgente { background: var(--color-urgente); color: #fff; animation: pulso-urgente 1.6s infinite; }

.tarjeta { background: var(--color-superficie); border-radius: var(--radio); padding: 10px 12px; margin-bottom: 10px; border-left: 4px solid var(--color-borde); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.tarjeta--alta { border-left-color: var(--color-alta); }
.tarjeta--media { border-left-color: var(--color-media); }
.tarjeta--baja { border-left-color: var(--color-baja); }
.tarjeta__cabecera { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tarjeta__titulo { color: var(--color-texto); font-weight: 600; }
/* Cliente y equipo van cada uno en su propia línea (en vez de compartir
   una y competir por el hueco, que era como acababa desapareciendo uno de
   los dos) — así cada línea tiene todo el ancho de la tarjeta para ella
   sola y solo se trunca con "…" si de verdad no cabe. */
.tarjeta__meta { font-size: 13px; color: var(--color-texto-suave); margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.tarjeta__meta-linea { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta__pie { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.tarjeta__acciones { display: flex; gap: 6px; }
.tarjeta__acciones form { display: inline; }

/* Tablas */
.tabla-envoltorio { overflow-x: auto; background: var(--color-superficie); border-radius: var(--radio); border: 1px solid var(--color-borde); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 10px 14px; border-bottom: 1px solid var(--color-borde); text-align: left; }
.tabla th { color: var(--color-texto-suave); font-weight: 600; font-size: 13px; }
.tabla__acciones { white-space: nowrap; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 14px; max-width: 520px; background: var(--color-superficie); padding: 20px; border-radius: var(--radio); border: 1px solid var(--color-borde); }
.formulario label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500; }
.formulario__checkbox { flex-direction: row !important; align-items: center; gap: 6px !important; }
.formulario__checkbox input { width: auto; }
.formulario-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 20px; }

/* Formularios de "Añadir material/desplazamiento" (intervenciones y partes):
   sin esto, cada campo del .formulario-inline genérico queda a su ancho de
   contenido y se envuelven sueltos en pantallas estrechas. Anchos por tipo
   de campo para que quede en fila prolija. */
.formulario-inline--material [data-filtro-simple] { flex: 2 1 220px; }
.formulario-inline--material [data-filtro-simple] .selector-cliente__filtro { margin-bottom: 0; }
.formulario-inline--material select[name="articulo_id"] { flex: 2 1 220px; }
.formulario-inline--material input[name="descripcion_libre"] { flex: 2 1 200px; }
.formulario-inline--material input[name="cantidad"] { flex: 0 1 90px; }
.formulario-inline--material input[name="precio_unitario"] { flex: 0 1 110px; }

/* Edición rápida del PVP de una línea ya añadida (tabla de material). */
.formulario-precio-linea { display: flex; gap: 4px; align-items: center; }
.formulario-precio-linea input { width: 80px; padding: 4px 6px; }

.formulario-tarifa-plana { margin: 10px 0; }

/* Control de cobro en el listado de intervenciones (columna "Pagado"). */
.cobro-hecho { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cobro-hecho form { display: inline; }

select:focus, input:focus, textarea:focus {
    outline: none; border-color: var(--color-primario); box-shadow: 0 0 0 3px rgba(14,165,236,.15);
}

/* Formulario "elaborado": varias secciones en tarjetas propias, con rejilla
   de 2 columnas para pares de campos relacionados — para las pantallas de
   alta (incidencia/intervención/parte), más cómodas que una única columna
   larga con muchos campos seguidos. */
.formulario-elaborado { display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.formulario-elaborado__seccion {
    background: var(--color-superficie); border: 1px solid var(--color-borde);
    border-radius: var(--radio); padding: 22px 26px;
}
.formulario-elaborado__seccion h2 {
    margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px;
}
.formulario-elaborado__seccion > p.texto-atenuado { margin: 4px 0 18px; }
.formulario-elaborado__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.formulario-elaborado__campos label,
.formulario-elaborado__campos > div {
    display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 500;
    /* Sin esto, una celda del grid no se encoge por debajo del ancho de
       su contenido (p. ej. el nombre de cliente más largo del desplegable)
       y se sale del formulario por la derecha en móvil — ver también
       .selector-cliente__fila select más abajo, mismo motivo. */
    min-width: 0;
}
.formulario-elaborado__campos .campo-ancho { grid-column: 1 / -1; }
.formulario-elaborado__acciones { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 640px) {
    .formulario-elaborado__campos { grid-template-columns: 1fr; }
    .formulario-elaborado__acciones { justify-content: stretch; }
    .formulario-elaborado__acciones .boton { flex: 1; text-align: center; }
}

/* Selector segmentado (2-3 opciones tipo pastilla) — usado para elegir
   modalidad presencial/remoto, más rápido de tocar en móvil que un <select>. */
.selector-segmentado { display: flex; gap: 8px; }
.selector-segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.selector-segmentado label {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    text-align: center; padding: 10px 12px; border: 1px solid var(--color-borde);
    border-radius: var(--radio); cursor: pointer; font-weight: 600; font-size: 14px;
    color: var(--color-texto-suave); background: var(--color-fondo); transition: background .12s, color .12s, border-color .12s;
}
.selector-segmentado input:checked + label { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.selector-segmentado input:focus-visible + label { box-shadow: 0 0 0 3px rgba(14,165,236,.3); }

.ficha { background: var(--color-superficie); padding: 20px; border-radius: var(--radio); border: 1px solid var(--color-borde); }
.ficha__datos { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 14px 0; }
.ficha__datos dt { color: var(--color-texto-suave); font-size: 13px; }
.ficha__datos dd { margin: 0; }

/* Tarjeta genérica para agrupar una sección de una ficha (sedes, equipos,
   histórico...) — mismo aspecto que las tarjetas de contratos del panel,
   pero de uso general en cualquier pantalla, no solo el dashboard.
   Nombrada "tarjeta-seccion" (no solo "tarjeta") a propósito: esa clase ya
   la usa la tarjeta de incidencia del tablero (ver incidencias/_tarjeta.blade.php),
   que es un componente completamente distinto. */
.tarjeta-seccion { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 16px; }
.tarjeta-seccion__cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.tarjeta-seccion__cabecera h2 { margin: 0; }
.tarjeta-seccion__contador { color: var(--color-texto-suave); font-size: 13px; font-weight: 500; }
/* Panel de "añadir" dentro de una tarjeta: separado del listado de arriba
   con una franja tenue, para que no parezcan inputs sueltos flotando. */
.tarjeta-seccion__anadir { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-fondo); }
.tarjeta-seccion__anadir .formulario-inline { margin: 0; }

.lista-simple { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-simple li { padding: 8px 0; border-bottom: 1px solid var(--color-borde); }

.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo__item { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--color-borde); }
.linea-tiempo__hora { color: var(--color-texto-suave); font-size: 13px; min-width: 42px; }
.linea-tiempo__icono { font-size: 15px; }
.linea-tiempo__descripcion { flex: 1; }

.acciones-ficha { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.acciones-ficha form { display: flex; margin: 0; }
.acciones-ficha .formulario-inline { margin: 0; padding: 4px 6px 4px 12px; background: var(--color-fondo); border-radius: var(--radio); }

/* Pantalla de firma */
.firma-pantalla { max-width: 480px; margin: 0 auto; }
.firma-conforme { font-weight: 600; margin-top: 20px; }
.firma-lienzo-envoltorio { border: 2px dashed var(--color-borde); border-radius: var(--radio); background: #fff; }
.firma-lienzo { width: 100%; height: 220px; touch-action: none; display: block; }
.firma-acciones { display: flex; justify-content: space-between; margin-top: 12px; gap: 10px; }

/* Dashboard */
.paneles-resumen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 22px; }
.panel-resumen {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.panel-resumen--alerta { border-color: var(--color-media); background: #fff8ec; }
.panel-resumen--clicable { text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s; }
.panel-resumen--clicable:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); border-color: var(--color-primario); transform: translateY(-2px); }

/* Aire de "nota adhesiva": fondo pastel suave + una esquina doblada
   (degradado diagonal que revela el fondo de la página, con una
   sombrita fina en el pliegue) — sin chincheta ni rotación para no
   restarle legibilidad al número grande. Un color por panel; el de
   alerta (OFIPRO) mantiene su propio crema en vez de --panel-color. */
.panel-resumen--postit { background: linear-gradient(135deg, transparent 12px, rgba(0,0,0,.07) 12px, rgba(0,0,0,.07) 14px, var(--panel-color) 14px); }
.panel-resumen--postit.panel-resumen--alerta { background: linear-gradient(135deg, transparent 12px, rgba(0,0,0,.07) 12px, rgba(0,0,0,.07) 14px, #fff8ec 14px); }
.panel-resumen--rosa { --panel-color: #fdeef1; }
.panel-resumen--azul { --panel-color: #eaf3fb; }
.panel-resumen--lila { --panel-color: #f2eefc; }
.panel-resumen--verde { --panel-color: #eaf7ee; }

/* Texto que enlaza a otra pantalla pero debe seguir leyéndose como texto
   normal (nombre de cliente en una tarjeta, fila de una tabla...). */
.enlace-discreto { color: inherit; text-decoration: none; }
.enlace-discreto:hover { text-decoration: underline; }
.panel-resumen__cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.panel-resumen__emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.panel-resumen__numero { font-size: 30px; font-weight: 700; line-height: 1; white-space: nowrap; flex-shrink: 0; }
.panel-resumen__etiqueta { color: var(--color-texto-suave); font-size: 13px; }
.panel-resumen__detalle { font-size: 12px; color: var(--color-texto-suave); margin-top: 2px; white-space: nowrap; }
.panel-resumen__detalle.positivo { color: var(--color-exito); }
.panel-resumen__detalle.negativo { color: var(--color-error); }

/* OFIPRO: todo el contenido cabe en una frase ("X Partes sin registrar
   en [logo]") — toda la tarjeta ya es clicable, no hace falta botón
   aparte. Fila en vez de columna (a diferencia del resto de paneles). */
.panel-resumen--ofipro { gap: 10px; }
.panel-resumen--ofipro .panel-resumen__numero { font-size: 20px; }
.panel-resumen__logo-ofipro { height: 70px; width: auto; max-width: 90%; align-self: center; margin-top: 4px; }
.panel-resumen__mini-stats { display: flex; justify-content: space-between; gap: 6px; margin-top: 6px; }
.panel-resumen__mini-stats > div { display: flex; flex-direction: column; align-items: center; flex: 1; }
.panel-resumen__mini-numero { font-size: 18px; font-weight: 700; line-height: 1; }
.panel-resumen__mini-etiqueta { color: var(--color-texto-suave); font-size: 11px; }
.meses-panel-fecha { color: var(--color-texto-suave); text-transform: capitalize; }

.comparativas-mensuales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; }
.comparativa-bloque h2 { margin-top: 0; }

/* Hoja de gastos: titular/mes/total bien visibles arriba, antes que el
   desglose (Gastos/Km/Especie) de más abajo. */
.hoja-gastos-cabecera {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    margin-bottom: 22px; padding: 20px; background: var(--color-superficie);
    border: 1px solid var(--color-borde); border-radius: var(--radio);
}
.hoja-gastos-cabecera__dato { display: flex; flex-direction: column; gap: 4px; }
.hoja-gastos-cabecera__etiqueta { color: var(--color-texto-suave); font-size: 13px; }
.hoja-gastos-cabecera__valor { font-size: 26px; font-weight: 700; line-height: 1.15; }
.hoja-gastos-cabecera__dato--total { border-left: 1px solid var(--color-borde); padding-left: 14px; }
.hoja-gastos-cabecera__valor--total { color: var(--color-exito); font-size: 30px; }
.hoja-gastos-cabecera__total-fila { display: flex; align-items: center; gap: 10px; }
.hoja-gastos-cabecera__candado-form { display: contents; }
.hoja-gastos-cabecera__candado {
    font-size: 26px; line-height: 1; background: none; border: none; padding: 0;
}
.hoja-gastos-cabecera__candado--boton { cursor: pointer; }
.hoja-gastos-cabecera__candado--boton:hover { transform: scale(1.1); }
@media (max-width: 720px) {
    .hoja-gastos-cabecera { grid-template-columns: 1fr; }
    .hoja-gastos-cabecera__dato--total { border-left: none; padding-left: 0; border-top: 1px solid var(--color-borde); padding-top: 12px; }
}

/* Barra de filtros (listado de partes) */
.barra-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barra-filtros input[type="search"] { flex: 1 1 240px; padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-size: 14px; }
.barra-filtros select { padding: 8px 12px; border: 1px solid var(--color-borde); border-radius: var(--radio); font-size: 14px; background: var(--color-superficie); }

.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
    display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
    background: var(--color-superficie); border: 1px solid var(--color-borde); color: var(--color-texto-suave);
    text-decoration: none;
}
.chip:hover { text-decoration: none; border-color: var(--color-primario); color: var(--color-texto); }
.chip--activo { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.chip--naranja { background: #fbf0de; border-color: #f0dbae; color: #a3620a; }
.chip--rojo { background: #fbeceb; border-color: #f3c9c6; color: var(--color-error); }
.chip--cubierto { background: #eaf6ec; border-color: #cdeed4; color: var(--color-exito); font-size: 11px; margin-left: 6px; padding: 2px 8px; }

/* Contratos de mantenimiento (dashboard): tarjetas limpias, sin tablas —
   barras de progreso para horas, chips para bonos y "sin visita". */
.tarjetas-contratos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 10px; }
.tarjeta-contrato { background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio); padding: 14px 16px 16px; }
.tarjeta-contrato__cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-fondo); }
.tarjeta-contrato__titulo { font-size: 12.5px; font-weight: 600; }

.lista-contrato { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.fila-contrato { display: flex; flex-direction: column; gap: 5px; }
.fila-contrato__nombre { font-size: 12.5px; font-weight: 500; }
.fila-contrato__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fila-contrato--completada { opacity: .5; text-decoration: line-through; }

/* Informe mensual de fichaje: lista de incidencias del mes. */
.lista-incidencias { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-incidencias li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.barra-horas { display: flex; align-items: center; gap: 8px; }
.barra-horas__pista { flex: 1; height: 5px; background: var(--color-fondo); border-radius: 3px; overflow: hidden; }
.barra-horas__relleno { height: 100%; background: #c3cbd4; border-radius: 3px; }
.barra-horas__relleno--naranja { background: var(--color-media); }
.barra-horas__relleno--rojo { background: var(--color-error); }
.barra-horas__texto { font-size: 10.5px; color: var(--color-texto-suave); white-space: nowrap; min-width: 52px; text-align: right; }
.texto--naranja { color: #a3620a; font-weight: 600; }
.texto--rojo { color: var(--color-error); font-weight: 600; }

.nube-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.nube-chips .chip b { margin-left: 5px; }

.ruta-hoy-vacia { text-align: center; color: var(--color-texto-suave); font-size: 15px; font-weight: 600; padding: 24px 0; }

@media (max-width: 900px) {
    .tarjetas-contratos { grid-template-columns: 1fr; }
}

.tabla th a { color: var(--color-texto-suave); }
.tabla th a:hover { color: var(--color-texto); text-decoration: none; }

/* Trazabilidad incidencia -> intervención -> parte */
.caja-origen {
    background: #eaf2fb; border: 1px solid #cfe0f5; border-radius: var(--radio);
    padding: 10px 14px; margin-bottom: 16px; font-size: 13.5px;
}
.caja-origen__titulo { font-weight: 600; color: var(--color-primario-oscuro); margin-bottom: 4px; }
.caja-origen p { margin: 2px 0; }

/* Navegación entre partes (anterior/siguiente) */
.navegacion-partes { display: flex; justify-content: space-between; margin-top: 24px; gap: 10px; }

/* Campo de contraseña con botón "ojo" para mostrar/ocultar */
.campo-password { display: flex; gap: 6px; align-items: center; }
.campo-password input { flex: 1; }
.campo-password__ojo {
    background: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: var(--radio);
    padding: 6px 10px; cursor: pointer; font-size: 15px; line-height: 1;
}
.campo-password__ojo--activo { border-color: var(--color-primario); }

/* Mi perfil */
.perfil-avatar { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.perfil-avatar__imagen { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--color-borde); }
.perfil-avatar label { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 13px; }

/* Verificación en dos pasos (QR de Google Authenticator) */
.qr-2fa { background: #fff; padding: 16px; border-radius: var(--radio); display: inline-block; margin: 10px 0; border: 1px solid var(--color-borde); }
.qr-2fa svg { display: block; width: 220px; height: 220px; }
.qr-2fa__clave { font-size: 13px; color: var(--color-texto-suave); word-break: break-all; }
.qr-2fa__clave code { background: var(--color-fondo); padding: 2px 6px; border-radius: 4px; }

.barras-comparativa { display: flex; flex-direction: column; gap: 8px; }
.barra-comparativa__fila { display: grid; grid-template-columns: 64px 1fr 34px; align-items: center; gap: 10px; }
.barra-comparativa__etiqueta { font-size: 12px; color: var(--color-texto-suave); text-transform: capitalize; }
.barra-comparativa__etiqueta.activo { color: var(--color-texto); font-weight: 700; }
.barra-comparativa__pista { background: #eceff3; border-radius: 999px; height: 10px; overflow: hidden; }
.barra-comparativa__relleno { background: var(--color-primario); opacity: .55; height: 100%; border-radius: 999px; }
.barra-comparativa__relleno.relleno-actual { background: var(--color-primario); opacity: 1; }
.barra-comparativa__valor { font-size: 13px; font-weight: 600; text-align: right; }
a.barra-comparativa__fila { text-decoration: none; color: inherit; border-radius: 6px; margin: 0 -6px; padding: 3px 6px; }
a.barra-comparativa__fila:hover { background: var(--color-fondo); }
a.barra-comparativa__fila:hover .barra-comparativa__etiqueta { color: var(--color-primario); }

.ofipro-tarjeta { margin-bottom: 16px; }
.ofipro-tarjeta form { display: inline; }

/* Pantalla de login */
.pantalla-login { max-width: 380px; margin: 60px auto; padding: 0 16px; text-align: center; }
.pantalla-login__logo { max-width: 220px; margin: 0 auto 30px; display: block; }
.pantalla-login .formulario { text-align: left; margin: 0 auto; }

/* Paginación */
.paginacion { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 20px 0; font-size: 14px; }
.paginacion__enlace { color: var(--color-primario); font-weight: 500; }
.paginacion__enlace--desactivado { color: var(--color-borde); }
.paginacion__info { color: var(--color-texto-suave); }

/* Responsive: móvil */
@media (max-width: 860px) {
    .tablero { grid-template-columns: 1fr; }
    .app-contenido { padding: 14px; }
    .ficha__datos { grid-template-columns: 1fr; }
    .paneles-resumen { grid-template-columns: 1fr 1fr; }
    .comparativas-mensuales { grid-template-columns: 1fr; }
    .panel-fichaje-rapido { flex-direction: column; align-items: stretch; }
    .panel-fichaje-rapido__acciones { flex-direction: column; align-items: stretch; }
    .panel-fichaje-rapido__acciones form,
    .panel-fichaje-rapido__acciones form .boton--grande { width: 100%; }

    /* Menú de navegación como hamburguesa */
    .app-nav { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 16px; }
    .app-nav__cabecera { display: flex; align-items: center; justify-content: space-between; }
    .app-nav__hamburguesa { display: flex; }
    .app-nav__enlaces {
        display: none; flex-direction: column; align-items: stretch; gap: 2px;
        width: 100%; padding-top: 10px;
    }
    .app-nav__enlaces.abierto { display: flex; }
    .app-nav__enlaces a { padding: 10px 4px; border-top: 1px solid rgba(255,255,255,.08); }
    .app-nav__derecha { margin-left: 0; }
    .app-nav__usuario { padding: 12px 4px 4px; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }

    /* El submenú "ESEI" se aplana en un sub-acordeón en vez de flotar. */
    .app-nav__submenu-boton {
        width: 100%; justify-content: space-between; padding: 10px 4px;
        border-top: 1px solid rgba(255,255,255,.08); font-size: inherit;
    }
    .app-nav__submenu-lista {
        display: none; position: static; box-shadow: none; border: none; border-radius: 0;
        background: none; padding: 4px 0 4px 14px; min-width: 0; gap: 6px;
    }
    .app-nav__submenu.abierto .app-nav__submenu-lista { display: flex; }
    .app-nav__submenu-lista a {
        color: var(--color-nav-texto) !important; padding: 10px 4px; border-radius: 0;
        border-top: 1px solid rgba(255,255,255,.06);
    }
    .app-nav__submenu-lista a:hover, .app-nav__submenu-lista a.activo { background: none; color: var(--color-nav-texto-activo) !important; }
}

/* Pulido general: transiciones e interacción consistentes en toda la app
   (antes cada componente tenía las suyas sueltas, o ninguna), foco visible
   por teclado en botones/tarjetas/filas (antes solo los campos de
   formulario lo tenían) y respeto a "reducir movimiento" del sistema. */
.boton, .chip, .tarjeta, .panel-resumen, a {
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease, transform .08s ease;
}

.boton:active { transform: translateY(1px); }

.boton:focus-visible, .chip:focus-visible, a:focus-visible, .app-nav__engranaje:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(14,165,236,.35); border-radius: 4px;
}
.boton:focus-visible { border-radius: var(--radio); }

/* Filas de tabla: resaltar la fila bajo el cursor ayuda a leer tablas
   anchas sin perder la línea (partes, incidencias en vista lista...). */
.tabla tbody tr:hover td, table.lineas tbody tr:hover td { background: var(--color-fondo); }

/* Tarjetas del tablero de incidencias: pequeña elevación al pasar el
   ratón, coherente con el resto de elementos ya clicables (paneles del
   dashboard, fichaje rápido). */
.tarjeta { transition: box-shadow .15s ease, border-color .15s ease; }
.tarjeta:hover { box-shadow: 0 4px 14px rgba(15,23,42,.1); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}