/* Identidad visual del panel del operador (pedido explicito, agosto 2026):
   amarillo/negro/blanco, tipo maquinaria industrial, y botones de accion
   grandes en la mitad inferior de la pantalla (zona del pulgar). Archivo
   PROPIO, cargado SOLO en las paginas del operador (panel.php,
   login_operador.php, pwa/instalar.php) -- nunca en las paginas de staff
   (admin/mecanico/autoridad), que siguen con app.css tal cual. Se carga
   DESPUES de app.css: reusa sus reglas base (reset, .form-grupo, .tabla,
   etc.) y solo sobreescribe lo que este pedido pide, en vez de duplicar
   todo el archivo.

   Reduccion de friccion (auditoria previa a este archivo, agosto 2026): el
   checklist paso a paso que acompaña a este diseño (ver checklist.js) no
   baja el numero de toques -- lo que resuelve es que en cada pantalla haya
   un solo boton de avance posible, grande, sin tener que buscarlo entre
   varias tarjetas apiladas. */

:root {
    --color-negro: #1A1A1A;
    --color-amarillo: #FFC800;
    --color-blanco: #FFFFFF;
    --color-fondo-suave: #F5F5F0;
    --color-critico: #D32F2F;  /* SOLO vencido/critico/error -- no diluir usandolo en otro lado */
    --color-exito: #2E7D32;    /* SOLO confirmacion de ENVIO exitoso -- nunca "pendiente" */

    /* Remapeo de las variables ya usadas en toda la app.css compartida
       (.mensaje-error, .badge.criticidad-critico, .aviso-mantenimiento-vencido,
       etc.): asi heredan el rojo nuevo sin tener que reescribir cada regla
       una por una. --color-ok NO se remapea aca a proposito -- .mensaje-ok
       tambien se usa para "todavia pendiente de enviar" (ver mas abajo),
       que NO es un envio exitoso; --color-exito se aplica explicito, solo
       donde de verdad corresponde. */
    --color-error: #D32F2F;
}

body {
    font-size: 16px;
    background: var(--color-fondo-suave);
    color: var(--color-negro);
}

/* Topbar del operador: la MISMA que staff, sin override propio (pedido
   explicito, septiembre 2026: "el mismo diseño completo, no solo la
   estructura -- fondo amarillo, texto/links en negro, igual que staff").
   panel.php ya usa la clase LITERAL ".topbar" (no una variante propia como
   ".panel-operador-topbar", que existio brevemente en la ronda anterior y
   quedo sin este ajuste) -- se hereda tal cual de app.css: fondo amarillo,
   flex-wrap:nowrap + gap ya afinados ahi contra el bug real de "Actualizar"
   saliendose de la vista en pantallas angostas (320-375px). Nada que
   sobreescribir aca. */

/* "Actualizar" y "Cerrar sesion": mismo peso visual que ya tenian antes del
   experimento de topbar negra (agosto 2026) -- color por defecto de
   .link-boton (negro, ya hereda bien tanto sobre el amarillo de la topbar
   como sobre el fondo claro del pie), solo un poco mas de peso porque son
   las dos acciones de navegacion mas frecuentes del panel. */
#boton-actualizar,
#boton-cerrar-sesion {
    color: var(--color-negro);
    font-weight: 700;
}

/* Indicador "En linea": tambien heredaba --color-ok (el mismo verde viejo)
   via .indicador-conexion.en-linea en app.css. "Estar en linea" es un
   estado de conectividad, no una confirmacion de envio exitoso, asi que
   tampoco le corresponde el verde reservado -- queda neutro. El estado
   "sin-conexion" no se toca aca: ya hereda el rojo nuevo automaticamente
   via el remapeo de --color-error mas arriba. */
.indicador-conexion.en-linea {
    background: var(--color-fondo-suave);
    color: var(--color-negro);
}

/* ---- Botones: 48px minimo, texto grande, amarillo/negro alto contraste ---- */
.boton {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    background: var(--color-amarillo);
    color: var(--color-negro);
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.boton.secundario {
    background: var(--color-blanco);
    color: var(--color-negro);
    border: 2px solid var(--color-negro);
}

/* "Registrar combustible" (pedido explicito, agosto 2026): identidad
   visual PROPIA y CONSTANTE, no condicional -- mismo criterio que
   "Comenzar checklist" ya es amarillo fijo. No podia ser amarillo (eso
   queda reservado para la accion principal del dia a dia) ni el mismo
   contorno blanco/negro que ya usan "Volver a mis equipos" y "Entregar
   equipo" (se hubiera perdido entre ellos, justo el problema que esto
   busca resolver). Negro solido + texto blanco: tercer nivel dentro de la
   misma paleta negro/amarillo/blanco, sin agregar un color nuevo. */
#boton-registrar-combustible {
    background: var(--color-negro);
    color: var(--color-blanco);
    border: 2px solid var(--color-negro);
}

/* ---- Toggle OK / Novedad / No aplica: mismo minimo de 48px, texto mas
   grande que antes (el mas chico de toda la app, 0.85rem -- justo el que
   mas se toca por checklist). Seleccionado: negro solido + texto amarillo,
   para no pisar el rojo/verde reservados con el estado "activo". ---- */
.toggle-estado {
    min-height: 48px;
    font-size: 1rem;
    font-weight: 600;
    border: 2px solid var(--color-borde);
    border-radius: 8px;
}
.toggle-estado.activo {
    background: var(--color-negro);
    color: var(--color-amarillo);
    border-color: var(--color-negro);
}

.checklist-boton-avance,
#boton-paso0-siguiente {
    width: 100%;
    margin-top: 0.75rem;
}

/* ---- Tarjetas de equipo y contexto: touch target mas alto, borde superior
   amarillo como acento de marca sin saturar toda la tarjeta. ---- */
.tarjeta-equipo {
    min-height: 64px;
    justify-content: center;
    border-left: 6px solid var(--color-amarillo);
}
.tarjeta-contexto { border-top: 6px solid var(--color-amarillo); }
.tarjeta-login, .tarjeta-instalar { border-top: 6px solid var(--color-amarillo); }

/* ---- Indicador de progreso del checklist paso a paso (pedido explicito:
   "paso X de N") ---- */
.checklist-progreso {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-negro);
    background: var(--color-fondo-suave);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* ---- Una seccion a la vez (pedido explicito, agosto 2026): items visibles
   directo, sin expandir -- eso elimina el toque de "expandir" que existia
   antes para reportar una novedad. ---- */
.checklist-seccion-paso {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1.1rem;
    margin-bottom: 1rem;
}
.checklist-seccion-titulo { margin: 0 0 1rem; font-size: 1.15rem; }
/* .checklist-items (app.css) trae su propio padding pensado para vivir
   directo dentro de .checklist-seccion (la tarjeta colapsable vieja, ya
   eliminada) -- aca ya esta dentro de .checklist-seccion-paso, que tiene
   su propio padding, asi que sin este reset quedaba doblemente indentado. */
.checklist-seccion-paso .checklist-items { padding: 0; }

/* ---- 4 puntos macro de "entrega por ausencia" (sql/49, pedido explicito
   septiembre 2026: "hoy no queda claro donde termina una seccion y empieza
   la siguiente"). Misma tarjeta blanca/borde/radio que .checklist-seccion-paso
   de arriba -- se siente parte del mismo sistema, en vez de un bloque
   nuevo -- con un circulo de numero propio. ---- */
.checklist-punto-macro {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    padding: 1.1rem;
    margin-bottom: 1rem;
}
.checklist-punto-macro-titulo {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* Circulo numerado amarillo/negro -- se invierte a negro/amarillo (MISMA
   inversion que .toggle-estado.activo) cuando el punto ya tiene foto Y
   descripcion, mostrando un check en vez del numero. Nunca verde: el verde
   de --color-ok queda reservado para el envio ya confirmado (ver el
   comentario de .mensaje-ok mas abajo), no para "seccion completa". */
.checklist-punto-macro-numero {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-amarillo);
    color: var(--color-negro);
    font-weight: 700;
    font-size: 0.95rem;
}
.checklist-punto-macro--completo {
    border-color: var(--color-negro);
    border-width: 2px;
}
.checklist-punto-macro--completo .checklist-punto-macro-numero {
    background: var(--color-negro);
    color: var(--color-amarillo);
}
/* Descripcion de cada punto macro (bug real, septiembre 2026: esta textarea
   NO vivia dentro de .checklist-item-novedad -- la unica que traia estilo
   de textarea en toda la app (ver app.css) -- asi que quedaba con el
   textarea por defecto del navegador, chica y en fuente monoespaciada.
   Altura mayor que la de una observacion de item normal (3rem) a proposito:
   pedido explicito, "describir comodamente el estado de esa parte del
   equipo" es mas texto que la observacion corta de un item puntual. */
.checklist-punto-macro textarea {
    width: 100%;
    font: inherit;
    padding: 0.6rem;
    border: 1px solid var(--color-borde);
    border-radius: 4px;
    resize: vertical;
    min-height: 6rem;
    margin-bottom: 0.75rem;
}
/* Resumen "X de 4 secciones completas" -- mismo look que .checklist-progreso
   (paso X de N del checklist normal), para que se lea como el mismo tipo de
   indicador aunque viva en un contenedor distinto. */
.checklist-punto-macro-progreso {
    text-align: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-negro);
    background: var(--color-fondo-suave);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    margin-bottom: 1rem;
}

.checklist-paso-nav {
    display: flex;
    gap: 0.75rem;
    position: sticky;
    bottom: 0.75rem;
}
/* Mismo bug que .aviso-duplicado/.boton-contador-rechazados ya documentados
   en app.css: una regla de autor con display (aca "flex") pisa el
   display:none del [hidden] del navegador -- si este contenedor alguna vez
   se oculta con hidden, necesita este override. Defensivo: hoy no se oculta
   con hidden (se controla mostrando/ocultando sus padres), pero se deja
   para no repetir ese mismo bug si el markup cambia mas adelante. */
.checklist-paso-nav[hidden] { display: none; }
.checklist-paso-nav .boton { flex: 1; margin-top: 0; }

/* Boton "Atras": mismo alto que el de avance, pero mas angosto y secundario
   -- el de avance (amarillo) tiene que ser el que mas llama la atencion. */
.checklist-paso-nav [data-accion="paso-atras"] { flex: 0 0 auto; min-width: 96px; }

/* ---- Avisos Si/No y de mantenimiento: botones de confirmacion tambien
   amarillo/negro, en la mitad inferior por como ya estan posicionados
   (overlay centrado). ---- */
.aviso-duplicado-boton { min-height: 48px; font-size: 1.125rem; }
#checklist-aviso-duplicado-si { background: var(--color-amarillo); color: var(--color-negro); }
#checklist-aviso-duplicado-no { background: var(--color-blanco); color: var(--color-negro); border: 2px solid var(--color-negro); }

/* ---- Mensajes: "pendiente" queda neutro (informativo, no es un exito
   todavia) -- el verde reservado se aplica SOLO con .mensaje-exito-confirmado,
   agregada por operador-panel.js unicamente cuando el envio ya se confirmo
   de verdad (ver mostrarMensaje()). ---- */
.mensaje-ok {
    background: var(--color-blanco);
    color: var(--color-negro);
    border: 1px solid var(--color-borde);
}
.mensaje-exito-confirmado {
    background: #e8f5e9;
    color: var(--color-exito);
    border: 1px solid var(--color-exito);
    font-weight: 600;
}

/* ---- Aviso de mantenimiento: el "vencido" ya hereda --color-error
   (remapeado arriba a --color-critico) via app.css; solo se refuerza el
   tamaño de letra, ya grande desde el fix anterior. ---- */
.aviso-mantenimiento { font-size: 0.95rem; }