/*
 * Sistema de diseño del panel: UN solo archivo, con versión en la dirección (?v=) para que el navegador lo guarde en caché.
 * Sin fuentes externas (se usa la del sistema operativo) ni imágenes: no suma pedidos a internet.
 * Orden: 1 base · 2 estructura · 3 barra superior · 4 íconos y botones · 5 etiquetas y avisos · 6 formularios · 7 tablas · 8 tarjetas y panel · 9 móvil · 10 impresión.
 * Lo que va bajo `body.panel` son estilos por defecto de los elementos (label, input, table...) y solo se aplican a las páginas simples;
 * las pantallas complejas (consulta) conservan los suyos y solo toman la estructura, la barra, los botones y los íconos.
 */

/* ---------------------------------------------------------------- 1 base */
:root {
    --azul: #3f66ad; --azul-osc: #2f4f8f; --azul-claro: #eef3fc; --azul-borde: #c5d6f2;
    --btn-fondo: #b9cff0; --btn-fondo-hover: #a6c0ea; --btn-texto: #1e3a6e;          /* boton principal: azul pastel con texto azul marino */
    --peligro-fondo: #f3c3c3; --peligro-fondo-hover: #ecaeae; --peligro-texto: #7a2b2b;
    --texto: #1f2937; --titulo: #0f172a; --suave: #5a6a82; --borde: #e2e8f0; --fondo: #f5f7fb; --blanco: #fff;
    --rojo: #b55454; --rojo-osc: #a94848; --rojo-claro: #fdf4f4; --rojo-borde: #f3cccc;
    --verde: #3b8660; --verde-claro: #f2faf5; --ambar: #a1672f; --ambar-claro: #fefaf0; --ambar-borde: #f3dfa6;
    --radio: 14px; --radio-s: 10px;
    --sombra: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 16px rgba(15, 23, 42, .06);
    --sombra-alta: 0 8px 28px rgba(15, 23, 42, .14);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--texto); background: var(--fondo); line-height: 1.5; font-size: 16px; }
img, svg { max-width: 100%; }
a { color: var(--azul); }
a:hover { color: var(--azul-osc); }
h1, h2, h3, legend { color: var(--titulo); line-height: 1.25; }
:focus-visible { outline: 3px solid rgba(95, 135, 205, .4); outline-offset: 2px; }

/* ---------------------------------------------------------------- 2 estructura: el contenido va centrado y con ancho máximo */
.pagina { width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.25rem clamp(.8rem, 3vw, 1.75rem) 2.5rem; }
.pagina-estrecha { max-width: 760px; }
.pagina-ancha { max-width: 1240px; }
.pagina > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1.25rem; }
.pagina > header h1 { margin: 0; font-size: clamp(1.25rem, 3.4vw, 1.6rem); letter-spacing: -.01em; }
.pagina > header nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pie-app { max-width: 1120px; margin: 2rem auto 0; padding: 0 clamp(.8rem, 3vw, 1.75rem); }
.pie-app hr { border: none; border-top: 1px solid var(--borde); margin: 0 0 1rem; }
.footer-copyright { font-size: .75rem; color: #5f6870; text-align: center; margin: 0 0 1.5rem; }

/* ---------------------------------------------------------------- 3 barra superior (fija arriba) */
.barra-app { position: sticky; top: 0; z-index: 50; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.barra-app .interior { max-width: 1240px; margin: 0 auto; padding: 0 clamp(.8rem, 3vw, 1.75rem); height: 3.5rem; display: flex; align-items: center; gap: .75rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--titulo); text-decoration: none; letter-spacing: -.01em; margin-right: auto; }
.marca:hover { color: var(--titulo); }
.marca .logo { width: 2.1rem; height: 2.1rem; border-radius: 11px; background: linear-gradient(135deg, #bcd2f3, #9fbce9); color: #1e3a6e; display: grid; place-items: center; }
.marca .logo .i { width: 1.15rem; height: 1.15rem; stroke-width: 2.4; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; background: var(--azul-claro); color: var(--azul-osc); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.chip .i { width: .95rem; height: .95rem; }
.chip-clinica { max-width: 14rem; background: #f1f5f9; color: #334155; }
.chip-clinica span { overflow: hidden; text-overflow: ellipsis; }
.menu-usuario { position: relative; }
.menu-usuario > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem; padding: .25rem .45rem .25rem .25rem; border-radius: 999px; border: 1px solid transparent; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario > summary:hover, .menu-usuario[open] > summary { background: #f1f5f9; border-color: var(--borde); }
.avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--azul-claro); color: var(--azul-osc); font-weight: 700; font-size: .85rem; display: grid; place-items: center; flex: 0 0 auto; }
.nombre-usuario { font-size: .9rem; font-weight: 600; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-usuario .flecha { width: 1rem; height: 1rem; color: var(--suave); transition: transform .15s; }
.menu-usuario[open] .flecha { transform: rotate(180deg); }
.panel-menu { position: absolute; right: 0; top: calc(100% + .45rem); min-width: 16rem; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); padding: .4rem; z-index: 60; }
.cabecera-menu { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem .7rem; border-bottom: 1px solid var(--borde); margin-bottom: .3rem; }
.panel-menu a { display: flex; align-items: center; gap: .65rem; padding: .65rem .7rem; border-radius: var(--radio-s); color: var(--texto); text-decoration: none; font-size: .93rem; }
.panel-menu a:hover { background: #f1f5f9; }
.panel-menu a .i { color: var(--suave); }
.panel-menu a.salir, .panel-menu a.salir .i { color: var(--rojo-osc); }
.panel-menu a.salir:hover { background: var(--rojo-claro); }

/* ---------------------------------------------------------------- 4 íconos y botones */
.i { width: 1.1em; height: 1.1em; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.17em; }
/* El estilo base de boton solo va en botones SIN clase propia: los que traen clase (.opcion, .chip-quitar...) conservan su diseño. */
.btn, a.boton, :where(body.panel) button:not([class]), :where(body.panel) input[type="submit"]:not([class]) {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.05rem; min-height: 2.5rem; border-radius: var(--radio-s);
    border: 1px solid transparent; background: var(--btn-fondo); color: var(--btn-texto); font: inherit; font-size: .92rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
    transition: background-color .12s, border-color .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent;
}
.btn:hover, a.boton:hover, :where(body.panel) button:not([class]):hover, :where(body.panel) input[type="submit"]:not([class]):hover { background: var(--btn-fondo-hover); color: var(--btn-texto); }
.btn:active { transform: translateY(1px); }
.btn[disabled], button[disabled] { opacity: .55; cursor: not-allowed; }
.btn-sec { background: var(--blanco); color: var(--azul-osc); border-color: var(--azul-borde); }
.btn-sec:hover { background: var(--azul-claro); color: var(--azul-osc); }
.btn-fantasma { background: transparent; color: #475569; border-color: transparent; }
.btn-fantasma:hover { background: #e9edf3; color: var(--titulo); }
.btn-peligro { background: var(--peligro-fondo); color: var(--peligro-texto); }
.btn-peligro:hover { background: var(--peligro-fondo-hover); color: var(--peligro-texto); }
.btn-peligro-suave { background: var(--blanco); color: var(--rojo-osc); border-color: var(--rojo-borde); }
.btn-peligro-suave:hover { background: var(--rojo-claro); color: var(--rojo-osc); }
.btn-mini { min-height: 2.1rem; padding: .35rem .7rem; font-size: .85rem; border-radius: 8px; }
.btn-icono { padding: .5rem; min-width: 2.5rem; }
.btn-mini.btn-icono { min-width: 2.1rem; padding: .35rem; }

/* ---------------------------------------------------------------- 5 etiquetas, avisos y estados vacíos */
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #f1f5f9; color: #334155; }
.badge-pendiente, .badge-pagado { font-weight: 700; letter-spacing: .05em; }   /* estado del comprobante: MAYUSCULAS y negrita */
.badge-pendiente { background: #fef3c7; color: #8a5a2b; }
.badge-pagado { background: #d1fae5; color: #2d6a56; }
.inactivo { color: var(--rojo-osc); }
:where(body.panel) .error { background: var(--rojo-claro); color: #8b3a3a; border: 1px solid var(--rojo-borde); padding: .8rem 1rem; border-radius: var(--radio-s); margin: 0 0 1rem; font-size: .92rem; }
:where(body.panel) .aviso { background: var(--azul-claro); border: 1px solid var(--azul-borde); border-radius: var(--radio-s); padding: .9rem 1rem; margin: 0 0 1rem; }
:where(body.panel) .nota { background: var(--ambar-claro); border: 1px solid var(--ambar-borde); color: #8a5a2b; padding: .75rem 1rem; border-radius: var(--radio-s); margin: 0 0 1rem; font-size: .9rem; }
:where(body.panel) .vacio { color: var(--suave); text-align: center; padding: 2.5rem 1rem; background: var(--blanco); border: 1px dashed #cbd5e1; border-radius: var(--radio); }
:where(body.panel) .resumen, :where(body.panel) .subtitulo { color: var(--suave); font-size: .88rem; }

/* ---------------------------------------------------------------- 6 formularios (páginas simples) */
:where(body.panel) label { display: block; font-size: .87rem; font-weight: 600; color: #334155; margin: 0 0 .3rem; }
:where(body.panel) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="file"]), :where(body.panel) select, :where(body.panel) textarea {
    width: 100%; padding: .65rem .8rem; margin-bottom: 1rem; border: 1px solid #cbd5e1; border-radius: var(--radio-s); background: var(--blanco); color: var(--texto); font: inherit; font-size: 1rem;
}
:where(body.panel) input[type="file"] { max-width: 100%; margin-bottom: 1rem; }
:where(body.panel) input[type="checkbox"], :where(body.panel) input[type="radio"] { width: 1.1rem; height: 1.1rem; margin: 0 .45rem 0 0; accent-color: var(--azul); vertical-align: -.2em; }
:where(body.panel) input:focus, :where(body.panel) select:focus, :where(body.panel) textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(95, 135, 205, .22); }
:where(body.panel) fieldset { border: none; padding: 0; margin: 0 0 1.5rem; }
:where(body.panel) legend { font-weight: 700; margin-bottom: .75rem; padding: 0; font-size: 1.02rem; }
:where(body.panel) .fila { display: flex; gap: 1rem; }
:where(body.panel) .fila > div { flex: 1; min-width: 0; }
:where(body.panel) .pagina > form, :where(body.panel) .pagina > .caja { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--sombra); }
:where(body.panel) .pagina-estrecha > form { margin-left: auto; margin-right: auto; max-width: 100%; }
:where(body.panel) form.accion { display: inline; background: none; border: none; padding: 0; box-shadow: none; }
a.cancelar { color: #64748b; text-decoration: none; }

/* ---------------------------------------------------------------- 7 tablas (páginas simples); en el móvil cada fila pasa a ser una tarjeta */
.tabla-scroll { overflow-x: auto; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
:where(body.panel) table { width: 100%; border-collapse: collapse; background: var(--blanco); }
:where(body.panel) .pagina > table { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
:where(body.panel) th, :where(body.panel) td { text-align: left; padding: .75rem .85rem; border-bottom: 1px solid var(--borde); font-size: .92rem; vertical-align: middle; }
:where(body.panel) th { color: var(--suave); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; background: #f8fafc; white-space: nowrap; }
:where(body.panel) tbody tr:last-child td { border-bottom: none; }
:where(body.panel) tbody tr:hover td { background: #f8fafc; }
:where(body.panel) td .btn-mini + .btn-mini, :where(body.panel) td form.accion { margin-left: .25rem; }
:where(body.panel) td:last-child { white-space: nowrap; }
:where(body.panel) .barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
:where(body.panel) .buscador { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 18rem; }
:where(body.panel) .buscador input[type="search"] { flex: 1 1 14rem; width: auto; margin: 0; max-width: 28rem; }
:where(body.panel) .paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 1.5rem 0; }

/* ---------------------------------------------------------------- 8 tarjetas y pantalla de inicio */
:where(body.panel) .tarjeta, :where(body.panel) .item { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.1rem; box-shadow: var(--sombra); }
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: linear-gradient(135deg, #c9dbf8, #b8cff4 60%, #a9c5f1); color: #1e3a6e; border-radius: var(--radio); padding: clamp(1.1rem, 3vw, 1.75rem); box-shadow: var(--sombra); margin-bottom: 1.25rem; }
.hero h1 { color: #1e3a6e; margin: 0 0 .35rem; font-size: clamp(1.3rem, 4vw, 1.8rem); }
.hero p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: #3a5688; }
.hero .chip { background: rgba(255, 255, 255, .6); color: #1e3a6e; }
.hero .btn-sec { background: rgba(255, 255, 255, .6); color: #1e3a6e; border-color: rgba(30, 58, 110, .22); }
.hero .btn-sec:hover { background: rgba(255, 255, 255, .82); color: #1e3a6e; }
.titulo-seccion { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); margin: 1.5rem 0 .6rem; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: .9rem; }
.tarjeta-menu { display: flex; align-items: center; gap: .9rem; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem; text-decoration: none; color: var(--texto); box-shadow: var(--sombra); transition: border-color .12s, transform .12s, box-shadow .12s; min-height: 5rem; }
.tarjeta-menu:hover { border-color: #93c5fd; transform: translateY(-2px); box-shadow: var(--sombra-alta); color: var(--texto); }
.tarjeta-menu .icono { width: 2.9rem; height: 2.9rem; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto; background: var(--azul-claro); color: var(--azul); }
.tarjeta-menu .icono .i { width: 1.45rem; height: 1.45rem; }
.tarjeta-menu .titulo { display: block; font-weight: 700; font-size: .98rem; color: var(--titulo); }
.tarjeta-menu .descripcion { display: block; font-size: .8rem; color: var(--suave); line-height: 1.35; margin-top: .1rem; }
.tm-verde .icono { background: #dcfce7; color: #3b8660; } .tm-ambar .icono { background: #fef3c7; color: #a1672f; } .tm-violeta .icono { background: #ede9fe; color: #6a50b0; }
.tm-rosa .icono { background: #fce7f3; color: #a64a70; } .tm-cian .icono { background: #cffafe; color: #3f7f90; } .tm-gris .icono { background: #e2e8f0; color: #334155; }

/* ---------------------------------------------------------------- 9 utilidades y móvil */
.txt-pc { display: inline; }
@media (max-width: 720px) {
    .txt-pc { display: none; }
    .nombre-usuario, .marca-texto { display: none; }
    .chip-clinica { max-width: 9rem; }
    .pagina > header { align-items: flex-start; }
    .pagina > header nav { width: 100%; }
    :where(body.panel) .fila { flex-direction: column; gap: 0; }
    :where(body.panel) .barra { align-items: stretch; }
    :where(body.panel) .barra > .btn, :where(body.panel) .barra > a.boton { width: 100%; }
    .tarjetas { grid-template-columns: repeat(2, 1fr); gap: .65rem; }
    .tarjeta-menu { flex-direction: column; align-items: flex-start; text-align: left; padding: .9rem; gap: .6rem; min-height: 0; }
    .tarjeta-menu .descripcion { display: none; }
    .hero .btn-sec { width: 100%; }
    .panel-menu { position: fixed; left: .6rem; right: .6rem; top: 3.6rem; min-width: 0; }
    /* tablas: cada fila es una tarjeta con "etiqueta: valor" */
    :where(body.panel) table.tabla-resp, :where(body.panel) table.tabla-resp tbody, :where(body.panel) table.tabla-resp tr, :where(body.panel) table.tabla-resp td { display: block; width: 100%; }
    :where(body.panel) table.tabla-resp { border: none; box-shadow: none; background: transparent; }
    :where(body.panel) table.tabla-resp thead { display: none; }
    :where(body.panel) table.tabla-resp tr { background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: .75rem; padding: .35rem .9rem; }
    :where(body.panel) table.tabla-resp td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 1px solid #f1f5f9; padding: .55rem 0; text-align: right; white-space: normal; }
    :where(body.panel) table.tabla-resp td:last-child { border-bottom: none; justify-content: flex-end; }
    :where(body.panel) table.tabla-resp td::before { content: attr(data-label); color: var(--suave); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex: 0 0 38%; }
    :where(body.panel) table.tabla-resp td:not([data-label])::before, :where(body.panel) table.tabla-resp td[data-label=""]::before { display: none; }
    :where(body.panel) table.tabla-resp tbody tr:hover td { background: transparent; }
}
/* pantallas de la consulta (conservan sus estilos propios): formularios como tarjeta, a todo el ancho del contenedor centrado */
.panel-consulta.formulario-pagina .pagina-estrecha > form { max-width: 100%; margin-left: auto; margin-right: auto; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: clamp(1rem, 3vw, 1.75rem); box-shadow: var(--sombra); }
/* fichas (listas de datos), tarjetas de acceso y controles diminutos: que quepan en un telefono pequeño */
body.panel dd, body.panel strong, body.panel td { overflow-wrap: anywhere; }
.chip-quitar { position: relative; }
.chip-quitar::after { content: ""; position: absolute; inset: -.5rem; }   /* zona de toque amplia aunque el boton se vea chico */
body.auth { padding: .75rem; }
body.auth .caja { max-width: 100%; }
@media (max-width: 480px) {
    body.panel dl { grid-template-columns: 1fr; row-gap: .1rem; }
    body.panel dt { margin-top: .5rem; }
}
@media (max-width: 380px) { .tarjetas { grid-template-columns: 1fr; } .chip-clinica { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- 10 impresión: la barra y el pie no se imprimen */
@media print { .barra-app, .pie-app { display: none !important; } body { background: #fff; } .pagina { max-width: none; padding: 0; } }

/* Exportar datos (CSV) */
.formulario-exportar fieldset { border: 1px solid var(--borde, #e2e8f0); border-radius: 10px; margin: 0 0 1rem; padding: .8rem 1rem; max-width: 640px; }
.formulario-exportar legend { font-weight: 700; padding: 0 .4rem; }
.formulario-exportar label { display: block; margin: .35rem 0 .15rem; }
.formulario-exportar input[type="date"], .formulario-exportar select { max-width: 280px; }
.formulario-exportar input[type="radio"], .formulario-exportar input[type="checkbox"] { width: auto; margin-right: .4rem; }