/* Panel de administrador · misma línea gráfica que recepción, consultorio y sala */

/* La pantalla ocupa la ventana: el menú queda fijo y solo el contenido se desplaza */
body.pantalla-admin { height: 100vh; display: flex; flex-direction: column; }
body.pantalla-admin > .barra { flex: none; }
@media (max-width: 800px) { body.pantalla-admin { height: auto; display: block; } }

/* ─── Contenido ─── */
.admin-cont { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 60px; }   /* mismo margen que .modulo-enc: el título no brinca al cambiar de sección */
.admin-cont > * { max-width: 1240px; }
.sec-cab { margin-bottom: 20px; }   /* encabezado de página (P-2) dentro del Panel: aquí solo su separación */

/* Tarjetas (como en recepción: borde suave, esquinas de 14px) */
.pantalla-admin .tarjeta { border-radius: var(--radio-contenedor); box-shadow: none; padding: 20px 20px; }
.seccion { margin-bottom: 16px; }
.tarjeta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* Encabezado de tarjeta (P-5, versión 3 elegida por Joaquín el 15-oct-2026): sin ícono, línea de 1 px debajo que llega a las orillas */
.pantalla-admin .tarjeta > .tarjeta-cab { margin: 0 -20px 16px; padding: 0 20px 12px; border-bottom: 1px solid var(--borde); }
.tarjeta-cab h2, .seccion > h2 { margin: 0; font-size: var(--ts-destacado); text-transform: none; letter-spacing: 0; color: var(--texto); font-weight: 700; }
.seccion > h2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tarjeta > .nota:first-of-type { margin-top: 0; }

/* Botones: el chico es un botón suave que se pinta de azul al pasar el cursor */
.pantalla-admin .boton { border-radius: var(--radio-control); transition: background var(--vel-rapida), border-color var(--vel-rapida), color var(--vel-rapida); }
.pantalla-admin .boton:not(.primario):not(.peligro):hover { background: var(--azul-claro); border-color: var(--azul-borde); color: var(--azul); }
.pantalla-admin .boton.chico { padding: 8px 12px; }

/* ─── Filtros: cuadrícula de campos del mismo ancho y alto, títulos alineados ─── */

/* ─── Indicadores (icono + texto + número azul, igual que recepción) ─── */
.pantalla-admin .kpis { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.pantalla-admin .kpi { border-radius: var(--radio-contenedor); padding: 12px 16px; min-width: 0; }
.pantalla-admin .kpi small { font-size: var(--ts-pequeno); font-weight: 500; }
.pantalla-admin .kpi b { display: block; font-size: var(--ts-numero); font-weight: 800; color: var(--azul); line-height: 32px; white-space: nowrap; }

/* Barras de los reportes */
.pantalla-admin .barras { gap: 8px; }
.pantalla-admin .barra-fila { grid-template-columns: 150px 1fr 44px; gap: 12px; }
.pantalla-admin .barra-fila > div { background: var(--fondo); border-radius: var(--radio-pastilla); overflow: hidden; }
.pantalla-admin .barra-fila .b { height: 12px; border-radius: var(--radio-pastilla); }
.pantalla-admin .barra-fila .n { font-weight: 700; color: var(--azul); }

/* ─── Tablas ─── */
.tabla-cont { overflow-x: auto; }
.pantalla-admin .tabla-cont.tarjeta { padding: 0; overflow-x: auto; }   /* la tabla llega a la orilla de su tarjeta, como las listas */
/* Tablas del Panel con el formato de las listas (M-3, M-12; Joaquín, 15-oct-2026): letra 12, nombre 12/700, relleno compacto, renglón de 34 */
table.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ts-pequeno); }
.tabla th { text-align: left; font-size: var(--ts-pequeno); font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .06em; padding: 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 8px; line-height: 16px;   /* 33 de alto por relleno y el renglón de la escala (T-1), sin height fijo (D-1.8) */ border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla :is(th, td):first-child { padding-left: 16px; } .tabla :is(th, td):last-child { padding-right: 16px; }
.tabla td b { font-weight: 700; } .tabla td :is(.nota, small) { font-size: inherit; }
.tabla th.num { text-align: center; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td { background: var(--azul-tenue); color: var(--azul); }   /* como en las listas (M-12) */
.tabla td.num { text-align: center; font-variant-numeric: tabular-nums; }
.tabla td:last-child:has(.boton) { text-align: right; white-space: nowrap; }
.tabla tr.inactivo td { color: var(--texto-suave); }
.tabla input, .tabla select { height: 36px; font-size: var(--ts-base); padding: 0 12px; }
.tabla select { padding-right: 32px; }
.tabla .cod { font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }

/* ─── En vivo ─── */
.vivo { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; }
.vivo-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.vivo-cab h3 { font-size: var(--ts-destacado); margin: 0 0 4px; }
.vivo .estado-cons { margin-bottom: 16px; }
.vivo-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.vivo-kpis div { background: var(--fondo); border-radius: var(--radio-flotante); padding: 12px 12px; }
.vivo-kpis b { display: block; font-size: var(--ts-numero); font-weight: 800; color: var(--azul); line-height: 32px; font-variant-numeric: tabular-nums; }
.vivo-kpis small { font-size: var(--ts-pequeno); color: var(--texto-suave); font-weight: 500; }
.vivo-dato { display: flex; align-items: flex-start; gap: 8px; font-size: var(--ts-base); color: var(--texto-suave); padding: 8px 0; border-top: 1px solid var(--graf-pista); }
.vivo-dato svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--azul); }
.vivo-dato b { color: var(--texto); font-weight: 500; }
.vivo-personas { display: flex; flex-wrap: wrap; gap: 8px; }
.vivo-personas span { background: var(--azul-claro); color: var(--azul); border-radius: var(--radio-pastilla); padding: 2px 12px; font-size: var(--ts-pequeno); font-weight: 500; }
.vivo .boton { margin-top: 12px; }
.chip .punto-vivo { width: 7px; height: 7px; margin-right: 4px; vertical-align: 1px; }

/* ─── Horarios ─── */
.horario td { white-space: nowrap; }
.horario input[type=time] { width: 130px; }
.horario input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--azul); }
.dias-turno { display: grid; gap: 8px; }
.dia-turno { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 8px; align-items: center; }

/* Permisos por sección (decisión P2, boceto aprobado 14-oct-2026): secciones a la izquierda con su cuenta, permisos a la derecha.
   Se usa al editar un rol y los permisos de una persona (De Su Rol gris · Agregado verde · Quitado rojo, E-2) */
.perm-resumen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.perm-resumen .espacio { flex: 1; }
.perm-dos { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; min-height: 360px; margin-bottom: 16px; }
.perm-secc { display: flex; flex-direction: column; gap: 4px; }
.perm-secc button { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: var(--btn-m); padding: 0 12px; border: 0; border-radius: var(--radio-control); background: none; font: inherit; font-weight: 500; color: var(--texto); cursor: pointer; text-align: left; }
.perm-secc button:hover { background: var(--azul-claro); color: var(--azul); }
.perm-secc button.on { background: var(--azul); color: var(--blanco); }
.perm-secc em { font-style: normal; font-size: var(--ts-pequeno); font-variant-numeric: tabular-nums; white-space: nowrap; }
.perm-punto { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--naranja); vertical-align: middle; }
.perm-lista { align-self: start; padding: 4px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-flotante); }
.perm-fila { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; cursor: pointer; }
.perm-fila + .perm-fila { border-top: 1px solid var(--borde); }
.perm-fila:hover { background: var(--azul-tenue); }
.perm-fila > span:first-of-type { flex: 1; }
.perm-de { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* ─── Sala: pantallas y publicidad ─── */
.subir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--fondo); border: 1.5px dashed var(--azul-borde); border-radius: var(--radio-flotante); padding: 12px 16px; margin-bottom: 16px; }
.subir input[type=file] { font-size: var(--ts-base); }
.anuncios-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.anuncio { border: 1px solid var(--borde); border-radius: var(--radio-contenedor); overflow: hidden; background: var(--blanco); }
.anuncio .prev { height: 230px; background: var(--fondo); display: flex; align-items: center; justify-content: center; }
.anuncio .prev img, .anuncio .prev video { max-width: 100%; max-height: 100%; }
.anuncio .datos { padding: 12px; display: grid; gap: 8px; font-size: var(--ts-pequeno); color: var(--texto-suave); }
.anuncio .datos label:not(.casilla) { display: grid; gap: 3px; font-weight: 500; }
.anuncio .datos input { font-size: var(--ts-base); padding: 0 8px; }
.anuncio .datos .aT { font-weight: 700; }
.anuncio.inactivo { opacity: .6; }
.anuncio .botones { display: flex; gap: 8px; }
.anuncio .botones .boton { flex: 1; }
.codigo-vinc { font-size: var(--ts-display); line-height: 44px; font-weight: 800; letter-spacing: .25em; color: var(--azul); text-align: center; padding: 12px; background: var(--azul-claro); border-radius: var(--radio-flotante); margin: 12px 0; }

/* ─── Reglas, ticket y sonido ─── */
.config-campo { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--graf-pista); }
.config-campo:last-of-type { border-bottom: 0; }
.config-campo > div > label:first-child { display: block; font-size: var(--ts-base); font-weight: 500; }
.config-campo .heredado { font-size: var(--ts-pequeno); font-weight: 500; color: var(--texto-suave); margin-top: 4px; }
.config-campo input, .config-campo select, .config-campo textarea { font-size: var(--ts-base); padding: 8px 12px; border-radius: var(--radio-control); }
.config-campo input, .config-campo select { height: 40px; }
.config-campo select { padding-right: 36px; }
@media (max-width: 800px) { .config-campo { grid-template-columns: 1fr; } }

.acciones-der { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Ajustes de tablas largas (historial, bitácora) */
.tabla .chip { white-space: nowrap; }
#hTabla .tabla, #bTabla .tabla { font-size: var(--ts-base); } #hTabla .tabla td, #bTabla .tabla td { line-height: 20px; }
#hTabla td:nth-child(-n+3), #hTabla td:nth-child(6), #hTabla td:nth-child(8), #hTabla td:nth-child(9), #bTabla td:first-child { white-space: nowrap; }
.chip.azul { background: var(--azul-claro); color: var(--azul); }

/* Tipos de cliente */
.tc-rangos { display: flex; height: 30px; margin-bottom: 8px; border-radius: var(--radio-control); overflow: hidden; font-size: var(--ts-pequeno); font-weight: 700; color: var(--texto); }
.tc-rangos div.oscuro { color: var(--blanco); }
.tc-rangos div { display: grid; place-items: center; min-width: 0; overflow: hidden; white-space: nowrap; }
.tc-valores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; padding: 12px 0; border-top: 1px solid var(--graf-pista); }
.tc-valores:first-of-type { border-top: 0; }
.tc-valores > .etq { grid-column: 1 / -1; margin-bottom: 4px; }
.tc-valor { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 8px 0; font-weight: 500; }
.tc-valor input { height: 36px; padding: 8px 12px; border-radius: var(--radio-control); font-size: var(--ts-base); text-align: right; }
.config-campo input[type=number] { width: 120px; margin-right: 8px; text-align: right; }


/* Ventana de catálogo con campos en dos columnas (Proveedores): renglones sin espacio extra, la casilla separada del campo */
.modal .dos-col { gap: 0 16px; }
.modal .dos-col + .casilla { margin-bottom: 16px; }

/* Configuración › Productos: piezas del nombre (con asa ⋮⋮) y vista previa a la derecha */
.alternar-areas { margin: 4px 0 16px; }
.nombre-piezas { align-items: start; } .nombre-piezas > div { position: relative; }   /* las casillas ocultas se quedan dentro (P-1) */
.nombre-vista { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--borde); border-radius: var(--radio-flotante); }
.nombre-vista b { font-size: var(--ts-base); font-weight: 700; color: var(--texto); }
.tabla-caja-modal { max-height: 50vh; overflow-y: auto; margin: 12px 0; border: 1px solid var(--borde); border-radius: var(--radio-flotante); }
#ordValores { display: flex; flex-direction: column; }
.sub-sec { margin: 20px 0 4px; font-size: var(--ts-destacado); font-weight: 700; }
/* Lista de entrada (PL9): interruptores y "por página" uno debajo de otro, junto a las columnas */
.le-opciones { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.le-opciones .campo { width: 200px; }
.us-acc { display: flex; gap: 8px; justify-content: flex-end; }
.cat-aviso { margin: 0 0 12px; }   /* explicación larga de un catálogo a todo lo ancho (M-10) */
.cat-nota { margin: 0 0 12px; }
.anuncios-lista > .vacio { grid-column: 1 / -1; }   /* el estado vacío ocupa todo el ancho de la lista */
.anuncio .datos input { height: var(--campo); }   /* campos de 40 (C-1) */

/* Panel (15-oct-2026): casilla de tabla igual que en las listas (C-8) y tablas anchas en una sola línea con desplazamiento */
.pantalla-admin .tabla .c-chk { width: 40px; padding-right: 0; }
.pantalla-admin .tabla.una-linea :is(th, td) { white-space: nowrap; }

/* Configuración › Servicios (docs/SERVICIOS.md): tabla de categorías con campos de 36 (C-1) */
.cfg-cats { width: 100%; }
.cfg-cats .mini-num { width: 96px; text-align: center; }
.cfg-cats th.num { text-align: center; }
.cfg-cats td:nth-child(2) input { width: 100%; }

/* Configuración › Empresa › Logotipo (PD10): vista de cómo queda en la barra y requisitos */
.emp-logo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin: 12px 0 16px; }
.emp-logo-sub { font-size: var(--ts-pequeno); font-weight: 700; color: var(--texto-suave); }
.emp-logo-barra { display: flex; align-items: center; justify-content: center; height: 72px; margin: 8px 0; padding: 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-control); }
.emp-logo-barra img { height: 48px; width: 223px; object-fit: contain; }
.emp-logo-req { display: grid; gap: 6px; align-content: start; }
.emp-logo-req b { font-size: var(--ts-pequeno); color: var(--texto-suave); }
@media (max-width: 900px) { .emp-logo { grid-template-columns: 1fr; } }
.emp-pestana { display: flex; align-items: center; gap: 8px; width: 240px; height: 36px; margin: 8px 0; padding: 0 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px 10px 0 0; font-size: var(--ts-pequeno); white-space: nowrap; overflow: hidden; }
.emp-pestana-ico { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.emp-pestana-ico img { width: 18px; height: 18px; object-fit: contain; }
.emp-pestana-ico b { width: 18px; height: 18px; border-radius: 50%; background: var(--azul); color: var(--blanco); font-size: 11px; display: flex; align-items: center; justify-content: center; }