/* ========================================================================== Centinela 360 - Hoja de estilos propia (sin frameworks / sin Bootstrap) ========================================================================== */ /* ========================================================================== Rediseno "Centinela Aurora" (vidrio esmerilado + tablero bento). Los NOMBRES de variable existentes se conservan a proposito: todas las reglas de mas abajo ya consumian estos tokens, asi que retemizar aqui basta para actualizar las 53 vistas sin tocar cada archivo. Se agregan tokens nuevos (--grad, --color-teal-deep, --glass-*, --color-heading, --radius-lg, --shadow-glass, --font-display) para los componentes nuevos (capsula flotante, tarjetas bento, tipografia). Solo fuentes de sistema: sin Google Fonts ni ningun otro CDN (correccion pre- despliegue, ver comentario de --font/--font-display mas abajo). --color-heading existe aparte de --color-navy porque --color-navy se sigue usando como FONDO fijo (topbar, nav, boton primario) en ambos temas -es el "cromo" oscuro de la marca, no cambia con el tema-, mientras que --color-heading es el texto de titulos sobre tarjetas y SI debe invertirse en modo oscuro (si no, un titulo navy quedaria invisible sobre una tarjeta oscura). */ :root { /* Alto de la barra de navegacion inferior movil, sin contar la safe-area. Un solo lugar que declara este numero: lo consumen .app-bottom-nav (min-height) y el padding-bottom de .app-main, para que no puedan quedar desincronizados y volver a tapar el ultimo item de una lista. Ver PROBLEMA 1 en el bloque @media 640px. */ --app-bottom-nav-h: 64px; --color-navy: #0b2a4a; --color-navy-dark: #081f38; /* ACENTO AZUL (antes turquesa #17a9c4). Los NOMBRES --color-teal* se conservan a proposito: 43 reglas de este archivo ya los consumen, y el modulo de Roles que se esta construyendo en paralelo tambien. Renombrarlos obligaria a tocar archivos de otra tarea. Cambia el valor, no el nombre. Un solo tono no sirve para los tres papeles del acento, porque el minimo de 4.5:1 tira en direcciones opuestas segun lo que va encima o debajo. De ahi los tres tokens (mismo criterio que ya justificaba --color-teal-deep): --color-teal bordes, iconos, foco, texto GRANDE, rellenos sin texto encima. 4.09:1 sobre blanco: basta para bordes/iconos (>=3:1) y texto grande, NO para texto de tamano normal. --color-teal-text texto de tamano normal sobre superficie clara. 5.93:1 sobre blanco. --color-teal-deep rellenos con texto BLANCO encima. 7.56:1. --color-teal-chrome acento sobre el cromo navy fijo (chip de nav activo, marca del topbar), donde el texto que va encima es --color-navy-dark. 7.76:1. Fijo en ambos temas, igual que --color-navy, porque el cromo no cambia con el tema. */ --color-teal: #0284c7; --color-teal-text: #0369a1; --color-teal-deep: #075985; --color-teal-chrome: #38bdf8; --color-bg: #eef2f6; --color-surface: #ffffff; --color-border: #dde4ea; --color-text: #10141c; --color-text-muted: #5b6472; --color-heading: var(--color-navy); --color-danger: #c0392b; --color-danger-bg: #fdecea; /* Mismo caso que --color-warning: venia en 3.72:1 sobre su propio fondo tenue y 4.14:1 sobre blanco. Ajuste minimo a 4.80:1 y 5.35:1. */ --color-success: #177a4c; --color-success-bg: #e8f6ee; /* Oscurecido desde #b06d0f (auditoria de contraste de esta rama): sobre --color-warning-bg daba 3.73:1 y sobre superficie blanca 4.17:1, ambos bajo 4.5:1. Este es el ajuste MINIMO que cumple en los dos fondos (4.68:1 y 5.23:1) sin saturar el tono. Falla preexistente, no introducida por el cambio de acento a azul. */ --color-warning: #9a5f0c; --color-warning-bg: #fdf1de; --radius: 16px; --radius-lg: 22px; --shadow: 0 16px 36px -20px rgba(11, 42, 74, 0.22); --shadow-glass: 0 20px 45px -22px rgba(10, 15, 25, 0.35); --grad: linear-gradient(135deg, var(--color-teal-deep), var(--color-navy)); /* Degradado del boton dominante de la pantalla del guardia ("Escanear documento"). En la maqueta aprobada este degradado es celeste (#38bdf8 -> #0ea5e9) con texto casi blanco encima; en modo CLARO eso da 4.09:1 y 2.77:1, bajo el minimo de 4.5:1. Ese boton lo toca un guardia de pie, al sol, en una reja: la legibilidad ahi no es estetica. Por eso en claro se profundiza a #075985 -> #0369a1 (7.56:1 y 5.93:1 con blanco) y en OSCURO se respeta la maqueta tal cual, porque ahi si cumple (7.12:1 y 5.51:1 con el texto #04283d de la propia maqueta). Unico punto donde la implementacion se aparta del concepto, y solo en un tema. */ --grad-escanear: linear-gradient(150deg, #075985, #0369a1); --color-escanear-texto: #ffffff; --glass-bg: rgba(255, 255, 255, 0.68); --glass-border: rgba(15, 20, 30, 0.08); /* Solo tipografias de sistema (sin Google Fonts ni ningun otro CDN: la app es una PWA offline-first y esto era la unica dependencia de red externa del proyecto). --font-display usa la palabra clave generica "ui-rounded" primero -Safari/iOS la resuelve a la variante redondeada del font de sistema (SF Pro Rounded)-, y cae al mismo stack robusto que --font en cualquier otro navegador; la distincion visual entre titulares y texto de interfaz queda dada por peso/tracking, no por una familia tipografica distinta. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-display: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* Monoespaciada de SISTEMA (sin Google Fonts, mismo criterio que --font/--font-display de arriba) para cifras tipo "lectura de instrumento" en el tablero del Inicio -- mismo rol que cumplia IBM Plex Mono en la referencia visual aprobada, sin la dependencia externa que la app ya no usa. */ --font-mono-sys: ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", monospace; } /* ========================================================================== MODO OSCURO -- dos puertas de entrada, una sola paleta ========================================================================== La app sigue siendo CLARA por defecto (:root de arriba). El oscuro se activa por dos caminos: 1. Preferencia del sistema, como siempre -> @media de abajo 2. Eleccion manual del usuario en "Mas" -> [data-theme] La eleccion manual GANA sobre el sistema. Por eso el @media excluye :root[data-theme="light"]: si el usuario pidio claro expresamente, un telefono en modo noche no puede contradecirlo. Los dos bloques declaran los MISMOS valores a proposito -no hay forma de compartir un bloque entre dentro y fuera de un @media sin recurrir a trucos ilegibles-. SI CAMBIAS UN VALOR ACA, CAMBIALO EN LOS DOS. --color-navy/--color-navy-dark NO se redefinen: siguen siendo el cromo oscuro fijo de topbar/nav/boton primario en ambos temas, y por el mismo motivo tampoco cambia --color-teal-chrome. -------------------------------------------------------------------- */ /* Puerta 1: preferencia del sistema, salvo que el usuario haya forzado claro */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #05070b; --color-surface: #101f30; --color-border: #223b52; --color-text: #eef2f5; --color-text-muted: #93a9ba; --color-heading: #eaf4f8; --color-teal: #38bdf8; --color-teal-text: #38bdf8; --color-danger: #ff5f72; --color-danger-bg: #2c0f14; --color-success: #35d18e; --color-success-bg: #0c2a1d; --color-warning: #eeae4f; --color-warning-bg: #2c2007; --shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.6); --shadow-glass: 0 24px 55px -20px rgba(0, 0, 0, 0.75); --glass-bg: rgba(255, 255, 255, 0.055); --glass-border: rgba(255, 255, 255, 0.1); --grad-escanear: linear-gradient(150deg, #38bdf8, #0ea5e9); --color-escanear-texto: #04283d; } } /* Puerta 2: eleccion manual del usuario (gana sobre el sistema) */ :root[data-theme="dark"] { --color-bg: #05070b; --color-surface: #101f30; --color-border: #223b52; --color-text: #eef2f5; --color-text-muted: #93a9ba; --color-heading: #eaf4f8; --color-teal: #38bdf8; --color-teal-text: #38bdf8; --color-danger: #ff5f72; --color-danger-bg: #2c0f14; --color-success: #35d18e; --color-success-bg: #0c2a1d; --color-warning: #eeae4f; --color-warning-bg: #2c2007; --shadow: 0 20px 45px -18px rgba(0, 0, 0, 0.6); --shadow-glass: 0 24px 55px -20px rgba(0, 0, 0, 0.75); --glass-bg: rgba(255, 255, 255, 0.055); --glass-border: rgba(255, 255, 255, 0.1); --grad-escanear: linear-gradient(150deg, #38bdf8, #0ea5e9); --color-escanear-texto: #04283d; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* CORRECCION MOVIL iPhone (barra inferior y encabezado que desaparecian al hacer scroll): el recorte horizontal que antes vivia en .app-shell se sube aqui, al elemento raiz. Motivo real (no preferencia de estilo): por especificacion CSS, cuando overflow-x vale "hidden" y overflow-y vale "visible", el eje declarado "visible" se COMPUTA como "auto" -- .app-shell se convertia en su propio contenedor de scroll con scrollHeight == clientHeight, y cualquier "position: sticky" en su interior perdia todo rango de desplazamiento, es decir se comportaba como estatico y se iba con el scroll. En ese mismo par de valores es inofensivo: el scrollport del elemento raiz ES el viewport, asi que sticky/fixed siguen funcionando y se conserva el recorte horizontal de siempre (manchas ambientales, tablas anchas). */ html { overflow-x: hidden; } body { font-family: var(--font); background: var(--color-bg); color: var(--color-text); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--color-teal-text); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-heading); letter-spacing: -0.01em; margin: 0 0 12px; } p { margin: 0 0 12px; } /* ---------- Layout general (autenticado) ---------- */ .app-shell { position: relative; min-height: 100vh; display: flex; flex-direction: column; /* CORRECCION MOVIL iPhone: aqui NO se declara ningun overflow. El intento anterior ("overflow-x: hidden" + "overflow-y: visible" a proposito) no evitaba el problema que describia su propio comentario: declarar "visible" explicitamente no cambia nada, porque la computacion a "auto" la hace la especificacion sobre el valor declarado. El resultado era que .app-shell si era un contenedor de scroll y el sticky del nav inferior no se pegaba nunca. El recorte horizontal se movio a la regla "html" de mas arriba, donde es seguro. */ } /* Manchas ambientales fijas detras del contenido (no se desplazan con el scroll ni interfieren con clics): mismo recurso que .ambient-blob del shell de invitado, pero mas tenues para no competir con tablas densas. */ .app-ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .app-ambient .ambient-blob { opacity: 0.16; } .app-ambient .ambient-blob--a { top: -140px; left: -100px; } .app-ambient .ambient-blob--b { top: 40vh; right: -140px; } .app-topbar { position: relative; z-index: 1; background: var(--color-navy); color: #fff; /* Correccion calidad demo: el meta viewport ya declara "viewport-fit=cover" (necesario para que env(safe-area-inset-*) tenga algun valor no-cero), pero el encabezado nunca lo usaba -- en un telefono con notch/isla dinamica ejecutando la PWA a pantalla completa, "CENTINELA360" y el avatar quedaban parcialmente tapados por la barra de estado del sistema. Se SUMA al padding de siempre (nunca se reemplaza): en un navegador normal env() vale 0 y el padding queda identico al de antes. */ padding: calc(14px + env(safe-area-inset-top, 0px)) 24px 14px; } /* Fila brand + user-box. En escritorio es el unico contenido del encabezado (mismo layout que antes, solo un nivel mas anidado para poder agregar el subtitulo movil de rol/seccion debajo sin tocar esta fila). */ .app-topbar-row { display: flex; align-items: center; justify-content: space-between; } .app-topbar .brand { font-weight: 700; font-size: 18px; letter-spacing: 0.5px; } .app-topbar .brand span { color: var(--color-teal-chrome); } .app-topbar .user-box { display: flex; align-items: center; gap: 14px; font-size: 14px; } .app-topbar form { margin: 0; } /* Envoltorio del nombre+boton "Cerrar sesion" de escritorio: mismo layout en fila que tenian antes como hijos directos de .user-box (ver regla de arriba), solo que ahora anidados un nivel para poder ocultarlos como bloque en movil (ver Responsive) sin tocar su apariencia en escritorio. */ .app-user-desktop { display: flex; align-items: center; gap: 14px; } /* Avatar y subtitulo (rol . seccion) del encabezado compacto movil: ocultos por defecto (escritorio no cambia). Se muestran solo dentro de @media (max-width: 640px), ver Responsive. */ .app-avatar { display: none; } .app-topbar-subtitle { display: none; } .btn-link { background: none; border: 1px solid rgba(255, 255, 255, 0.35); color: #fff; padding: 6px 14px; border-radius: var(--radius); cursor: pointer; font-size: 13px; } .btn-link:hover { background: rgba(255, 255, 255, 0.1); } .app-main { flex: 1; padding: 32px 24px; max-width: 1100px; width: 100%; margin: 0 auto; } /* ---------- Tarjetas / Cards ---------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 26px; transition: box-shadow 180ms ease, transform 180ms ease; } /* ---------- Layout invitado (login / recuperar contraseña) ---------- */ .guest-shell { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-dark) 55%, #06172b 100%); padding: 24px; overflow: hidden; } /* Manchas de degradado suaves detras de la tarjeta de vidrio: mismo recurso ambiental que .app-ambient (mas abajo), reutilizado aqui para que login/recuperar-contraseña compartan el lenguaje visual. */ .ambient-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.45; pointer-events: none; z-index: 0; } .ambient-blob--a { width: 340px; height: 340px; background: var(--color-teal); top: -120px; left: -80px; } .ambient-blob--b { width: 380px; height: 380px; background: var(--color-navy-dark); bottom: -140px; right: -80px; } @media (prefers-reduced-motion: no-preference) { .ambient-blob { animation: ambient-drift 20s ease-in-out infinite alternate; } .ambient-blob--b { animation-delay: -8s; } } @keyframes ambient-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(18px, -14px) scale(1.08); } } .guest-card { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); padding: 36px 32px; } .guest-brand { text-align: center; margin-bottom: 24px; } .guest-brand .brand-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--color-heading); letter-spacing: -0.01em; } .guest-brand .brand-title span { color: var(--color-teal); } .guest-brand .brand-subtitle { font-size: 13px; color: var(--color-text-muted); margin-top: 4px; } /* ---------- Formularios ---------- */ .form-group { margin-bottom: 18px; } label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 7px; transition: color 160ms ease; } /* Toque tactil: mientras el input/select/textarea de un .form-group tiene foco, su label se resalta en el color de acento. Se apoya en :has() -ya usado en este archivo por .role-card:has(input:checked)- asi que no depende de reordenar label/input en ningun formulario. */ .form-group:has(input:focus, select:focus, textarea:focus) label { color: var(--color-teal-text); } /* CORRECCION VISUAL (controles HTML nativos): input[type="tel"] e input[type="time"] faltaban en este selector compartido -mismo defecto ya corregido antes para input[type="number"], ver comentario mas abajo- y por eso se veian con la apariencia nativa del navegador (views/usuarios/crear.php Telefono, views/turnos/crear.php y editar.php Hora inicio/termino). Se agregan tambien "search"/"url"/ "month"/"week", sin uso actual en el proyecto, para que cualquier campo futuro de ese tipo quede estilizado por defecto sin depender de otra auditoria. */ input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="number"], input[type="tel"], input[type="time"], input[type="search"], input[type="url"], input[type="month"], input[type="week"], select, textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: calc(var(--radius) - 2px); font-size: 14.5px; font-family: var(--font); background: var(--color-bg); color: var(--color-text); transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } /* CORREGIDO en la auditoria visual Aurora (Semana 5): input[type="number"] faltaba en el selector compartido de arriba -- el campo "Orden" de Configurar puntos de ronda (views/rondas/puntos.php) quedaba con la apariencia nativa del navegador (spinner incluido) en vez del estilo Aurora del resto de los campos. Los navegadores WebKit/Blink dibujan las flechas nativas de number encima del padding derecho; se reduce ese padding para que no queden pegadas al borde del campo. */ input[type="number"] { padding-right: 8px; } /* Corrección de formulario que desborda en iPhone (prueba móvil real: el mismo formulario se veía bien en Android y desbordaba en iOS). El control nativo de iOS Safari para type="date"/"time" dibuja su texto completo ("dd/mm/aaaa", "HH:MM a.m./p.m.") con más ancho interno del que necesita el mismo control en Android/Chrome; con el padding compartido (12px 14px) ese contenido nativo terminaba más ancho que la caja del campo, empujándola fuera de su columna. Se reduce el padding lateral SOLO en date/time, y SOLO dentro de @supports (-webkit-touch-callout: none) -- esa consulta de soporte únicamente es verdadera en WebKit de iOS (Safari y cualquier navegador en iOS, que por política de Apple usa el mismo motor); Chrome/Android es Blink y nunca la cumple, así que esta regla no puede alterar Android aunque se equivoque. */ /* CAUSA REAL DEL DESBORDE EN iPhone (cierre, validación móvil real post-despliegue, 2026-09-24): el bloque de abajo ya reducía el padding lateral, pero eso solo atacaba el síntoma. Medido con el DOM real renderizado (Chrome headless, 390px y 412px): la caja del campo cabe perfectamente -- 278-304px de ancho dentro de contenedores de ese mismo ancho, con 43-56px de margen libre a la derecha, sin ningún elemento desbordado (document.scrollWidth === clientWidth). Es decir, el modelo de caja (width/max-width/min-width/box-sizing, ya presentes arriba y en .form-grid/.filters-bar) NO es el problema: en Blink no hay desborde posible. Lo que faltaba es específico de WebKit: a `input[type="date"]` e `input[type="time"]` NO se les había aplicado nunca `-webkit-appearance: none` (en este archivo solo lo tenían input[type="checkbox"] y button.porteria-lista-item). Sin eso, iOS conserva el DIBUJO NATIVO del control, que mantiene su ancho intrínseco propio (el texto completo "dd/mm/aaaa" o "HH:MM a. m." con las cajas del sistema) y se pinta por encima del borde de la caja declarada, aunque la caja mida lo correcto -- exactamente el síntoma reportado: bien en Android/Chrome (Blink respeta la caja), desbordado en iPhone (cualquier navegador en iOS usa WebKit por política de Apple). Todo sigue encerrado en @supports (-webkit-touch-callout: none), que SOLO es verdadera en WebKit de iOS: escritorio y Android (Blink) nunca entran aquí, así que ni el dibujo nativo ni el icono de calendario de Chrome cambian. En iOS el control sigue abriendo el selector nativo al tocarlo -- appearance:none es dibujo, no funcionalidad (mismo criterio ya documentado arriba para los checkbox). */ @supports (-webkit-touch-callout: none) { input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; /* Repetidos a propósito dentro del bloque de iOS: son las mismas reglas del selector compartido de arriba, pero declaradas junto a appearance:none para que ningún cambio futuro en aquel selector pueda dejar el control nativo de iOS sin límite de ancho. */ width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding-left: 10px; padding-right: 6px; } } /* El contenedor plegable ("¿Turno nocturno?" en Crear/Editar turno, que envuelve el campo `fecha_termino`) era el único .form-group del proyecto con padding lateral propio y sin el mismo seguro de encogimiento que .form-grid > .form-group y .filters-bar .form-group ya tenían. Con el `* { box-sizing: border-box }` global no desbordaba en Blink (verificado: margen libre de 56px a 390px), pero se le declara igual para que el campo de fecha más anidado del sistema tenga exactamente las mismas garantías que el resto. */ .form-group-details .form-group { min-width: 0; max-width: 100%; } textarea { resize: vertical; height: 108px; } /* Revision de interfaz: input[type="file"] nunca tenia estilo propio en ningun formulario de evidencia (Novedades/Incidentes/Rondas) -- se veia como el selector de archivo nativo del navegador ("boton HTML basico"), inconsistente con el resto de los campos Aurora. El navegador no permite reemplazar el control nativo por completo, pero ::file-selector-button (soportado en todos los navegadores modernos) si permite darle el mismo lenguaje visual (boton solido + contenedor con borde) que ya usa el resto del formulario. */ input[type="file"] { width: 100%; max-width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px dashed var(--color-border); border-radius: calc(var(--radius) - 2px); font-size: 13px; font-family: var(--font); background: var(--color-bg); color: var(--color-text-muted); cursor: pointer; transition: border-color 180ms ease, background 180ms ease; } input[type="file"]:hover { border-color: var(--color-teal); background: var(--color-surface); } input[type="file"]::file-selector-button { margin-right: 10px; padding: 8px 14px; border: none; border-radius: calc(var(--radius) - 4px); background: var(--color-navy); color: #fff; font-size: 12.5px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: background 160ms ease; } input[type="file"]::file-selector-button:hover { background: var(--color-navy-dark); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-teal); background: var(--color-surface); box-shadow: 0 0 0 4px rgba(23, 169, 196, 0.16); } input::placeholder { color: var(--color-text-muted); opacity: 1; } select:disabled { color: var(--color-text-muted); background: var(--color-bg); cursor: not-allowed; } .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 46px; padding: 0 22px; background: var(--grad); color: #fff; border: none; border-radius: 100px; font-size: 14.5px; font-weight: 700; font-family: var(--font); cursor: pointer; text-align: center; box-shadow: 0 10px 22px -10px rgba(11, 42, 74, 0.45); transition: filter 160ms ease, box-shadow 160ms ease, transform 120ms ease; } .btn:hover { filter: brightness(1.06); box-shadow: 0 14px 28px -10px rgba(11, 42, 74, 0.5); text-decoration: none; } .btn:active { transform: scale(0.98); } .btn-with-icon { gap: 8px; } .btn-icon { font-size: 16px; font-weight: 700; line-height: 1; } /* Iconos SVG inline (helper icon(), reemplaza los emojis usados como icono funcional/de estado -revision de interfaz-). Se dimensionan en "em" para heredar el font-size ya definido en cada contenedor (.btn-icon / .empty-state-icon / .porteria-tile-icon) sin duplicar valores de tamaño; el color siempre es currentColor, nunca un color fijo, para seguir el mismo texto/estado del elemento que envuelve al icono. */ .btn-icon svg, .empty-state-icon svg, .porteria-tile-icon svg, .dash-quick-icon svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; } /* Sprint 7 (correccion UX /asistencia): .btn-secondary se usaba en varias vistas (Turnos, Asignaciones, Asistencia) SIN combinarla nunca con .btn en el HTML (siempre class="btn-secondary" a secas, ver views/turnos/index.php, views/turnos/semana.php, views/asignaciones/index.php, views/asistencia/index.php). Como esta regla nunca definia su propia caja (altura/relleno/radio/tipografia/ cursor), el boton quedaba con el tamaño y fuente por defecto del navegador: por eso se veia "HTML basico" y desalineado junto a un con nombres de instalacion largos podia forzar a la fila completa (Instalacion + Fecha, views/rondas/index.php y views/rondas/puntos.php) a salirse del margen de la tarjeta en pantallas reducidas, aun con flex-wrap: wrap. Mismo problema en Novedades/Incidentes (Buscar/Estado/Severidad). min-width: 0 permite que cada campo se encoja al ancho real disponible. */ .filters-bar .form-group { margin-bottom: 0; flex: 1 1 160px; min-width: 0; max-width: 100%; } .filters-bar .filters-actions { display: flex; gap: 8px; flex: 0 0 auto; } .filters-bar .btn, .filters-bar .btn-secondary, .filters-bar .btn-tiny { width: auto; flex: 0 0 auto; } /* ---------- Tablas ---------- */ .table-wrap { width: 100%; overflow-x: auto; /* Correccion (revision de interfaz: "corrige el recorte de la primera columna en las tablas"): overflow-x: auto por si solo deja overflow-y en su valor inicial (visible) en algunos motores, lo que vuelve ambigua/inconsistente la region de recorte de este contenedor contra su propio border-radius -el borde redondeado terminaba "mordiendo" la esquina superior/inferior de la primera columna, la mas visible por ser la primera en leerse-. Fijar overflow-y: hidden (nunca se quiso scroll vertical aqui, solo horizontal cuando la tabla no cabe) hace que ambos ejes queden en un estado de recorte explicito y consistente, y el radio se aplica limpio en las 4 esquinas de la tabla real sin recortar contenido de ninguna columna. */ overflow-y: hidden; border: 1px solid var(--color-border); border-radius: var(--radius); } /* Sprint 4.2 (unificacion de tablas, sin cambios de logica): patron comun para TODOS los listados administrativos (Usuarios, Empresas, Clientes, Instalaciones, Guardias, Puestos). Antes cada tabla usaba table-layout: fixed (el ancho de columna sale solo del th de la primera fila; min-width en celdas se ignora) combinado con columnas en % y overflow-wrap: break-word en varias columnas -incluidos los propios encabezados-, lo que partia palabras a mitad ("INSTALAC/ION", "TELEFO/NO") o las truncaba con "...". Con table-layout: auto el ancho de cada columna respeta su min-width real, el encabezado nunca se comprime por debajo de su propio texto, y si la suma de anchos minimos supera el ancho disponible la tabla crece mas alla del 100% -.table-wrap ya tenia overflow-x: auto desde antes, sin cambios- en vez de aplastar columnas o partir palabras. Los modificadores .data-table--{usuarios,empresas,clientes,instalaciones,guardias, puestos} de mas abajo solo agregan anchos minimos especificos por columna; ya no necesitan repetir white-space/word-break porque ahora es responsabilidad de esta regla base compartida. */ table.data-table { width: 100%; table-layout: auto; border-collapse: collapse; font-size: 12.5px; } .data-table th, .data-table td { text-align: left; padding: 18px 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; } .data-table th { background: var(--color-bg); color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; /* Los encabezados NUNCA se parten ni se truncan, en ninguna tabla. */ white-space: nowrap; overflow: visible; text-overflow: clip; } .data-table td { /* Por defecto las celdas pueden ocupar dos lineas naturales -en espacios, nunca a mitad de palabra-. Las columnas que deben quedar siempre en una sola linea (codigos, RUT, correo, telefono, fechas, estado, contadores, acciones) lo fuerzan explicitamente con white-space: nowrap en su modificador de columna, mas abajo. */ white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; text-overflow: clip; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--color-bg); } /* Anchos por columna especificos del listado de Usuarios (8 columnas: Nombre, Correo, Estado, Empresa, Roles, Instalaciones, Creado, Acciones). Sprint 4.2: modificador propio (.data-table--usuarios), igual criterio que el resto de listados, para no depender de reglas .data-table sueltas sin calificar que antes se aplicaban a esta tabla por ser la unica sin modificador de clase. Correo no tiene espacios utiles para partir en dos lineas de forma legible, por eso se mantiene en una sola linea con min-width propio en vez de envolver. */ table.data-table.data-table--usuarios { min-width: 1220px; } table.data-table.data-table--usuarios th:nth-child(1), table.data-table.data-table--usuarios td:nth-child(1) { width: 16%; min-width: 160px; } table.data-table.data-table--usuarios th:nth-child(2), table.data-table.data-table--usuarios td:nth-child(2) { width: 20%; min-width: 200px; } table.data-table.data-table--usuarios td:nth-child(2) { white-space: nowrap; } table.data-table.data-table--usuarios th:nth-child(3), table.data-table.data-table--usuarios td:nth-child(3) { width: 10%; min-width: 100px; text-align: center; } table.data-table.data-table--usuarios td:nth-child(3) { white-space: nowrap; } table.data-table.data-table--usuarios th:nth-child(4), table.data-table.data-table--usuarios td:nth-child(4) { width: 15%; min-width: 150px; } table.data-table.data-table--usuarios th:nth-child(5), table.data-table.data-table--usuarios td:nth-child(5) { width: 16%; min-width: 160px; } table.data-table.data-table--usuarios th:nth-child(6), table.data-table.data-table--usuarios td:nth-child(6) { width: 16%; min-width: 160px; } table.data-table.data-table--usuarios th:nth-child(7), table.data-table.data-table--usuarios td:nth-child(7) { width: 18%; min-width: 180px; } table.data-table.data-table--usuarios td:nth-child(7) { white-space: nowrap; } table.data-table.data-table--usuarios th:nth-child(8), table.data-table.data-table--usuarios td:nth-child(8) { width: 104px; min-width: 104px; white-space: nowrap; overflow: visible; } /* Anchos por columna especificos del listado de Empresas (11 columnas: Razon social, Nombre comercial, RUT, Correo, Telefono, Estado, Usuarios, Clientes, Instalaciones, Creado, Acciones). Se usa un modificador propio (.data-table--empresas) para no reinterpretar las reglas nth-child de otros listados; sigue reutilizando la misma base .data-table (bordes, padding, hover, tipografia, table-layout: auto, white-space en th/td) definida mas arriba. */ table.data-table.data-table--empresas { min-width: 1450px; } table.data-table.data-table--empresas th:nth-child(1), table.data-table.data-table--empresas td:nth-child(1) { width: 12%; min-width: 180px; } table.data-table.data-table--empresas th:nth-child(2), table.data-table.data-table--empresas td:nth-child(2) { width: 11%; min-width: 160px; } table.data-table.data-table--empresas th:nth-child(3), table.data-table.data-table--empresas td:nth-child(3) { width: 8%; min-width: 120px; white-space: nowrap; } table.data-table.data-table--empresas th:nth-child(4), table.data-table.data-table--empresas td:nth-child(4) { width: 14%; min-width: 200px; white-space: nowrap; } table.data-table.data-table--empresas th:nth-child(5), table.data-table.data-table--empresas td:nth-child(5) { width: 9%; min-width: 130px; white-space: nowrap; } table.data-table.data-table--empresas th:nth-child(6), table.data-table.data-table--empresas td:nth-child(6) { width: 7%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--empresas th:nth-child(7), table.data-table.data-table--empresas td:nth-child(7), table.data-table.data-table--empresas th:nth-child(8), table.data-table.data-table--empresas td:nth-child(8), table.data-table.data-table--empresas th:nth-child(9), table.data-table.data-table--empresas td:nth-child(9) { width: 6%; min-width: 90px; white-space: nowrap; text-align: center; } table.data-table.data-table--empresas th:nth-child(10), table.data-table.data-table--empresas td:nth-child(10) { width: 13%; min-width: 180px; white-space: nowrap; } table.data-table.data-table--empresas th:nth-child(11), table.data-table.data-table--empresas td:nth-child(11) { width: 104px; min-width: 104px; white-space: nowrap; overflow: visible; } /* Anchos por columna especificos del listado de Clientes (9 columnas: Empresa, Nombre del cliente, RUT, Correo, Telefono, Estado, Instalaciones, Creado, Acciones). Mismo criterio que .data-table--empresas: modificador propio para no reinterpretar las reglas nth-child de otros listados; sigue reutilizando la misma base .data-table (bordes, padding, hover, tipografia, table-layout: auto, white-space en th/td) definida mas arriba. */ table.data-table.data-table--clientes { min-width: 1280px; } table.data-table.data-table--clientes th:nth-child(1), table.data-table.data-table--clientes td:nth-child(1) { width: 15%; min-width: 160px; } table.data-table.data-table--clientes th:nth-child(2), table.data-table.data-table--clientes td:nth-child(2) { width: 16%; min-width: 180px; } table.data-table.data-table--clientes th:nth-child(3), table.data-table.data-table--clientes td:nth-child(3) { width: 11%; min-width: 120px; white-space: nowrap; } table.data-table.data-table--clientes th:nth-child(4), table.data-table.data-table--clientes td:nth-child(4) { width: 18%; min-width: 200px; white-space: nowrap; } table.data-table.data-table--clientes th:nth-child(5), table.data-table.data-table--clientes td:nth-child(5) { width: 11%; min-width: 130px; white-space: nowrap; } table.data-table.data-table--clientes th:nth-child(6), table.data-table.data-table--clientes td:nth-child(6) { width: 8%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--clientes th:nth-child(7), table.data-table.data-table--clientes td:nth-child(7) { width: 8%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--clientes th:nth-child(8), table.data-table.data-table--clientes td:nth-child(8) { width: 13%; min-width: 180px; white-space: nowrap; } table.data-table.data-table--clientes th:nth-child(9), table.data-table.data-table--clientes td:nth-child(9) { width: 104px; min-width: 104px; white-space: nowrap; overflow: visible; } /* Anchos por columna especificos del listado de Instalaciones (12 columnas: Empresa, Cliente, Nombre, Codigo interno, Tipo, Direccion, Ciudad, Region, Estado, Usuarios, Creado, Acciones). Mismo criterio que .data-table--empresas / .data-table--clientes: modificador propio para no reinterpretar las reglas nth-child de otros listados; sigue reutilizando la misma base .data-table (bordes, padding, hover, tipografia, table-layout: auto, white-space en th/td) definida mas arriba. */ table.data-table.data-table--instalaciones { min-width: 1640px; } table.data-table.data-table--instalaciones th:nth-child(1), table.data-table.data-table--instalaciones td:nth-child(1) { width: 9%; min-width: 150px; } table.data-table.data-table--instalaciones th:nth-child(2), table.data-table.data-table--instalaciones td:nth-child(2) { width: 9%; min-width: 150px; } table.data-table.data-table--instalaciones th:nth-child(3), table.data-table.data-table--instalaciones td:nth-child(3) { width: 10%; min-width: 160px; } table.data-table.data-table--instalaciones th:nth-child(4), table.data-table.data-table--instalaciones td:nth-child(4) { width: 8%; min-width: 140px; white-space: nowrap; } table.data-table.data-table--instalaciones th:nth-child(5), table.data-table.data-table--instalaciones td:nth-child(5) { width: 8%; min-width: 140px; white-space: nowrap; } table.data-table.data-table--instalaciones th:nth-child(6), table.data-table.data-table--instalaciones td:nth-child(6) { width: 10%; min-width: 170px; } table.data-table.data-table--instalaciones th:nth-child(7), table.data-table.data-table--instalaciones td:nth-child(7) { width: 8%; min-width: 130px; white-space: nowrap; } table.data-table.data-table--instalaciones th:nth-child(8), table.data-table.data-table--instalaciones td:nth-child(8) { width: 7%; min-width: 120px; white-space: nowrap; } table.data-table.data-table--instalaciones th:nth-child(9), table.data-table.data-table--instalaciones td:nth-child(9) { width: 6%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--instalaciones th:nth-child(10), table.data-table.data-table--instalaciones td:nth-child(10) { width: 6%; min-width: 90px; white-space: nowrap; text-align: center; } table.data-table.data-table--instalaciones th:nth-child(11), table.data-table.data-table--instalaciones td:nth-child(11) { width: 11%; min-width: 180px; white-space: nowrap; } table.data-table.data-table--instalaciones th:nth-child(12), table.data-table.data-table--instalaciones td:nth-child(12) { width: 104px; min-width: 104px; white-space: nowrap; overflow: visible; } /* Anchos por columna especificos del listado de Guardias (12 columnas: Empresa, Cliente, Instalacion, RUT, Nombre completo, Telefono, Correo, Cargo, Fecha de ingreso, Estado, Creado, Acciones). Sprint 4.2: se reemplazan los anchos en % + overflow-wrap: break-word (causa real de encabezados partidos como "INSTALAC/ION", "TELEFO/NO") por el mismo patron ya validado en Puestos: min-width por columna sobre table-layout: auto (regla base de mas arriba). Mismo criterio que .data-table--empresas/--clientes/--instalaciones/ --puestos: modificador propio para no reinterpretar las reglas nth-child de otros listados. */ table.data-table.data-table--guardias { /* Suma real de los min-width por columna de mas abajo (150+150+160+ 120+180+130+200+150+150+100+180+104 = 1774px) mas un margen chico para bordes/redondeo de subpixeles. */ min-width: 1780px; } table.data-table.data-table--guardias th:nth-child(1), table.data-table.data-table--guardias td:nth-child(1) { width: 9%; min-width: 150px; } table.data-table.data-table--guardias th:nth-child(2), table.data-table.data-table--guardias td:nth-child(2) { width: 9%; min-width: 150px; } table.data-table.data-table--guardias th:nth-child(3), table.data-table.data-table--guardias td:nth-child(3) { width: 9%; min-width: 160px; } table.data-table.data-table--guardias th:nth-child(4), table.data-table.data-table--guardias td:nth-child(4) { width: 7%; min-width: 120px; white-space: nowrap; } table.data-table.data-table--guardias th:nth-child(5), table.data-table.data-table--guardias td:nth-child(5) { width: 10%; min-width: 180px; } table.data-table.data-table--guardias th:nth-child(6), table.data-table.data-table--guardias td:nth-child(6) { width: 7%; min-width: 130px; white-space: nowrap; } table.data-table.data-table--guardias th:nth-child(7), table.data-table.data-table--guardias td:nth-child(7) { width: 11%; min-width: 200px; white-space: nowrap; } table.data-table.data-table--guardias th:nth-child(8), table.data-table.data-table--guardias td:nth-child(8) { width: 8%; min-width: 150px; } table.data-table.data-table--guardias th:nth-child(9), table.data-table.data-table--guardias td:nth-child(9) { width: 8%; min-width: 150px; white-space: nowrap; } table.data-table.data-table--guardias th:nth-child(10), table.data-table.data-table--guardias td:nth-child(10) { width: 6%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--guardias th:nth-child(11), table.data-table.data-table--guardias td:nth-child(11) { width: 10%; min-width: 180px; white-space: nowrap; } table.data-table.data-table--guardias th:nth-child(12), table.data-table.data-table--guardias td:nth-child(12) { width: 104px; min-width: 104px; white-space: nowrap; overflow: visible; } /* Anchos por columna especificos del listado de Puestos de servicio (Sprint 4 - Entrega 1; 11 columnas: Empresa, Cliente, Instalacion, Nombre del puesto, Codigo interno, Tipo, Ubicacion, Estado, Guardias, Creado, Acciones). Mismo criterio que .data-table--empresas/ --clientes/--instalaciones/--guardias: modificador propio para no reinterpretar las reglas nth-child de otros listados; sigue reutilizando la misma base .data-table (bordes, padding, hover, tipografia). Sprint 4.1 (pulido visual, sin cambios de logica): la tabla base usa table-layout: fixed (regla table.data-table de mas arriba, compartida por TODOS los listados y que no se toca aqui). Con layout fijo el ancho de cada columna se toma UNICAMENTE del th de la primera fila y segun la especificacion CSS min-width en celdas posteriores se ignora; por eso una columna en % terminaba mas angosta que su propio encabezado y el navegador partia la palabra para no desbordar ( "EMPRES/A", "INSTALAC/ION") o la truncaba con puntos suspensivos ( "Guardias" -> "G...", "Creado" -> "CRE..."). La correccion real -no un parche visual encima del sintoma- es usar table-layout: auto SOLO para este modificador (no se toca table.data-table global ni ningun otro modulo): con layout automatico, min-width por columna SI se respeta, el ancho final se calcula segun contenido y ninguna columna puede quedar mas angosta que su encabezado en una sola linea. Cuando la suma de anchos minimos supera el ancho disponible, la tabla crece mas alla del 100% y .table-wrap (ya tenia overflow-x: auto desde antes, sin cambios) habilita scroll horizontal en vez de comprimir columnas o partir palabras. */ table.data-table.data-table--puestos { table-layout: auto; /* Suma real de los min-width por columna de mas abajo (120+120+150+ 190+150+150+150+100+100+180+104 = 1514px) mas un margen chico para bordes/redondeo de subpixeles. */ min-width: 1520px; } /* Los encabezados NUNCA se parten ni se truncan, en ninguna columna (incluidas Empresa/Cliente/Instalacion/Nombre/Ubicacion, cuyo CONTENIDO de fila -no su encabezado- si puede ocupar dos lineas mas abajo). overflow: visible + text-overflow: clip evita cualquier "..." residual si el navegador redondea el ancho automatico por subpixeles. */ table.data-table.data-table--puestos th { white-space: nowrap; overflow: visible; text-overflow: clip; } table.data-table.data-table--puestos th:nth-child(1), table.data-table.data-table--puestos td:nth-child(1) { width: 10%; min-width: 120px; } table.data-table.data-table--puestos td:nth-child(1) { /* Empresa: el contenido de la celda (no el encabezado) puede ocupar dos lineas naturales -en espacios, nunca a mitad de palabra- ahora que min-width le da espacio real. */ white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; text-overflow: clip; } table.data-table.data-table--puestos th:nth-child(2), table.data-table.data-table--puestos td:nth-child(2) { width: 10%; min-width: 120px; } table.data-table.data-table--puestos td:nth-child(2) { /* Cliente: mismo criterio que la columna 1. */ white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; text-overflow: clip; } table.data-table.data-table--puestos th:nth-child(3), table.data-table.data-table--puestos td:nth-child(3) { width: 11%; min-width: 150px; } table.data-table.data-table--puestos td:nth-child(3) { /* Instalacion: mismo criterio que la columna 1. */ white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; text-overflow: clip; } table.data-table.data-table--puestos th:nth-child(4), table.data-table.data-table--puestos td:nth-child(4) { width: 16%; min-width: 190px; } table.data-table.data-table--puestos td:nth-child(4) { /* Nombre del puesto: mismo criterio que la columna 1. */ white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; text-overflow: clip; } table.data-table.data-table--puestos th:nth-child(5), table.data-table.data-table--puestos td:nth-child(5) { /* Codigo interno: siempre en una sola linea (regla de negocio de este ajuste), como pide el enunciado. */ width: 10%; min-width: 150px; white-space: nowrap; } table.data-table.data-table--puestos th:nth-child(6), table.data-table.data-table--puestos td:nth-child(6) { /* Tipo: catalogo de texto libre (ver PuestoController::TIPOS_SUGERIDOS), valores como "Acceso vehicular" necesitan mas ancho minimo que su encabezado para no forzar una segunda linea. */ width: 11%; min-width: 150px; white-space: nowrap; } table.data-table.data-table--puestos th:nth-child(7), table.data-table.data-table--puestos td:nth-child(7) { width: 12%; min-width: 150px; } table.data-table.data-table--puestos td:nth-child(7) { /* Ubicacion: texto libre opcional, mismo criterio que la columna 1. */ white-space: normal; overflow-wrap: normal; word-break: normal; overflow: visible; text-overflow: clip; } table.data-table.data-table--puestos th:nth-child(8), table.data-table.data-table--puestos td:nth-child(8) { /* Estado: badge, siempre en una sola linea. */ width: 7%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--puestos th:nth-child(9), table.data-table.data-table--puestos td:nth-child(9) { /* Guardias: encabezado y valor siempre completos en una sola linea (era el caso truncado como "G..."). */ width: 7%; min-width: 100px; white-space: nowrap; text-align: center; } table.data-table.data-table--puestos th:nth-child(10), table.data-table.data-table--puestos td:nth-child(10) { /* Creado: fecha/hora completa en una sola linea (era el caso truncado como "CRE..."); el valor real es un DATETIME ("AAAA-MM-DD HH:MM:SS"), mas ancho que la palabra "Creado" sola. */ width: 11%; min-width: 180px; white-space: nowrap; } table.data-table.data-table--puestos th:nth-child(11), table.data-table.data-table--puestos td:nth-child(11) { /* Acciones: sin cambios de fondo, ya funcionaba bien (ancho fijo en px, botones apilados via .actions-cell). */ width: 104px; min-width: 104px; white-space: nowrap; overflow: visible; } .actions-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .actions-cell a, .actions-cell button { font-size: 12px; } .actions-cell form { margin: 0; display: block; } .btn-tiny { display: inline-block; padding: 7px 13px; border-radius: 100px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-heading); cursor: pointer; font-weight: 700; font-family: var(--font); font-size: 12.5px; line-height: 1.2; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease; } .btn-tiny:active { transform: scale(0.96); } .btn-tiny:hover { background: var(--color-bg); text-decoration: none; } .btn-tiny-danger { border-color: rgba(192, 57, 43, 0.3); color: var(--color-danger); } .btn-tiny-danger:hover { background: var(--color-danger-bg); } .btn-tiny-success { border-color: rgba(30, 142, 90, 0.35); color: var(--color-success); } .btn-tiny-success:hover { background: var(--color-success-bg); } /* ---------- Estados y roles (badges) ---------- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; transition: background 180ms ease, color 180ms ease; } .badge-activo, .badge-activa, .badge-operativa { background: var(--color-success-bg); color: var(--color-success); } /* Incidentes: responsable asignado (M-8, auditoria visual 2026-09-08). Mismo tono "resuelto/en buen estado" que .badge-activo. */ .badge-asignado { background: var(--color-success-bg); color: var(--color-success); } .badge-suspendido, .badge-suspendida, .badge-dado_de_baja, .badge-dada_de_baja, .badge-inactivo, .badge-inactiva { background: var(--color-danger-bg); color: var(--color-danger); } /* Instalaciones (Sprint 2 - Entrega 1): tercer estado propio de la tabla instalaciones, sin equivalente en usuarios/empresas/clientes (activo/inactivo son binarios). "En implementacion" no es exito ni error: es un estado intermedio, con su propio color neutro/amarillo para no confundirse visualmente con "operativa" (verde) ni "inactiva" (rojo). */ .badge-en_implementacion { background: var(--color-warning-bg); color: var(--color-warning); } /* Estados de turno (Sprint 6). Reutilizan las mismas variables de color ya definidas arriba (success/danger/warning), sin introducir tonos nuevos: programado = pendiente (mismo tono que "en_implementacion"), confirmado = success, cancelado = danger, completado = neutral/muted (ni positivo ni negativo, solo "ya ocurrio"). */ .badge-programado { background: var(--color-warning-bg); color: var(--color-warning); } .badge-confirmado { background: var(--color-success-bg); color: var(--color-success); } .badge-cancelado { background: var(--color-danger-bg); color: var(--color-danger); } .badge-completado { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); } /* Estados operacionales de Asistencia y Relevo (Sprint 7). Mismo criterio de color que Turnos, sin introducir tonos nuevos: pendiente = advertencia (aun no se marca), en_curso = success (guardia en el puesto), cerrado = neutral/muted (ya ocurrio, sin incidencias), cerrado_con_excepcion = danger (requiere atencion: cierre sin relevo formal), anulado = danger (correccion logica de un registro previo). 'cancelado' (turno padre cancelado) reutiliza .badge-cancelado, ya definido arriba. */ .badge-pendiente { background: var(--color-warning-bg); color: var(--color-warning); } .badge-en_curso { background: var(--color-success-bg); color: var(--color-success); } .badge-cerrado { background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); } .badge-cerrado_con_excepcion { background: var(--color-danger-bg); color: var(--color-danger); } .badge-anulado { background: var(--color-danger-bg); color: var(--color-danger); } /* Severidad de Incidentes (Sprint Semana 5): 4 niveles propios, sin equivalente previo en el proyecto. Reutiliza las mismas 3 variables de color ya definidas (success/warning/danger) en vez de introducir tonos nuevos: baja = success, media = warning, alta = warning mas fuerte (mismo tono que warning, se distingue por texto), critica = danger. */ .badge-severidad-baja { background: var(--color-success-bg); color: var(--color-success); } .badge-severidad-media, .badge-severidad-alta { background: var(--color-warning-bg); color: var(--color-warning); } .badge-severidad-critica { background: var(--color-danger-bg); color: var(--color-danger); } .badge-list { display: flex; flex-wrap: wrap; gap: 6px; } .badge-rol { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--color-teal-text); white-space: nowrap; transition: background 180ms ease, color 180ms ease; } .text-muted { color: var(--color-text-muted); } /* ---------- Estado vacio ---------- */ .empty-state { text-align: center; padding: 48px 16px; color: var(--color-text-muted); } /* ---------- Paginacion ---------- */ .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .pagination a, .pagination span { padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--color-border); font-size: 13px; color: var(--color-heading); } .pagination span.activo { background: var(--color-navy); color: #fff; border-color: var(--color-navy); } .pagination a:hover { background: var(--color-bg); text-decoration: none; } /* ---------- Checkbox (control global, Aurora) ---------- CORRECCION VISUAL (controles HTML nativos): antes solo .role-card input[type="checkbox"] tenia estilo propio (accent-color, que igual deja que cada sistema operativo dibuje su propia forma nativa de casilla -cuadrada en Windows, redondeada en macOS, distinta en cada navegador-); .checkbox-item input (usado en Instalaciones de Usuarios/Editar y en Guardias de views/asignaciones/puesto.php) no tenia ningun estilo, quedando con la casilla nativa sin integrar. appearance:none oculta el dibujo nativo del sistema operativo y lo reemplaza por un cuadro propio. Esto NO afecta la semantica real del checkbox: foco por teclado (Tab), alternar con Space, asociacion con su