/*
 * 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; }
.app-nav__logo { height: 30px; display: block; }
.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: 18px; flex-wrap: wrap; flex: 1; }

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

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

.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; }

/* 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-particular { 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; }
.dialogo-cliente { border: none; border-radius: var(--radio); padding: 20px; width: 360px; 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__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) */
.tablero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tablero__columna { background: #eceff3; border-radius: var(--radio); padding: 10px; min-height: 120px; }
.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; }
.tarjeta__meta { font-size: 13px; color: var(--color-texto-suave); margin-bottom: 8px; }
.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; }

.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; }

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

.acciones-ficha { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.acciones-ficha form { display: inline; }

/* 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; }
.panel-resumen--clicable:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); border-color: var(--color-primario); }
.panel-resumen__numero { font-size: 30px; font-weight: 700; line-height: 1; }
.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; }
.panel-resumen__detalle.positivo { color: var(--color-exito); }
.panel-resumen__detalle.negativo { color: var(--color-error); }
.panel-resumen--alerta .boton { margin-top: 6px; align-self: flex-start; }
.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; }

/* 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);
}
.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; }

.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; }

.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; }

    /* 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; }
}