:root {
    --azul: #0b5ea8;
    --azul-osc: #084680;
    --gris-fondo: #f2f5f8;
    --gris-borde: #d5dde5;
    --texto: #1d2733;
    --suave: #5d6b7a;
    --verde: #1e7e45;
    --rojo: #b3261e;
    --ambar: #8a5a00;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--gris-fondo);
    color: var(--texto);
    line-height: 1.5;
}
.barra {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 24px; background: var(--azul); color: #fff;
}
.barra .marca { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.1rem; }
.barra-usuario { display: flex; align-items: center; gap: 14px; }
.inline { display: inline; margin: 0; }
.contenedor { max-width: 1000px; margin: 24px auto; padding: 0 16px; }
body.publico .contenedor { max-width: 460px; margin-top: 8vh; }
h1 { margin: 0 0 12px; font-size: 1.6rem; }
h2 { margin: 0 0 10px; font-size: 1.2rem; }
.tarjeta {
    background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
    padding: 22px; margin-bottom: 22px;
}
.texto-suave { color: var(--suave); }
label { display: block; margin: 14px 0 4px; font-weight: 600; font-size: .92rem; }
input[type=text], input[type=password] {
    width: 100%; padding: 10px 12px; font-size: 1rem;
    border: 1px solid var(--gris-borde); border-radius: 6px;
}
input:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.btn {
    display: inline-block; padding: 10px 18px; font-size: .95rem; border-radius: 6px;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn-primario { background: var(--azul); color: #fff; margin-top: 20px; }
.btn-primario:hover { background: var(--azul-osc); }
.btn-secundario { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); padding: 6px 12px; }
.btn-secundario:hover { background: rgba(255,255,255,.15); }
.btn-ancho { width: 100%; }
.alerta { padding: 11px 14px; border-radius: 6px; margin-bottom: 14px; border: 1px solid; }
.alerta-error { background: #fdecea; border-color: #f3b8b3; color: var(--rojo); }
.alerta-exito { background: #e7f5ec; border-color: #a9d8ba; color: var(--verde); }
.alerta-aviso { background: #fff4de; border-color: #ecd199; color: var(--ambar); }
.etiqueta {
    display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0;
    background: #e3eefa; color: var(--azul-osc); border-radius: 12px; font-size: .85rem;
}
.etiqueta-area { background: #e7f5ec; color: var(--verde); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.modulo {
    display: flex; flex-direction: column; gap: 4px; padding: 16px;
    background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px;
}
.modulo-pendiente { opacity: .7; }
code { background: #eef2f6; padding: 1px 6px; border-radius: 4px; }
@media (max-width: 600px) {
    .barra { flex-direction: column; gap: 8px; }
}

/* ===== Paso 4: tablas, filtros, formularios ===== */
.barra { gap: 16px; flex-wrap: wrap; }
.menu { display: flex; gap: 6px; flex: 1; }
.menu a { color: #fff; text-decoration: none; padding: 6px 12px; border-radius: 6px; }
.menu a:hover { background: rgba(255,255,255,.18); }
.encabezado-pagina { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.encabezado-pagina h1 { margin: 0; }
.encabezado-pagina .btn, .filtros .btn { margin-top: 0; }
.filtros { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.filtros input[type=text], .filtros input[type=date], .filtros select {
    width: auto; min-width: 180px; padding: 9px 12px; font-size: .95rem;
    border: 1px solid var(--gris-borde); border-radius: 6px; background: #fff;
}
.en-linea { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.tabla-contenedor { overflow-x: auto; background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gris-borde); vertical-align: top; }
.tabla th { background: #f7f9fb; font-weight: 600; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: none; }
.fila-inactiva td { opacity: .55; }
.nowrap { white-space: nowrap; }
.acciones { white-space: nowrap; }
.acciones .inline { margin-left: 4px; }
.estado { padding: 2px 10px; border-radius: 12px; font-size: .82rem; }
.estado-activo { background: #e7f5ec; color: var(--verde); }
.estado-inactivo { background: #fdecea; color: var(--rojo); }
.btn-sm { padding: 5px 10px; font-size: .85rem; margin-top: 0; }
.btn-claro { background: #fff; color: var(--azul); border-color: var(--azul); }
.btn-claro:hover { background: #eaf3fb; }
.btn-peligro { background: #fff; color: var(--rojo); border-color: var(--rojo); }
.btn-peligro:hover { background: #fdecea; }
.separador { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--gris-borde); }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 16px; }
label.check { display: flex; align-items: flex-start; gap: 8px; font-weight: 400; margin: 8px 0; cursor: pointer; }
label.check input { margin-top: 4px; }
.paginacion { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; }
.paginacion a, .paginacion span {
    padding: 6px 12px; border: 1px solid var(--gris-borde); border-radius: 6px;
    background: #fff; color: var(--azul); text-decoration: none; font-size: .9rem;
}
.paginacion .activa { background: var(--azul); color: #fff; border-color: var(--azul); }
a.modulo { text-decoration: none; color: inherit; }
.modulo-activo:hover { border-color: var(--azul); box-shadow: 0 2px 8px rgba(11,94,168,.15); }

/* ===== Paso 5: catalogos ===== */
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; }
.num { text-align: right; white-space: nowrap; }
.fila-editar { display: flex; gap: 8px; align-items: center; }
.fila-editar input[type=text] { flex: 1; min-width: 140px; padding: 7px 10px; font-size: .92rem; }
.contador { font-size: 1.6rem; font-weight: 700; color: var(--azul); }
.nota { font-size: .85rem; color: var(--suave); margin-top: 4px; }
.tarjeta select {
    width: 100%; padding: 10px 12px; font-size: 1rem;
    border: 1px solid var(--gris-borde); border-radius: 6px; background: #fff;
}
.tarjeta select:focus { outline: 2px solid var(--azul); border-color: var(--azul); }

/* ===== Paso 6: almacen ===== */
.aviso-cad { background: #fff4de; color: var(--ambar); }
.partida {
    display: grid; grid-template-columns: 2.4fr 1.2fr 1.1fr .9fr .9fr auto; gap: 10px; align-items: end;
    padding: 12px; margin-bottom: 10px; border: 1px solid var(--gris-borde); border-radius: 8px; background: #fafbfc;
}
.partida label { margin: 0 0 4px; font-size: .82rem; }
.partida input[type=text], .partida input[type=date] {
    width: 100%; padding: 8px 10px; font-size: .92rem; border: 1px solid var(--gris-borde); border-radius: 6px; background: #fff;
}
.partida input:disabled { background: #eef2f6; color: var(--suave); }
.p-producto { position: relative; }
.resultados {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%; background: #fff;
    border: 1px solid var(--gris-borde); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
    max-height: 260px; overflow-y: auto; display: none;
}
.resultados button {
    display: block; width: 100%; text-align: left; padding: 8px 10px; background: #fff;
    border: 0; border-bottom: 1px solid #eef2f6; cursor: pointer; font-size: .9rem;
}
.resultados button:hover { background: #eaf3fb; }
.resultados .sin-res { padding: 8px 10px; color: var(--suave); font-size: .9rem; }
@media (max-width: 800px) { .partida { grid-template-columns: 1fr 1fr; } .p-producto { grid-column: 1 / -1; } }

/* ===== Paso 7: traspasos ===== */
.partida-simple { grid-template-columns: 3fr 1fr auto; }
.estado-azul { background: #e3eefa; color: var(--azul-osc); }
.input-cant {
    width: 110px; padding: 6px 8px; font-size: .92rem; text-align: right;
    border: 1px solid var(--gris-borde); border-radius: 6px;
}
.cuadro-accion { border-left: 4px solid var(--azul); }
.cuadro-peligro { border-left: 4px solid var(--rojo); }
.linea-tiempo p { margin: 4px 0; }
@media (max-width: 800px) { .partida-simple { grid-template-columns: 1fr 1fr; } }

/* ===== Paso 8: stock por area ===== */
.alerta a { color: inherit; font-weight: 600; }
.estado-bajo, .estado-aviso { background: #fff4de; color: var(--ambar); }

/* ===== Paso 13: cuentas ===== */
.total-grande { font-size: 1.5rem; font-weight: 700; color: var(--azul-osc); }
.resumen-cuenta { display: flex; gap: 26px; flex-wrap: wrap; align-items: baseline; margin: 10px 0; }
@media print {
    .barra, .filtros, .encabezado-pagina .btn, .acciones, form, .no-imprimir, .alerta { display: none !important; }
    body { background: #fff; }
    .tarjeta, .tabla-contenedor { border: 1px solid #999; }
    .contenedor { max-width: 100%; margin: 0; }
}

/* ===== Paso 14: caja ===== */
.kpi { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.kpi > div { background: #fff; border: 1px solid var(--gris-borde); border-radius: 10px; padding: 12px 18px; min-width: 170px; }
.kpi strong { display: block; font-size: 1.3rem; color: var(--azul-osc); }
.recibo { max-width: 560px; margin: 0 auto; }
.recibo h1 { text-align: center; }

.texto-rojo { color: var(--rojo); font-weight: 700; }

/* ===== Paso 20: menu lateral, logo, identidad Hospital Puerta Grande ===== */
:root { --azul-marca: #0a3d91; --azul-marca-osc: #062a66; --ancho-lateral: 248px; }
body.privado { background: var(--gris-fondo); }
.app { display: flex; min-height: 100vh; }
.lateral {
    position: fixed; top: 0; left: 0; bottom: 0; width: var(--ancho-lateral); z-index: 40;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #0a4a9e 0%, var(--azul-marca) 45%, var(--azul-marca-osc) 100%);
    color: #fff; overflow-y: auto;
}
.lateral-marca { display: block; padding: 18px 20px 12px; text-align: center; }
.lateral-marca img { width: 150px; max-width: 100%; height: auto; display: inline-block; }
.lateral-menu { flex: 1; padding: 6px 10px 10px; }
.lateral-enlace {
    display: block; color: #fff; text-decoration: none; padding: 8px 12px; margin: 1px 0;
    border-radius: 6px; font-size: .94rem; opacity: .92;
}
.lateral-enlace:hover { background: rgba(255,255,255,.14); opacity: 1; }
.lateral-enlace.activo { background: #fff; color: var(--azul-marca); font-weight: 600; opacity: 1; }
.lateral-grupo { margin-top: 8px; }
.lateral-grupo summary {
    cursor: pointer; list-style: none; padding: 8px 12px 4px; font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.68); user-select: none;
}
.lateral-grupo summary::-webkit-details-marker { display: none; }
.lateral-grupo summary::after { content: "▾"; float: right; opacity: .7; }
.lateral-grupo:not([open]) summary::after { content: "▸"; }
.lateral-grupo .lateral-enlace { padding-left: 18px; }
.burbuja { background: #e53935; color: #fff; border-radius: 10px; padding: 0 7px; font-size: .75rem; font-weight: 700; margin-left: 4px; }
.lateral-pie { padding: 10px 14px 16px; border-top: 1px solid rgba(255,255,255,.18); }
.lateral-pie .lateral-enlace { padding-left: 12px; }
.lateral-usuario { font-size: .85rem; opacity: .85; margin: 8px 12px; word-break: break-word; }
.lateral-pie .btn-secundario { margin-top: 4px; }
.principal { flex: 1; min-width: 0; margin-left: var(--ancho-lateral); }
.principal .contenedor { max-width: 1180px; margin: 24px auto; padding: 0 24px; }
.topbar { display: none; }
.lateral-velo { display: none; }

@media (max-width: 900px) {
    .lateral { transform: translateX(-100%); transition: transform .2s ease; box-shadow: 2px 0 12px rgba(0,0,0,.3); }
    body.lateral-abierto .lateral { transform: translateX(0); }
    body.lateral-abierto .lateral-velo { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 30; }
    .principal { margin-left: 0; }
    .topbar {
        display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #fff;
        border-bottom: 1px solid var(--gris-borde); position: sticky; top: 0; z-index: 20;
    }
    .btn-menu { background: var(--azul-marca); color: #fff; border: 0; border-radius: 6px; font-size: 1.3rem; padding: 4px 12px; cursor: pointer; }
    .topbar-logo { height: 30px; width: auto; }
    .topbar-titulo { font-weight: 700; color: var(--azul-marca); }
    .principal .contenedor { padding: 0 14px; }
}

/* Login con logo */
body.publico { background: linear-gradient(160deg, #0a4a9e 0%, var(--azul-marca) 50%, var(--azul-marca-osc) 100%); min-height: 100vh; }
body.publico .contenedor { max-width: 430px; margin-top: 6vh; }
.login-titulo { text-align: center; margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; color: var(--azul-marca-osc); }
.login-logo { text-align: center; margin: 0 0 16px; }
.login-logo img { width: 230px; max-width: 80%; height: auto; }
body.publico .tarjeta { box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Cabecera institucional para comprobantes en pantalla/impresion */
.solo-print { display: none; }
.membrete { text-align: center; margin-bottom: 10px; }
.membrete img { height: 64px; width: auto; }
.membrete .membrete-nombre { font-weight: 700; font-size: 1.15rem; color: var(--azul-marca); letter-spacing: .02em; margin-top: 2px; }
.membrete .membrete-lema { font-size: .8rem; color: var(--suave); }
.membrete hr { border: 0; border-top: 2px solid var(--azul-marca); margin: 8px 0 0; }

@media print {
    .lateral, .lateral-velo, .topbar { display: none !important; }
    .principal { margin-left: 0 !important; }
    .principal .contenedor { max-width: 100%; margin: 0; padding: 0; }
    .membrete img { height: 56px; }
    .solo-print { display: block; }
}

/* Paso 23: mapa de habitaciones */
.mapa-hab { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0 24px; }
.mapa-hab .hab { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid #cfd8e3; text-decoration: none; color: inherit; font-size: .9rem; }
.mapa-hab .hab span { color: #55657a; font-size: .82rem; }
.mapa-hab .hab em { font-style: normal; font-size: .78rem; font-weight: 600; }
.mapa-hab .hab-libre { background: #eef8f0; border-color: #b9dfc2; }
.mapa-hab .hab-libre em { color: #1f7a38; }
.mapa-hab .hab-ocupada { background: #fdf0ee; border-color: #efb9b1; }
.mapa-hab .hab-ocupada em { color: #b3321f; }
.mapa-hab a.hab:hover { box-shadow: 0 2px 8px rgba(0,0,0,.12); }

/* Paso 25: agenda */
.tira-dias { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; }
.tira-dias .dia { display: flex; flex-direction: column; align-items: center; min-width: 74px; padding: 8px 6px; border: 1px solid #cfd8e3; border-radius: 10px; text-decoration: none; color: inherit; font-size: .85rem; background: #fff; }
.tira-dias .dia span { color: #55657a; }
.tira-dias .dia em { font-style: normal; font-size: .75rem; color: #1f7a38; }
.tira-dias .dia-vacio em { color: #b3321f; }
.tira-dias .dia-sel { border-color: #1d4f91; box-shadow: 0 0 0 2px rgba(29,79,145,.25); }
tr.fila-libre td { background: #f3faf5; }
tr.fila-ocupada td { background: #fff7e8; }

/* Paso 47: sustancias activas (chips y sugerencias) */
.sust-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 4px; background: #e8f0fb; color: var(--azul-marca); border: 1px solid #b9cdee; border-radius: 14px; padding: 3px 6px 3px 11px; font-size: .9rem; }
.chip-x { background: transparent; border: 0; color: var(--azul-marca); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.chip-x:hover { color: #c62828; }
.sust-sugerencias, .med-sugerencias { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--gris-borde); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.15); max-height: 280px; overflow-y: auto; }
.sust-item, .med-item { padding: 8px 12px; cursor: pointer; font-size: .93rem; border-bottom: 1px solid #eef1f5; }
.sust-item:last-child, .med-item:last-child { border-bottom: 0; }
.sust-item:hover, .med-item:hover, .med-item.activo { background: #eaf3fb; }
.med-item small { display: block; color: var(--suave); }
.med-elegido { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding: 7px 10px; background: #e7f5ec; border: 1px solid #a9d8ba; border-radius: 6px; font-size: .92rem; }

/* ===== Paso 48: datos de la empresa en membretes y recibo tipo ticket de 80 mm ===== */
.membrete .membrete-datos { font-size: .78rem; color: #333; margin-top: 4px; line-height: 1.35; }
/* El ticket mide 72 mm de ancho (papel de 80 mm) tanto en pantalla como al imprimir, para que lo que se ve sea lo que sale. */
.ticket {
    width: 72mm; max-width: 100%; margin: 0 auto 18px; padding: 3mm 0 3mm; background: #fff; color: #000;
    font-family: "Courier New", Courier, ui-monospace, monospace; font-size: 10pt; line-height: 1.3;
    box-shadow: 0 2px 12px rgba(0,0,0,.18); outline: 1px solid #d5dbe5;
}
.ticket .t-centro { text-align: center; }
.ticket .t-logo { height: 13mm; width: auto; }
.ticket .t-nombre { font-weight: 700; font-size: 12pt; margin-top: 1mm; }
.ticket .t-peq { font-size: 8pt; line-height: 1.25; }
.ticket .t-titulo { text-align: center; font-weight: 700; margin: 2mm 0 1mm; letter-spacing: .03em; }
.ticket .t-linea { border-top: 1px dashed #000; margin: 2mm 0; height: 0; }
.ticket .t-fila { display: flex; justify-content: space-between; gap: 2mm; }
.ticket .t-fila > span:last-child { white-space: nowrap; text-align: right; }
.ticket .t-total { font-size: 12.5pt; font-weight: 700; }
.ticket .t-sangria { padding-left: 3mm; }
.ticket .t-cancelado { text-align: center; font-weight: 700; border: 0.5mm solid #000; padding: 1mm; margin: 2mm 0; }
.ticket p { margin: 0.6mm 0; }
.ticket-nota { max-width: 520px; margin: 0 auto 14px; }

@media print {
    .ticket { margin: 0; box-shadow: none; outline: 0; }
}

/* ===== Paso 49: credencial del paciente (85.6 x 54 mm) ===== */
.cred-par { display: flex; gap: 28px; flex-wrap: wrap; margin: 6px 0 18px; }
.cred-lado { margin: 0 0 6px; font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.cred { position: relative; width: 85.6mm; height: 54mm; background: #fff; color: #000; border-radius: 3mm; overflow: hidden;
        box-shadow: 0 3px 14px rgba(0,0,0,.25); font-family: Helvetica, Arial, sans-serif; }
.cred-banda { position: absolute; left: 0; top: 0; width: 100%; height: 12mm; background: #0a3d91; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 3mm; box-sizing: border-box; border-bottom: .7mm solid #78aaeb; }
.cred-banda img { height: 8.8mm; width: auto; }
.cred-plan { text-align: right; line-height: 1.15; }
.cred-plan strong { display: block; font-size: 10pt; }
.cred-plan small { font-size: 6.5pt; opacity: .95; }
.cred-banda-chica { height: 8mm; justify-content: center; font-weight: 700; font-size: 9pt; border-bottom: 0; }
.cred-nombre { position: absolute; left: 4mm; right: 4mm; top: 14.2mm; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cred-fila { position: absolute; left: 4mm; right: 4mm; display: flex; justify-content: space-between; font-size: 7.2pt; color: #444; }
.cred-f1 { top: 20mm; } .cred-f2 { top: 23.7mm; }
.cred-barras { position: absolute; left: 9.8mm; top: 28.8mm; width: 66mm; height: 13mm; }
.cred-barras svg { display: block; }
.cred-exp { position: absolute; left: 0; right: 0; top: 42.2mm; text-align: center; font-family: "Courier New", monospace; font-weight: 700; font-size: 9.5pt; }
.cred-pie { position: absolute; left: 0; right: 0; bottom: 2mm; text-align: center; font-size: 6pt; font-style: italic; color: #777; }
.cred-reverso .cred-texto { position: absolute; left: 5mm; right: 5mm; top: 10.5mm; text-align: center; font-size: 7pt; color: #282828; line-height: 1.35; }
.cred-reverso .cred-texto p { margin: 0 0 1.2mm; }
@media print { .cred { box-shadow: 0 0 0 .2mm #999; } }

/* Paso 49: resultado al escanear una credencial */
.escaneo { border-radius: 12px; padding: 18px 22px; margin: 14px 0; color: #fff; }
.escaneo-ok { background: #1f7a38; } .escaneo-aviso { background: #b9770e; } .escaneo-mal { background: #b3321f; } .escaneo-neutro { background: #55657a; }
.escaneo-titulo { font-size: 1.1rem; font-weight: 800; letter-spacing: .06em; }
.escaneo-nombre { font-size: 1.8rem; font-weight: 700; margin: 4px 0 6px; }
.escaneo-dato { font-size: 1rem; opacity: .96; }
.cred-largo .cred-nombre { top: 13.7mm; white-space: normal; line-height: 1.12; max-height: 7.4mm; }
.cred-largo .cred-f1 { top: 21.2mm; } .cred-largo .cred-f2 { top: 24.8mm; }