:root { color-scheme: dark; --bg: #111518; --panel: #1b2227; --border: #37434b; --text: #f3f5f6; --muted: #b5c1c9; --accent: #efb76b; --success: #86d7a5; --success-ink: #10291b; --danger: #ef929b; --danger-ink: #351419; --danger-surface: #342126; --neutral: #29343c; --control-border: #71818c; }
/* Usuarios: lista vertical en móvil y confirmaciones nativas sin JavaScript. */
.usuarios-modulo { min-width: 0; overflow-wrap: anywhere; }
.usuarios-modulo .panel { margin-block: 18px; min-width: 0; }
.usuarios-modulo label { display: block; font-weight: 650; margin-bottom: 6px; }
.usuarios-modulo input:not([type=hidden]):not([type=checkbox]), .usuarios-modulo select { width: 100%; min-width: 0; min-height: 48px; padding: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--control-border); border-radius: 8px; font: inherit; }
.usuarios-modulo button, .usuarios-modulo .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.usuarios-form, .usuarios-filtros { display: grid; gap: 16px; }
.usuarios-form-panel { max-width: 760px; }
.usuarios-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: start; margin-block: 12px; min-width: 0; }
.usuarios-acciones p { width: 100%; margin: 4px 0; }
.usuarios-lista { list-style: none; padding: 0; }
.usuarios-fila, .usuarios-cabecera { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.usuarios-fila { margin-block: 14px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.usuarios-fila > div { min-width: 0; }
.usuarios-cabecera { display: none; }
.usuarios-etiqueta { display: block; font-size: 13px; color: var(--muted); }
.usuarios-modulo .usuarios-activo { background: #163627; color: var(--success); }
.usuarios-modulo .usuarios-inactivo { background: var(--neutral); color: var(--muted); }
.usuarios-confirmacion { min-width: 0; max-width: 100%; }
.usuarios-confirmacion summary { display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 12px; border: 1px solid var(--danger); border-radius: 10px; cursor: pointer; }
.usuarios-confirmacion form { padding-block: 12px; }
.usuarios-modulo .usuarios-check { display: flex; gap: 12px; align-items: center; min-height: 48px; margin-block: 14px; cursor: pointer; }
.usuarios-check input { width: 48px; height: 48px; flex: 0 0 48px; accent-color: var(--accent); }
@media (min-width: 760px) { .usuarios-filtros { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } .usuarios-filtros .usuarios-acciones { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
    .usuarios-fila, .usuarios-cabecera { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .6fr) minmax(0, .6fr) minmax(0, 1.9fr); align-items: start; }
    .usuarios-cabecera { display: grid; padding: 0 18px; color: var(--muted); }
    .usuarios-etiqueta { display: none; }
    .usuarios-fila .usuarios-acciones { margin: 0; }
}
/* Caja y compras: controles táctiles y confirmación accesible en celular. */
.caja-modulo { min-width: 0; overflow-wrap: anywhere; }
.caja-modulo [hidden] { display: none !important; }
.caja-modulo .panel { margin-block: 18px; min-width: 0; }
.caja-form { display: grid; gap: 12px; }
.caja-modulo input, .caja-modulo select, .caja-modulo textarea { scroll-margin-bottom: 140px; }
.caja-form input:not([type=checkbox]):not([type=hidden]), .caja-form select, .caja-form textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px; color: var(--text); background: var(--bg); border: 1px solid var(--control-border); border-radius: 8px; font: inherit; }
.caja-form label, .caja-form legend { font-weight: 650; }
.caja-form fieldset { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; display: grid; gap: 10px; }
.caja-check { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.caja-check input { width: 26px; height: 26px; accent-color: var(--accent); }
.caja-columnas, .caja-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.caja-cifras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.caja-cifras dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.caja-linea { padding-block: 14px; border-bottom: 1px solid var(--border); }
.caja-total { font-size: 24px; font-weight: 750; }
.caja-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 16px; padding: 16px; background: var(--panel); border-top: 1px solid var(--border); position: sticky; bottom: 0; z-index: 2; }
@media (max-width: 650px) {
    .caja-columnas, .caja-lista { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .caja-modulo .panel { padding: 18px; }
    .caja-barra { bottom: 0; padding: 12px 0; }
    .caja-barra button { flex: 1; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border: 1px solid var(--control-border); border-radius: 10px; background: var(--neutral); color: var(--text); font-weight: 700; cursor: pointer; }
button:hover, .button:hover { filter: brightness(1.08); }
button:disabled { opacity: .55; cursor: not-allowed; }
.secondary { background: transparent; color: var(--text); border: 1px solid var(--control-border); }
.action-success { background: var(--success); color: var(--success-ink); border-color: var(--success); }
.action-highlight { background: var(--accent); color: #211a12; border-color: var(--accent); }
.action-danger { background: var(--danger); color: var(--danger-ink); border-color: var(--danger); }
.action-danger-outline { background: var(--danger-surface); color: var(--danger); border-color: var(--danger); }
.icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
button .icon, .button .icon, summary .icon, label .icon { width: 20px; height: 20px; }
button > span, .button > span { min-width: 0; }
.page-heading h1 { display: flex; align-items: center; gap: 12px; }
.page-heading h1 .icon { width: 32px; height: 32px; color: var(--accent); }
.module-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: #342d24; color: var(--accent); }
.module-icon .icon { width: 30px; height: 30px; }
.action-disclosure { font-weight: 700; }
.action-disclosure .icon { margin-right: 6px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 5; padding: 12px; background: var(--accent); color: #111; }
.skip-link:focus { top: 12px; }
.topbar { display: flex; align-items: center; gap: 20px; padding: 20px 32px; border-bottom: 1px solid var(--border); background: var(--panel); }
.brand { font-size: 25px; font-weight: 850; letter-spacing: .12em; line-height: 1.2; }
.brand span { display: block; font-size: 10px; letter-spacing: .25em; color: var(--accent); margin-top: 6px; }
.user-info { margin-left: auto; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.user-info span { display: block; color: var(--muted); font-size: 13px; }
.navigation { padding: 12px 32px; border-bottom: 1px solid var(--border); }
.navigation summary { min-height: 48px; padding: 12px 4px; cursor: pointer; font-weight: 650; }
.navigation nav { display: flex; flex-wrap: wrap; gap: 6px; }
.navigation a { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; border-radius: 8px; color: var(--muted); }
.navigation a:hover, .navigation a[aria-current="page"] { color: var(--text); background: #303a42; }
.content { max-width: 1240px; margin: 0 auto; padding: 40px 32px 60px; min-height: 65vh; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; }
h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.2; margin: 10px 0 16px; }
h2 { font-size: 22px; line-height: 1.3; }
.intro, .muted { color: var(--muted); }
.intro { margin-bottom: 28px; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.module-card { display: block; min-height: 185px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.module-card:hover { border-color: var(--accent); background: #242c32; }
.module-card h2 { margin: 20px 0 8px; }
.module-card p { color: var(--muted); margin: 0; }
.card-arrow { float: right; color: var(--accent); font-size: 24px; }
.panel { padding: 32px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.placeholder { max-width: 760px; }
.placeholder p { color: var(--muted); }
.placeholder .button { margin-top: 16px; }
.badge { display: inline-block; padding: 5px 10px; border-radius: 6px; color: var(--accent); background: #342d24; font-size: 13px; }
.login-shell { display: grid; place-items: center; min-height: 90vh; padding: 32px 16px; }
.login-panel { width: 100%; max-width: 460px; }
.login-panel .brand { margin: 0 0 36px; }
.login-form { display: grid; gap: 10px; margin-top: 24px; }
.login-form label { font-weight: 600; }
.login-form input { width: 100%; min-height: 50px; padding: 12px; border: 1px solid #62737e; border-radius: 8px; background: #10171b; color: var(--text); margin-bottom: 12px; }
.notice { padding: 14px; background: #302a20; border: 1px solid #947340; border-radius: 8px; }
.error { background: #3b2528; border-color: #c98289; }
/* Notificación global: el bloque permanece en flujo hasta que JS habilita el toast. */
.notificacion { --aviso-color: #93caff; --aviso-fondo: #172f43; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; max-width: 640px; margin: 0 auto 20px; padding: 12px; color: var(--aviso-color); background: var(--aviso-fondo); border: 1px solid var(--aviso-color); border-left-width: 4px; border-radius: 12px; box-shadow: 0 8px 28px #0005; }
.notificacion[hidden], .notificacion [hidden] { display: none !important; }
.notificacion--success { --aviso-color: #a3ecc0; --aviso-fondo: #163627; }
.notificacion--error { --aviso-color: #ffabb2; --aviso-fondo: #421f27; }
.notificacion--warning { --aviso-color: #f5cc89; --aviso-fondo: #3a2e19; }
.notificacion--info { --aviso-color: #93caff; --aviso-fondo: #172f43; }
.notificacion--destructive-success { --aviso-color: #ffb3c0; --aviso-fondo: #40222e; }
.notificacion > .icon { margin-top: 12px; }
.notificacion-texto { margin: 0; padding-block: 10px; min-width: 0; overflow-wrap: anywhere; white-space: pre-line; }
.notificacion .notificacion-cerrar { min-width: 48px; width: 48px; min-height: 48px; padding: 0; background: transparent; color: inherit; border-color: currentColor; }
.notificacion--flotante { position: fixed; z-index: 4; top: calc(env(safe-area-inset-top, 0px) + 160px); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); margin-inline: auto; animation: notificacion-entrada 160ms ease-out; }
.notificacion--flotante .notificacion-texto { max-height: min(6rem, 30vh); max-height: min(6rem, 30dvh); overflow-y: auto; }
/* Espacio acotado al aviso visible: no superponer las primeras acciones tras el redirect. */
.content:has(.notificacion--flotante:not([hidden])) { padding-top: calc(144px + env(safe-area-inset-top, 0px)); }
@keyframes notificacion-entrada { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .notificacion--flotante { animation: none; } }
.site-footer { display: grid; gap: 20px; align-items: center; padding: 24px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.6; }
.site-footer > * { min-width: 0; }
.footer-product { font-size: 13px; font-weight: 600; }
.developer-credit { justify-self: center; }
.developer-brand { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; }
.developer-credit img { width: 24px; height: 24px; flex: 0 0 auto; object-fit: contain; }
.developer-description { margin-top: 4px; }
@media (min-width: 760px) {
    .site-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
    .footer-copyright { text-align: left; }
    .developer-credit { justify-self: end; }
}
/* Pedidos: catálogo local y borrador, sin duplicar vistas por dispositivo. */
.pedidos-modulo { min-width: 0; overflow-wrap: anywhere; }
.pedidos-modulo [hidden] { display: none !important; }
.pedidos-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0; }
.pedidos-modulo button, .pedidos-modulo .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.pedidos-modulo input:not([type="hidden"]), .pedidos-modulo select, .pedidos-modulo textarea { width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; font: inherit; border: 1px solid #62737e; border-radius: 8px; background: #10171b; color: var(--text); }
.pedidos-modulo textarea { resize: vertical; }
.pedidos-modulo input, .pedidos-modulo textarea, .pedidos-modulo select { scroll-margin-bottom: 190px; }
.pedidos-modulo label { display: block; font-weight: 650; margin: 8px 0 6px; }
.pedidos-lista { list-style: none; display: grid; gap: 16px; padding: 0; }
.pedido-lista-card { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.pedido-lista-card h3 { margin: 0; }
.pedido-cabecera, .pedido-filtros { display: grid; gap: 12px; }
.pedido-cabecera { margin-bottom: 16px; }
.pedido-espacio { display: grid; gap: 24px; align-items: start; }
.pedido-espacio > *, .pedido-cabecera > *, .pedido-filtros > * { min-width: 0; }
.pedido-productos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.pedido-producto { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.pedido-producto h4, .pedido-linea h4 { font-size: 18px; margin: 0; }
.pedido-producto p { margin: 0; }
.pedido-agregar { margin-top: auto; width: 100%; }
.pedido-ingredientes summary, .pedido-cancelacion summary { min-height: 48px; padding: 12px 0; cursor: pointer; }
.pedido-ingredientes p { font-size: 14px; }
.pedido-ayuda { font-size: 14px; }
.pedido-lineas { display: grid; gap: 14px; }
.pedido-linea { min-width: 0; padding: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.pedido-linea p { white-space: pre-line; }
.pedido-cantidad { display: grid; grid-template-columns: 48px minmax(70px, 1fr) 48px; gap: 10px; align-items: center; max-width: 300px; }
.pedido-cantidad button { min-width: 48px; min-height: 48px; padding: 8px; font-size: 22px; }
.pedido-cantidad input { text-align: center; }
.pedido-barra { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-top: 24px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
.pedido-totales { flex: 1 1 180px; }
.pedido-totales strong, .pedido-totales span { display: block; }
.pedido-totales strong { font-size: 22px; }
.pedido-barra-acciones { display: flex; flex: 1 1 340px; flex-wrap: wrap; gap: 12px; }
.pedido-barra-acciones button { flex: 1 1 150px; padding: 12px; }
.pedido-barra > * { min-width: 0; }
.pedido-resumen { scroll-margin-top: 20px; }
.pedido-cancelacion { margin: 0 0 24px; border: 1px solid var(--danger); border-radius: 12px; scroll-margin-top: 16px; }
.pedido-cancelacion summary { padding: 12px 16px; border-radius: 11px; }
.pedido-cancelacion[open] summary { border-bottom: 1px solid var(--danger); border-radius: 11px 11px 0 0; }
.pedido-cancelacion form { padding: 0 16px 4px; }
.mesa-enlace { height: 100%; }
.mesa-enlace:hover { border-color: var(--accent); }
@media (max-width: 359px) { .pedido-productos { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 561px) {
    .pedido-cabecera, .pedido-filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pedido-ancho { grid-column: 1 / -1; }
    .pedidos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 800px) {
    .pedido-espacio { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
    .pedido-ver-resumen { display: none; }
}
@media (min-width: 1100px) { .pedido-espacio { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 560px) {
    .pedidos-modulo .panel { padding: 16px; }
    .pedidos-modulo > .pedidos-toolbar > * { flex: 1 1 100%; }
    .pedido-barra { gap: 10px; padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .pedido-barra-acciones { gap: 8px; }
    .pedido-barra-acciones button { flex-basis: 130px; }
}
@media (max-height: 600px) { .pedido-barra { position: static; } }
/* Mesas: tarjetas informativas del salón y mantenimiento separado. */
.mesas-modulo { min-width: 0; overflow-wrap: anywhere; }
.mesas-toolbar, .mesas-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mesas-toolbar, .mesas-filtro { margin-bottom: 24px; }
.mesas-grilla, .mesas-lista { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.mesas-grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mesa-tarjeta { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; min-height: 140px; padding: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; }
.mesa-tarjeta h2 { font-size: 23px; margin: 0; }
.mesa-estado { margin: 0; color: var(--muted); }
.mesa-con-pedido { border-color: var(--accent); }
.mesa-con-pedido .mesa-estado { color: var(--accent); }
.mesas-form-panel { max-width: 640px; margin-bottom: 28px; }
.mesas-form-panel h2 { margin-top: 0; }
.mesas-form { display: grid; gap: 18px; }
.mesas-modulo label { display: block; font-weight: 650; margin-bottom: 6px; }
.mesas-modulo input:not([type="hidden"]), .mesas-modulo select { width: 100%; min-width: 0; min-height: 48px; font: inherit; color: var(--text); background: #10171b; border: 1px solid #62737e; border-radius: 8px; padding: 10px 12px; }
.mesas-modulo [aria-invalid="true"] { border-color: #c98289; }
.mesas-ayuda { margin: 8px 0 0; font-size: 14px; }
.mesas-error-campo { color: #ffbbc3; margin: 8px 0 0; }
.mesas-filtro { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.mesas-filtro > div { flex: 1; min-width: 0; max-width: 340px; }
.mesas-fila { display: grid; gap: 12px; align-items: center; min-width: 0; padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; }
.mesas-fila > * { min-width: 0; }
.mesas-fila h3 { margin: 0; font-size: 20px; }
.mesas-fila > .badge { justify-self: start; }
.mesa-inactiva { background: #303a42; color: var(--text); }
.mesas-modulo .button, .mesas-modulo button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.mesas-confirmacion { max-width: 100%; }
.mesas-confirmacion summary { min-height: 48px; padding: 12px; border: 1px solid var(--danger); border-radius: 8px; cursor: pointer; }
.mesas-confirmacion[open] { flex-basis: 100%; }
.mesas-acciones form { margin: 0; max-width: 100%; }
.mesas-solo-lectores { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 359px) { .mesas-grilla { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 561px) {
    .mesas-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mesas-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .mesas-fila .mesas-acciones { grid-column: 1 / -1; }
}
@media (min-width: 760px) { .mesas-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    .mesas-fila { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr); }
    .mesas-fila .mesas-acciones { grid-column: auto; justify-content: flex-end; }
}
@media (min-width: 1050px) { .mesas-grilla { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mesas-grilla { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .mesas-modulo .panel { padding: 20px 16px; }
    .mesas-toolbar > *, .mesas-form .mesas-acciones > * { flex: 1 1 100%; }
    .mesas-acciones form button { width: 100%; }
}
/* Catálogo: una estructura adaptable, sin depender de JavaScript. */
.catalogo { min-width: 0; overflow-wrap: anywhere; }
.catalogo-toolbar, .catalogo-acciones, .catalogo-paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.catalogo-toolbar, .catalogo-filtros { margin-bottom: 24px; }
.catalogo-paginacion { margin-top: 24px; }
.catalogo input:not([type="hidden"]), .catalogo select, .catalogo textarea { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px 12px; border: 1px solid #62737e; border-radius: 8px; background: #10171b; color: var(--text); font: inherit; }
.catalogo textarea { resize: vertical; }
.catalogo-descripcion { margin: 6px 0 0; font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.catalogo label { display: block; margin-bottom: 6px; font-weight: 650; }
.catalogo button, .catalogo .button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
.catalogo-filtros { display: grid; gap: 12px; align-items: end; }
.catalogo-search-row { display: flex; gap: 8px; }
.catalogo-search-row input { flex: 1; }
.catalogo-search-row button { flex-shrink: 0; }
.catalogo-filtros-extra { min-width: 0; }
.catalogo-filtros-extra summary, .catalogo-confirmacion summary { min-height: 48px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.catalogo-confirmacion summary { border-color: var(--danger); }
.catalogo-filtros-campos { display: grid; gap: 12px; align-items: end; margin-top: 12px; }
.catalogo-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.catalogo-producto, .catalogo-categoria-fila { display: grid; gap: 12px; align-items: center; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); min-width: 0; }
.catalogo-producto > *, .catalogo-categoria-fila > *, .catalogo-form > *, .catalogo-filtros > *, .catalogo-filtros-campos > * { min-width: 0; }
.catalogo-producto h2, .catalogo-categoria-fila h3 { margin: 0; font-size: 19px; }
.catalogo-precio { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.catalogo-etiqueta { display: block; color: var(--muted); font-size: 14px; font-weight: 400; }
.catalogo-inactivo { background: #303a42; color: var(--text); }
.catalogo-cabecera { display: none; }
.catalogo-acciones form { margin: 0; max-width: 100%; }
.catalogo-acciones p { margin: 8px 0; }
.catalogo-confirmacion { max-width: 100%; }
.catalogo-confirmacion[open] { width: 100%; }
.catalogo-confirmacion form { padding-top: 8px; }
.catalogo-form-panel { max-width: 760px; }
.catalogo-form-panel h2 { margin-top: 0; }
.catalogo-form { display: grid; gap: 20px; }
.catalogo-ayuda { font-size: 14px; margin: 8px 0 0; }
.catalogo .notice { margin-bottom: 20px; }
@media (min-width: 561px) {
    .catalogo-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .catalogo-campo-completo { grid-column: 1 / -1; }
    .catalogo-filtros-campos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .catalogo-producto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .catalogo-producto .catalogo-nombre { grid-column: 1; }
    .catalogo-producto .catalogo-precio { grid-column: 2; grid-row: 1; text-align: right; }
    .catalogo-producto .catalogo-acciones { grid-column: 1 / -1; }
    .catalogo-categoria-fila { grid-template-columns: minmax(0, 1fr) auto; }
    .catalogo-categoria-fila .catalogo-acciones { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
    .catalogo-filtros { grid-template-columns: minmax(180px, 1fr) minmax(0, 1.8fr) auto; }
    .catalogo-filtros-extra > summary { display: none; }
    .catalogo-filtros-extra::details-content { content-visibility: visible; display: block; }
    .catalogo-filtros-extra > .catalogo-filtros-campos { display: grid; margin-top: 0; }
    .catalogo-cabecera, .catalogo-producto { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 2fr); gap: 14px; }
    .catalogo-cabecera { padding: 12px 20px; color: var(--muted); font-weight: 650; }
    .catalogo-producto .catalogo-precio, .catalogo-producto .catalogo-nombre, .catalogo-producto .catalogo-acciones { grid-column: auto; grid-row: auto; text-align: left; }
    .catalogo-etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .catalogo-producto .catalogo-acciones { align-items: stretch; }
    .catalogo-categoria-fila { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .catalogo-categoria-fila .catalogo-acciones { grid-column: auto; justify-content: flex-end; }
}
@media (max-width: 560px) {
    .catalogo .panel { padding: 20px 16px; }
    .catalogo-toolbar > .button, .catalogo-form .catalogo-acciones > * { flex: 1 1 100%; }
    .catalogo-producto .catalogo-acciones > .button, .catalogo-producto .catalogo-acciones > form, .catalogo-producto .catalogo-acciones > details { flex: 1 1 120px; }
    .catalogo-acciones form button { width: 100%; }
    .catalogo-precio { font-size: 22px; }
}
.reportes-modulo { display: grid; gap: 24px; min-width: 0; overflow-wrap: anywhere; }
.reportes-modulo .panel { padding: 20px 16px; min-width: 0; }
.reportes-modulo h2 { display: flex; align-items: center; gap: 10px; }
.reportes-modulo h3 { font-size: 17px; margin: 0 0 12px; }
.reportes-modulo p { line-height: 1.55; }
.reportes-modulo .reportes-alcance { color: var(--muted); font-size: 15px; }
.reportes-modulo .reportes-filtros { display: grid; gap: 16px; }
.reportes-modulo label { display: grid; gap: 8px; min-width: 0; }
.reportes-modulo input, .reportes-modulo select { min-height: 48px; min-width: 0; width: 100%; }
.reportes-modulo .reportes-acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.reportes-modulo .reportes-acciones > * { flex: 1 1 130px; }
.reportes-modulo .reportes-tarjetas, .reportes-modulo .reportes-columnas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.reportes-modulo .reportes-numero { font-size: clamp(26px, 3vw, 36px); font-weight: 750; line-height: 1.2; margin: 16px 0; font-variant-numeric: tabular-nums; }
.reportes-modulo .reportes-resultado { margin-top: 16px; border-top: 3px solid var(--accent); }
.reportes-modulo .reportes-positivo { color: var(--success); }
.reportes-modulo .reportes-negativo { color: var(--danger); }
.reportes-modulo table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }
.reportes-modulo th, .reportes-modulo td { padding: 12px 4px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.reportes-modulo th:first-child, .reportes-modulo td:first-child { width: 38%; text-align: left; }
.reportes-modulo th:last-child, .reportes-modulo td:last-child { width: 22%; }
.reportes-modulo caption { text-align: left; font-size: 18px; font-weight: 650; padding: 12px 0; }
.reportes-modulo details { margin-top: 16px; border-top: 1px solid var(--border); }
.reportes-modulo summary { cursor: pointer; min-height: 48px; padding: 14px 4px; line-height: 1.5; font-weight: 650; }
.reportes-modulo summary:hover { color: var(--accent); }
.reportes-modulo .reportes-fila { padding: 20px 0; border-bottom: 1px solid var(--border); display: grid; gap: 12px; min-width: 0; }
.reportes-modulo .reportes-fila p { margin: 8px 0; }
.reportes-modulo .reportes-cifras { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px 16px; margin: 16px 0; align-content: start; }
.reportes-modulo .reportes-cifras dt { color: var(--muted); }
.reportes-modulo .reportes-cifras dd { margin: 0; text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.reportes-modulo .reportes-paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.reportes-modulo .reportes-paginacion p { flex-basis: 100%; margin: 0; }
@media (max-width: 560px) {
    .reportes-modulo .reportes-acciones > * { flex-basis: 100%; }
}
@media (min-width: 700px) {
    .reportes-modulo .panel { padding: 24px; }
    .reportes-modulo .reportes-filtros, .reportes-modulo .reportes-tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reportes-modulo .reportes-acciones { grid-column: 1 / -1; }
    .reportes-modulo .reportes-fila { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; }
}
@media (min-width: 1100px) {
    .reportes-modulo .reportes-filtros, .reportes-modulo .reportes-tarjetas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .reportes-modulo .reportes-acciones { justify-content: flex-end; }
    .reportes-modulo .reportes-acciones > * { flex: 0 1 auto; }
    .reportes-modulo .reportes-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .navigation summary { display: none; } }
@media (max-width: 899px) { .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .navigation nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .topbar { padding: 16px; gap: 12px; } .brand { font-size: 22px; } .user-info { font-size: 13px; } .navigation { padding: 8px 16px; } .content { padding: 28px 16px; } .module-grid { grid-template-columns: 1fr; gap: 12px; } .module-card { min-height: 140px; padding: 20px; } .module-card h2 { margin-top: 12px; } .panel { padding: 24px; } }