/* =====================================================================
   Winkua ERP — hoja de estilos base
   Dirección visual elegida: "Claro moderno" (Opción A del canvas de diseño)
   ===================================================================== */

:root {
    --color-acento: #0B6E63; /* se sobreescribe por PHP (variable inline, App\Core\Colores) según el tema activo: verde en claro, naranja en oscuro. Ya no es configurable por taller, es fijo por tema. */
    --color-acento-texto: var(--color-acento); /* color de acento para TEXTO/enlaces — con los dos colores fijos actuales coincide siempre con --color-acento (ver App\Core\Colores::textoAcento) */
    --color-fondo: #F7F8FB;
    --color-texto: #14151A;
    --color-texto-secundario: #8A8F9C;
    --color-borde: #ECEEF3;
    --color-blanco: #FFFFFF;

    /* Identidad de Winkua (el producto en sí, igual para todos los talleres —
       se usa solo en el "chrome" de la aplicación: el menú lateral y su logo.
       El --color-acento de arriba es el color del CONTENIDO del ERP, fijo
       según el tema claro/oscuro (ver App\Core\Colores), no del menú. */
    --winkua-negro: #000000;
    --winkua-cian: #66FCF1;
    --winkua-petroleo: #005953;      /* mismo fondo que lleva ya el logotipo exportado */
    --winkua-petroleo-suave: #0A716A; /* hover sobre el menú lateral */
}

/* Tema oscuro del CONTENIDO (alternador "Modo oscuro" del menú lateral,
   ver tema_alternar.php). El menú lateral en sí no cambia — mantiene
   siempre los colores de Winkua, tema aparte. Se activa con el atributo
   data-tema="oscuro" en <html> (ver layout_header.php). */
[data-tema="oscuro"] {
    --color-acento: #D97706;
    --color-acento-texto: #D97706;
    --color-fondo: #0A0F0D;
    --color-texto: #EDF2F1;
    --color-texto-secundario: #93A5A0;
    --color-borde: #33504A;
    --color-blanco: #121917; /* "superficie": tarjetas, inputs, modales... ya no es blanco puro, pero se mantiene el mismo nombre de variable para no tener que tocar cada pantalla */
}
/* Las insignias de estado (badge/badge-estado) se definen por todo el ERP
   como un color sólido + un fondo del mismo color muy suavizado (10-15% de
   opacidad) — pensado para fondo claro. Sobre el nuevo fondo oscuro esa
   combinación se ve apagada, así que se aclaran de una sola vez aquí en vez
   de tener que revisar el color de cada estado, uno a uno, en cada pantalla. */
[data-tema="oscuro"] .badge,
[data-tema="oscuro"] .badge-estado {
    filter: brightness(1.75) saturate(1.05);
}

/* Ese filtro no basta para las insignias que se escribieron con un fondo
   CASI BLANCO fijo a mano (#EAFBF1, #FDECEC, #F3F4FA, #FFF6E5, #EEF0FF) —
   por ejemplo "Activo", "Por defecto", "Caja abierta", "Sí/No" en
   Reparaciones, "Defecto" en Configuración... Al ya partir de un fondo casi
   blanco, el brillo(1.75) lo satura a blanco puro y aclara el texto casi
   al mismo ritmo, así que el contraste se hunde (se queda casi invisible,
   como reportó Miguel). Para esas combinaciones concretas se fijan aquí
   colores propios de oscuro (fondo oscuro + texto claro del mismo color),
   en vez de aplicar el filtro — el selector busca el color de fondo tal
   cual aparece en el `style=""` de cada insignia, así no hace falta tocar
   los ~10 archivos que la usan. */
[data-tema="oscuro"] .badge[style*="#EAFBF1"],
[data-tema="oscuro"] .badge-estado[style*="#EAFBF1"] {
    background: #132D22 !important;
    color: #4ADE80 !important;
    filter: none !important;
}
[data-tema="oscuro"] .badge[style*="#FDECEC"],
[data-tema="oscuro"] .badge-estado[style*="#FDECEC"] {
    background: #2D1515 !important;
    color: #F87171 !important;
    filter: none !important;
}
[data-tema="oscuro"] .badge[style*="#F3F4FA"],
[data-tema="oscuro"] .badge-estado[style*="#F3F4FA"] {
    background: #1E2624 !important;
    color: #93A5A0 !important;
    filter: none !important;
}
[data-tema="oscuro"] .badge[style*="#FFF6E5"],
[data-tema="oscuro"] .badge-estado[style*="#FFF6E5"] {
    background: #2E2410 !important;
    color: #FBBF24 !important;
    filter: none !important;
}
[data-tema="oscuro"] .badge[style*="#EEF0FF"],
[data-tema="oscuro"] .badge-estado[style*="#EEF0FF"] {
    background: #2E2410 !important;
    color: #FBBF24 !important;
    filter: none !important;
}

/* ---------------------------------------------------------------------
   Cajón de sastre para el tema oscuro: elementos escritos ANTES de que
   existiera el modo oscuro, con un fondo claro puesto a mano (#fff,
   #F3F4FA, #FAFAFC...) y sin `color` propio — el texto de dentro heredaba
   el color oscuro de toda la vida y quedaba bien, pero ahora hereda
   `--color-texto` y en oscuro eso es casi blanco: texto claro sobre fondo
   claro, invisible. Esta regla tiene más especificidad que la del propio
   fichero (por el atributo [data-tema="oscuro"]) así que gana siempre,
   sin tener que tocar los ~15 archivos que repiten cada una de estas
   clases (modales, botones secundarios, tablas...). Si aparece una
   pantalla nueva con el mismo problema, el arreglo va aquí, no en la
   pantalla.
   --------------------------------------------------------------------- */

/* Modales / tarjetas emergentes (`.modal-caja`, en un montón de páginas).
   En oscuro, el fondo de la página detrás también es oscuro, así que sin
   nada que los separe el globo se confunde con la pantalla (aviso de
   Miguel: "al ser los dos fondos negros no se diferencia") — se añade un
   borde claro y una sombra más marcada para que se note dónde empieza el
   modal. */
[data-tema="oscuro"] .modal-caja {
    background: var(--color-blanco);
    border: 1px solid var(--color-texto-secundario);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}

/* Botón secundario (borde, sin relleno) y su estado al pasar el ratón. */
[data-tema="oscuro"] .boton-secundario {
    background: var(--color-blanco);
    color: var(--color-texto);
    border-color: var(--color-borde);
}
[data-tema="oscuro"] .boton-secundario:hover,
[data-tema="oscuro"] .boton-secundario:disabled:hover {
    background: var(--color-borde);
}

/* Botón de peligro (cancelar/borrar) — el rojo de siempre no se lee bien
   sobre el fondo oscuro (2.7:1), se usa un rojo más claro solo aquí. */
[data-tema="oscuro"] .boton-peligro {
    background: var(--color-blanco);
    color: #F87171;
    border-color: #5C2A28;
}
[data-tema="oscuro"] .boton-peligro:hover {
    background: var(--color-borde);
}

/* Filas de tabla al pasar el ratón por encima. */
[data-tema="oscuro"] .tabla-simple tr:hover td {
    background: var(--color-borde);
}

/* Desplegables de autocompletar (buscador de cliente/artículo...). */
[data-tema="oscuro"] .lista-resultados {
    background: var(--color-blanco);
    border-color: var(--color-borde);
}
[data-tema="oscuro"] .lista-resultados div:hover,
[data-tema="oscuro"] .buscador-cliente-nuevo .cliente-elegido {
    background: var(--color-borde);
}

/* Chips/etiquetas sueltas (daños, catálogos...) en Configuración. */
[data-tema="oscuro"] .chip-etiqueta {
    background: var(--color-borde);
}

/* KPI del TPV. */
[data-tema="oscuro"] .tpv-kpi {
    background: var(--color-blanco);
}

/* Selectores de periodo tipo "segmentos" (dashboard, descuento del TPV):
   el fondo del track y el de la opción activa estaban fijos en gris/blanco
   claro; la opción activa ya usaba `var(--color-texto)` para el texto, así
   que en oscuro se quedaba con letras casi blancas sobre fondo también
   casi blanco. */
[data-tema="oscuro"] .selector-periodo,
[data-tema="oscuro"] .selector-modo-descuento {
    background: var(--color-borde);
}
[data-tema="oscuro"] .selector-periodo button.activo,
[data-tema="oscuro"] .selector-modo-descuento button.activo {
    background: var(--color-blanco);
}

/* Campo de subir archivo. */
[data-tema="oscuro"] input[type=file] {
    background: var(--color-blanco);
}
[data-tema="oscuro"] input[type=file]::file-selector-button,
[data-tema="oscuro"] input[type=file]::-webkit-file-upload-button {
    background: var(--color-borde);
}

/* Casilla sin marcar (marcada ya usa var(--color-acento), eso ya estaba bien). */
[data-tema="oscuro"] input[type=checkbox] {
    background: var(--color-blanco);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Work Sans', system-ui, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .fuente-titulo {
    font-family: 'Sora', sans-serif;
}

a {
    color: var(--color-acento-texto);
    text-decoration: none;
}
a:hover { opacity: .75; }

/* ---------- Layout general (sidebar + contenido) ---------- */

.app-layout {
    display: flex;
    height: 100vh;
}

/* El menú de la izquierda se queda fijo en su sitio (con scroll propio solo
   si algún día no cabe entero) y es el contenido de la derecha (.contenido)
   el que hace scroll de forma independiente — así, aunque una pantalla sea
   muy larga, siempre se ven abajo del todo WhatsApp, Mi perfil, etc. */
.sidebar {
    display: flex;
    flex-direction: column;
    width: 236px;
    flex-shrink: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    top: 0;
    background: var(--winkua-petroleo);
    padding: 22px 14px;
    transition: width .15s ease;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 6px 26px 6px;
}
.sidebar-logo img {
    display: block;
    width: 100%;
    max-width: 172px;
    height: auto;
}
/* Logo propio del taller subido como PNG/JPG (con fondo blanco de fábrica):
   se enmarca en una tarjeta blanca redondeada a propósito, en vez de dejar
   el cuadrado blanco suelto sobre el verde -- un SVG con fondo transparente
   no necesita esto y no lleva esta clase. */
.sidebar-logo img.sidebar-logo-tarjeta {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    box-sizing: border-box;
}

/* ---------- Banner "conectado como cliente" (superadmin impersonando un
   taller, petición de Miguel 29/09/2026) ----------
   Fijo por encima de TODO (incluso del sidebar y la barra global). El
   resto del layout se desplaza hacia abajo solo cuando está presente,
   mediante la clase .con-banner-impersonacion en .app-layout -- así el
   caso normal (sin banner, el 99% del tiempo) no cambia en nada. */
.banner-impersonacion {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 600;
    height: 40px;
    background: #B3261E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 13px;
    font-weight: 600;
}
.banner-impersonacion-salir {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 8px;
    padding: 4px 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.banner-impersonacion-salir:hover { background: rgba(255,255,255,.28); }

.app-layout.con-banner-impersonacion { box-sizing: border-box; padding-top: 40px; }
.app-layout.con-banner-impersonacion .sidebar { height: calc(100vh - 40px); }
.app-layout.con-banner-impersonacion .contenido { height: calc(100vh - 40px); }
.app-layout.con-banner-impersonacion .topbar-global-fija { top: 40px; }

/* Botón para contraer/expandir el menú lateral (petición de Miguel,
   29/09/2026) -- deja solo los iconos visibles, con el nombre como
   tooltip nativo (atributo title en cada .navitem). El estado se
   recuerda por navegador (localStorage), ver el <script> junto al
   propio botón más abajo. */
.sidebar-colapsar-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sidebar-colapsar-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar-colapsar-btn svg { transition: transform .15s ease; }

.app-layout.sidebar-colapsado .sidebar { width: 64px; }
.app-layout.sidebar-colapsado .sidebar-logo { justify-content: center; padding: 2px 0 26px 0; }
.app-layout.sidebar-colapsado .sidebar-logo img { display: none; }
.app-layout.sidebar-colapsado .sidebar-colapsar-btn svg { transform: rotate(180deg); }
.app-layout.sidebar-colapsado .navitem { justify-content: center; padding: 10px; gap: 0; }
.app-layout.sidebar-colapsado .navitem span { display: none; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-grow: 1;
}

.navitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,.74);
    cursor: pointer;
}
.navitem:hover { background: rgba(255,255,255,.08); color: #fff; }
.navitem.activo {
    background: rgba(102,252,241,.14);
    color: var(--winkua-cian);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--winkua-cian);
}
.navitem svg { flex-shrink: 0; }

.sidebar-utilidades {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(255,255,255,.14);
    padding-top: 12px;
}

/* ---------- Contenido principal ---------- */

.contenido {
    flex-grow: 1;
    padding: 30px 36px;
    max-width: 100%;
    height: 100vh;
    overflow-y: auto;
}

/* ---------- Cabecera fija global (todas las páginas menos Configuración) ---------- */
/* Mismo patrón que .config-cabecera-fija/.config-cabecera-hueco de
   configuracion.php (23/09/2026): position:fixed + un hueco invisible del
   mismo alto en el sitio original, en vez de position:sticky -- con
   sticky, Chrome dejaba residuos pintados de la fila de encima al
   engancharse arriba (fallo de repintado ya documentado allí) y además el
   contenido de cada página quedaba pegado/cortado justo debajo. */

.topbar-global-fija {
    position: fixed;
    top: 0;
    left: 236px; /* ancho de .sidebar */
    right: 0;
    z-index: 450;
    background: var(--color-fondo);
    padding: 30px 36px 18px 36px; /* padding-top igual al de .contenido; la barra en sí se queda compacta -- el aire de más para separar el contenido de abajo va en el "hueco", no aquí (ver .topbar-global-hueco) */
    border-bottom: 1px solid var(--color-borde);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    transition: left .15s ease;
}
.app-layout.sidebar-colapsado .topbar-global-fija { left: 64px; }

.topbar-global-hueco {
    visibility: hidden;
    /* el padding-top y los laterales ya los da el padding normal de
       .contenido (30px 36px) -- a la versión fija solo le falta aquí este
       padding-bottom extra, que es suyo y este hueco no lo tenía. */
    padding-bottom: 42px; /* más alto que el padding-bottom real de la barra (18px) A PROPÓSITO: esos ~24px de más son el aire que separa la barra fija del contenido de cada página, sin hacer la barra en sí más grande */
    border-bottom: 1px solid transparent;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.topbar-global-controles {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.topbar-global-tienda select {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    font-family: inherit;
    font-size: 13px;
    background: var(--color-fondo);
    color: var(--color-texto);
}

/* ---------- Botón de cuenta (dentro de la cabecera fija global) ---------- */
/* Sustituye a "Contactar con soporte" y "Mi perfil" del menú lateral, que
   ahora viven aquí dentro (petición de Miguel, 29/09/2026). */

.topbar-cuenta {
    position: relative;
    flex-shrink: 0;
}

.topbar-cuenta-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-acento);
    color: #fff;
    border: 2px solid var(--color-fondo);
    box-shadow: 0 1px 6px rgba(0,0,0,.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    padding: 0;
}
.topbar-cuenta-btn:hover { opacity: .88; }

.topbar-cuenta-menu {
    display: none;
    position: absolute;
    top: 52px;
    right: 0;
    width: 260px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    padding: 8px;
}
.topbar-cuenta.abierto .topbar-cuenta-menu { display: block; }

.topbar-cuenta-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 14px 8px;
    border-bottom: 1px solid var(--color-borde);
    margin-bottom: 6px;
}
.topbar-cuenta-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-acento);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.topbar-cuenta-nombre { font-size: 14px; font-weight: 700; line-height: 1.3; }
.topbar-cuenta-usuario { font-size: 12px; color: var(--color-texto-secundario); line-height: 1.3; }

.topbar-cuenta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-texto);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.topbar-cuenta-item:hover { background: var(--color-borde); opacity: 1; }
.topbar-cuenta-item svg { flex-shrink: 0; }

.topbar-cuenta-separador {
    height: 1px;
    background: var(--color-borde);
    margin: 6px 4px;
}

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

.boton-asistente-ia {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-texto);
    color: var(--color-fondo); /* inverso de --color-texto: al cambiar de tema, el botón se invierte entero (fondo oscuro+letra clara <-> fondo claro+letra oscura) y siempre contrasta, en vez de un blanco fijo que se volvía invisible en oscuro */
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.kpis {
    display: flex;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.kpi {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    flex: 1 1 200px;
}
.kpi .etiqueta {
    font-size: 13px;
    color: var(--color-texto-secundario);
    margin-bottom: 8px;
}
.kpi .valor {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
}
.kpi-enlace {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s;
}
.kpi-enlace:hover {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}

.tarjeta {
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    padding: 8px 0;
}
.tarjeta-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
}
.tarjeta-cabecera .titulo {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

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

.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-fondo);
}
.tarjeta-login {
    width: 100%;
    max-width: 380px;
    background: var(--color-blanco);
    border: 1px solid var(--color-borde);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    padding: 32px;
}
.tarjeta-login .campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.tarjeta-login label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-texto-secundario);
}
.tarjeta-login input {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    font-size: 14px;
    font-family: inherit;
}
.tarjeta-login input:focus {
    outline: none;
    border-color: var(--color-acento);
}
.boton-primario {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: var(--color-acento);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.boton-primario:hover { opacity: .9; }

/* Botón secundario (borde, sin relleno) — estilo base que faltaba aquí (solo
   existía la variante de tema oscuro más abajo, así que en páginas que no
   definen su propia copia local, como elige_tienda.php, se veía como un
   botón nativo del navegador sin redondear). Mismo radio de 10px que
   .boton-primario para que todo el ERP luzca consistente. */
.boton-secundario {
    padding: 11px;
    border-radius: 10px;
    border: 1px solid var(--color-borde);
    background: var(--color-blanco);
    color: var(--color-texto);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.boton-secundario:hover { background: var(--color-fondo); }
.boton-secundario:disabled { opacity: .5; cursor: not-allowed; }
.mensaje-error {
    background: #FDEDED;
    color: #B3261E;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* Selector de archivo (input type=file): el botón nativo del navegador es
   cuadrado y anticuado — se sustituye por el mismo look redondeado que el
   resto de campos del ERP (bordes, radios y colores iguales a los inputs de
   texto/fecha). Se define aquí, en la hoja global, para que se aplique en
   todo el ERP de una sola vez (facturas, gastos, artículos, reparaciones,
   servicios...) sin tener que repetirlo pantalla a pantalla. */
input[type=file] {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-texto-secundario);
    padding: 8px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-texto);
    padding: 7px 14px;
    margin-right: 12px;
    border: none;
    border-radius: 8px;
    background: #F3F4FA;
    cursor: pointer;
    transition: background .15s;
}
input[type=file]:hover::file-selector-button,
input[type=file]:hover::-webkit-file-upload-button {
    background: var(--color-borde);
}
input[type=file]:focus {
    outline: none;
    border-color: var(--color-acento);
}

/* Checkbox ("Por defecto", "Es efectivo", seleccionar filas...): el
   cuadradito nativo del navegador es cuadrado y anticuado — se sustituye
   por uno redondeado a juego con el resto del ERP. Igual que el selector de
   archivo de arriba, se define aquí, en la hoja global, para que se
   aplique en todo el ERP de una sola vez (Configuración, listados con
   selección múltiple, formularios...) sin tener que repetirlo pantalla a
   pantalla. */
input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    top: -1px;
    margin: 0 4px 0 0;
    border: 1.5px solid var(--color-borde);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
input[type=checkbox]:hover {
    border-color: var(--color-acento);
}
input[type=checkbox]:checked {
    background: var(--color-acento);
    border-color: var(--color-acento);
}
input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type=checkbox]:focus {
    outline: none;
    border-color: var(--color-acento);
}
input[type=checkbox]:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- Botón de menú móvil + fondo del cajón (ver media query de
   responsive más abajo) -- ocultos por defecto, solo se muestran por
   debajo de 900px. ---------- */
.btn-menu-movil {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 720;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--winkua-petroleo);
    color: #fff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
}
.app-layout.con-banner-impersonacion .btn-menu-movil { top: 54px; }
.sidebar-movil-fondo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 13, .45);
    z-index: 690;
}



/* =====================================================================
   Responsive -- móvil y tablet en vertical (petición de Miguel,
   30/09/2026): "se puede hacer responsive para que el cliente lo pueda
   ver en el móvil o la tablet... que en la versión de escritorio no se
   rompa". Por debajo de 900px el menú lateral deja de ir fijo al lado
   del contenido y pasa a ser un cajón que se abre con el botón de
   hamburguesa (arriba a la izquierda, ver .btn-menu-movil) y se cierra
   pulsando fuera de él o en cualquier opción del menú (ver el <script>
   junto al propio botón en layout_header.php). Todo lo de aquí abajo
   vive dentro de esta media query -- la versión de escritorio (por
   encima de 900px) no se toca en nada.
   ===================================================================== */
@media (max-width: 900px) {
  /* El selector "body .sidebar" (en vez de solo ".sidebar") le da algo
     más de especificidad a propósito, para ganar siempre sin necesidad
     de !important -- por ejemplo a estilos locales de alguna pantalla
     que pudieran repetir la misma clase. */
  body .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 700;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, .28);
  }
  .app-layout.con-banner-impersonacion .sidebar {
    top: 40px;
    height: calc(100vh - 40px);
  }
  .app-layout.sidebar-movil-abierto .sidebar { transform: translateX(0); }
  .app-layout.sidebar-movil-abierto .sidebar-movil-fondo { display: block; }

  /* El botón de contraer a solo-iconos está pensado para el escritorio
     -- en el cajón móvil se oculta y el menú se ve siempre completo
     (con texto), tanto si el taller lo tenía contraído en su sesión de
     escritorio como si no (ver assets/css/app.css, reglas de
     .sidebar-colapsado más arriba). */
  .sidebar-colapsar-btn { display: none; }
  .app-layout.sidebar-colapsado .sidebar { width: 236px; }
  .app-layout.sidebar-colapsado .sidebar-logo { justify-content: space-between; padding: 2px 6px 26px 6px; }
  .app-layout.sidebar-colapsado .sidebar-logo img { display: block; }
  .app-layout.sidebar-colapsado .navitem { justify-content: flex-start; padding: 10px 14px; gap: 12px; }
  .app-layout.sidebar-colapsado .navitem span { display: inline; }

  .btn-menu-movil { display: flex; }

  /* Menos aire lateral y hueco arriba para el botón de menú -- mismo
     ancho de sobra que necesitaba antes el sidebar fijo (236px), ya no
     hace falta al ser ahora un cajón que se abre encima de todo. */
  body .contenido { padding: 68px 16px 24px 16px; }

  body .topbar-global-fija,
  .app-layout.sidebar-colapsado body .topbar-global-fija {
    left: 0;
    padding: 68px 16px 16px 16px;
  }

  /* Cabecera fija propia de Configuración (configuracion.php) -- mismo
     ajuste que la cabecera global de arriba. */
  body .config-cabecera-fija,
  .app-layout.sidebar-colapsado body .config-cabecera-fija {
    left: 0;
    padding: 68px 16px 16px 16px;
  }

  /* Pestañas de Configuración/Compras/TPV/etc. (".tabs-config", definida
     suelta en cada pantalla): en vez de partirse en varias filas, se
     deslizan en horizontal -- se nota que hay más pestañas sin que se
     amontonen. */
  .tabs-config { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabs-config a { flex-shrink: 0; }
}

/* Pantallas muy estrechas (móviles de gama de entrada, ~360px o menos):
   los botones de la cabecera (tema, asistente IA, pantalla completa) se
   quedan solo con el icono para que quepan sin amontonarse contra el
   avatar de la cuenta. */
@media (max-width: 480px) {
  .boton-asistente-ia span,
  #boton-tema span {
    display: none;
  }
  .boton-asistente-ia,
  #boton-tema {
    padding: 10px;
  }
}