:root{ /* La paleta es una sola, clara, y es deliberado: es la identidad institucional del hospital, la misma de CamaSync, y una tabla quirúrgica se lee impresa tanto como en pantalla. Al publicarse en la web la página se dibuja sobre el fondo que ponga el visor, así que aquí se declara el esquema y más abajo el pinta su propio fondo: sin eso, un operador con el móvil en modo oscuro vería este texto sobre negro. */ color-scheme: light; --ink:#111827; --ink2:#4b5563; --ink3:#9ca3af; --line:#e5e7eb; --bg:#ffffff; --bg2:#f9fafb; --bg3:#f3f4f6; /* Paleta verde institucional, tomada de proyectooptimizado.json */ --teal:#059669; --teal-soft:#d1fae5; --teal-ink:#064e3b; --central:#f3f4f6; --central-ink:#1f2937; --central-line:#e5e7eb; --tint:#f0fdf4; /* fondo suave verde, antes escrito a mano en 6 sitios */ --cma:#fffbeb; --cma-ink:#92400e; --cma-line:#fde68a; --ok:#dcfce7; --ok-ink:#166534; --warn:#fef3c7; --warn-ink:#92400e; --err:#fee2e2; --err-ink:#991b1b; --info:#dbeafe; --info-ink:#1e40af; --purple:#f3e8ff; --purple-ink:#6b21a8; --dark:#111827; --r:12px; } *{box-sizing:border-box; margin:0; padding:0;} /* Sin @import de Google Fonts: la CSP de _headers solo admite recursos propios y una demo no debería depender de un dominio externo para renderizarse. */ body{font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color:var(--ink); background:var(--bg2); font-size:14px; line-height:1.45;} button{font-family:inherit; cursor:pointer;} input,select,textarea{font-family:inherit; font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.04); padding:8px 10px; width:100%;} input:focus,select:focus,textarea:focus{outline:2px solid var(--teal); outline-offset:0; border-color:var(--teal);} label{display:block; font-size:12px; font-weight:bold; color:var(--ink2); margin-bottom:4px; text-transform:uppercase; letter-spacing:.03em;} .btn{border:1px solid var(--line); background:#fff; border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.04); padding:8px 14px; font-size:13px; font-weight:bold; color:var(--ink);} .btn:hover{background:var(--bg3);} .btn.primary{background:var(--teal); border-color:var(--teal); color:#fff;} .btn.primary:hover{background:#047857;} .btn.danger{color:var(--err-ink); border-color:#fecaca;} .btn.danger:hover{background:var(--err);} .btn.sm{padding:4px 10px; font-size:12px;} .btn:disabled{opacity:.45; cursor:not-allowed;} /* ---------- Login ---------- */ #loginView{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(160deg,#f0fdfa 0%, #f9fafb 55%, #eef2ff 100%);} .loginWrap{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; justify-content:center; max-width:1000px;} .loginCard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px; width:100%; max-width:380px; box-shadow:0 10px 30px rgba(17,24,39,.06);} .loginCard h1{font-size:20px; margin-bottom:2px;} .loginCard .sub{color:var(--ink2); font-size:13px; margin-bottom:24px;} .brandRow{display:flex; align-items:center; gap:10px; margin-bottom:18px;} .brandMark{width:42px; height:42px; border-radius:10px; background:var(--teal); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:15px; letter-spacing:.5px;} .field{margin-bottom:14px;} .loginErr{background:var(--err); color:var(--err-ink); border-radius:8px; padding:8px 10px; font-size:13px; margin-bottom:12px; display:none;} /* ---------- App shell ---------- */ #appView{display:none;} header.top{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;} .topInner{max-width:1400px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;} .topInner .brandMark{width:34px; height:34px; font-size:12px;} .topTitle{font-weight:bold; font-size:15px;} .topTitle small{display:block; font-weight:normal; color:var(--ink3); font-size:11px;} nav.tabs{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto;} nav.tabs button{border:none; background:none; padding:8px 12px; border-radius:8px; font-size:13px; font-weight:bold; color:var(--ink2);} nav.tabs button.on{background:var(--teal-soft); color:var(--teal-ink);} .userChip{display:flex; align-items:center; gap:8px; background:var(--bg3); border-radius:99px; padding:4px 6px 4px 12px; font-size:12px;} .userChip b{font-size:12px;} .userChip .role{color:var(--ink3);} main{max-width:1400px; margin:0 auto; padding:18px 20px 80px;} /* ---------- Week bar ---------- */ .weekBar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;} .weekBar h2{font-size:16px;} .weekBar .range{color:var(--ink2); font-size:13px;} .spacer{flex:1;} /* ---------- Cards & badges ---------- */ .card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:16px;} .badge{display:inline-block; padding:2px 9px; border-radius:99px; font-size:11px; font-weight:bold; white-space:nowrap;} .b-borrador{background:var(--bg3); color:var(--ink2);} .b-completo{background:var(--info); color:var(--info-ink);} .b-validado{background:var(--ok); color:var(--ok-ink);} .b-verificado{background:var(--purple); color:var(--purple-ink);} .b-cargado{background:var(--dark); color:#fff;} .b-suspendido{background:var(--err); color:var(--err-ink);} .b-central{background:var(--central); color:var(--central-ink);} .b-cma{background:var(--cma); color:var(--cma-ink);} .b-esp{background:var(--teal-soft); color:var(--teal-ink);} .b-note{background:var(--warn); color:var(--warn-ink);} /* ---------- Grid semanal ---------- */ .gridWrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff;} table.week{border-collapse:collapse; width:100%; min-width:1080px;} table.week th, table.week td{border:1px solid var(--line); vertical-align:top;} table.week thead th{background:var(--tint); padding:8px 6px; font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink2); position:sticky; top:0;} table.week .rowLbl{background:var(--tint); font-size:11px; font-weight:bold; color:var(--ink2); text-align:center; padding:6px 4px; white-space:nowrap; width:86px;} .slot{padding:5px; min-height:64px; cursor:pointer; transition:background .12s;} td.slotCell{padding:0;} td.slotCell:hover .slot{background:var(--tint);} .slot .pab{font-size:10px; color:var(--ink3); font-weight:bold; display:flex; justify-content:space-between; align-items:center; gap:4px;} .slot .esp{font-weight:bold; font-size:13px; margin:2px 0;} .slot .esp.empty{color:var(--ink3); font-weight:normal; font-style:italic; font-size:12px;} .slot .meta{display:flex; gap:4px; flex-wrap:wrap; align-items:center;} .dot{width:8px; height:8px; border-radius:99px; display:inline-block;} .cnt{font-size:11px; color:var(--ink2);} .slot.closed{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f3f4f6 6px,#f3f4f6 12px);} .sectorHead-central{background:var(--central) !important; color:var(--central-ink) !important;} .sectorHead-cma{background:var(--cma) !important; color:var(--cma-ink) !important;} /* legend */ .legend{display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:12px; color:var(--ink2); align-items:center;} .legend .it{display:flex; align-items:center; gap:5px;} /* KPI row */ .kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:16px;} .kpi{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;} .kpi .n{font-size:22px; font-weight:bold;} .kpi .l{font-size:11px; color:var(--ink2); text-transform:uppercase; letter-spacing:.03em;} /* ---------- Modal ---------- */ .overlay{position:fixed; inset:0; background:rgba(17,24,39,.45); display:none; align-items:flex-start; justify-content:center; z-index:60; padding:30px 14px; overflow-y:auto;} .overlay.on{display:flex;} .modal{background:#fff; border-radius:14px; width:100%; max-width:860px; padding:22px; box-shadow:0 20px 50px rgba(0,0,0,.25);} .modal.narrow{max-width:560px;} .modalHead{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px;} .modalHead h3{font-size:16px;} .modalHead .x{margin-left:auto; border:none; background:var(--bg3); border-radius:8px; width:30px; height:30px; font-size:15px;} .formGrid{display:grid; grid-template-columns:repeat(12,1fr); gap:12px;} .c2{grid-column:span 2;} .c3{grid-column:span 3;} .c4{grid-column:span 4;} .c6{grid-column:span 6;} .c8{grid-column:span 8;} .c12{grid-column:span 12;} /* El corte va con el de la vista compacta (900 px), no con 700: un iPad en vertical usa la vista de día y allí una columna de 2/12 deja el selector de estado en 108 px, donde «Operativo» no se lee. */ @media (max-width:899px){ .c2,.c3,.c4,.c6,.c8{grid-column:span 12;} } .modalFoot{display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap;} .hint{font-size:12px; color:var(--ink3);} /* case list inside slot modal */ .caseRow{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;} .caseRow .who{flex:1; min-width:200px;} .caseRow .who b{font-size:14px;} .caseRow .who .sub{font-size:12px; color:var(--ink2);} .caseRow .ops{display:flex; gap:6px; flex-wrap:wrap;} .orderBtns{display:flex; flex-direction:column; gap:2px;} .orderBtns button{border:1px solid var(--line); background:#fff; border-radius:6px; width:24px; height:20px; font-size:10px; line-height:1;} /* tables generic */ table.list{border-collapse:collapse; width:100%; background:#fff;} table.list th{background:var(--tint); font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink2); text-align:left; padding:8px 10px; border-bottom:1px solid var(--line);} table.list td{padding:8px 10px; border-bottom:1px solid var(--line); font-size:13px;} table.list tr:nth-child(even) td{background:var(--tint);} /* reunion editor */ /* Contenedor de tablas anchas. Lo pone envolverTablasAnchas() después de cada dibujado: la tabla se desplaza dentro de él en lugar de ensanchar la página. */ .tablaScroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;} @media print{ .tablaScroll{overflow:visible;} } .capGrid{display:grid; grid-template-columns:150px repeat(5,1fr); gap:6px; align-items:center; margin-bottom:6px;} .capGrid input{padding:5px 8px; text-align:center;} .capGrid .h{font-size:11px; font-weight:bold; color:var(--ink2); text-align:center;} .capLbl{font-size:12px; font-weight:bold; color:var(--ink2);} .toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:var(--dark); color:#fff; padding:10px 18px; border-radius:99px; font-size:13px; z-index:99; display:none;} .empty{padding:30px; text-align:center; color:var(--ink3); font-size:13px;} /* ---------- Print ---------- */ #printArea{display:none;} @media print{ body *{visibility:hidden;} #printArea, #printArea *{visibility:visible;} #printArea{display:block; position:absolute; left:0; top:0; width:100%; background:#fff;} .noPrint{display:none !important;} } .pTabla{page-break-after:always; font-family:"Times New Roman", serif; padding:10px 0; max-width:760px; margin:0 auto;} .pTabla h2{text-align:center; font-size:15px; border:2px solid #000; border-bottom:none; padding:8px; text-transform:uppercase;} .pCase{border-collapse:collapse; width:100%; margin-bottom:14px;} .pCase td{border:1.5px solid #000; padding:5px 8px; font-size:13px;} .pCase .lbl{font-weight:bold; width:150px; text-transform:uppercase; font-size:12px;} .pCase .big{font-weight:bold; text-align:center;} .pFootNote{font-size:11px; color:#333; margin-top:4px;} /* ---------- Franja de modo demostración ---------- */ .demoBar{position:sticky; top:0; z-index:60; background:#7f1d1d; color:#fff; font-size:12.5px; font-weight:bold; letter-spacing:.02em; text-align:center; padding:7px 14px; line-height:1.35; display:none;} .demoBar span{font-weight:normal; opacity:.85;} .demoBar .dbModo{font-weight:bold; opacity:1;} .demoBar .dbCorto{display:none; font-weight:bold; opacity:1;} body.demoOn .demoBar{display:block;} body.demoOn header.top{top:var(--demoH, 46px);} .demoNote{background:var(--warn); color:var(--warn-ink); border:1px solid #fcd34d; border-radius:8px; padding:10px 12px; font-size:12.5px; margin-bottom:14px;} .demoNote b{display:block; margin-bottom:2px;} @media print{ .demoBar{display:none !important;} } /* ---------- Elegir pabellón (reemplaza el prompt del navegador) ---------- */ .pabPick{display:flex; flex-direction:column; gap:8px; margin:12px 0;} .pabPick button{display:flex; align-items:center; gap:10px; text-align:left; width:100%; border:1px solid var(--line); background:#fff; border-radius:10px; padding:11px 14px; font-size:14px;} .pabPick button:hover{border-color:var(--teal); background:var(--teal-soft);} .pabPick .pnum{font-weight:bold; font-size:15px; min-width:78px; color:var(--teal-ink);} .pabPick .pmeta{color:var(--ink2); font-size:12.5px;} .pabPick .pcnt{margin-left:auto; color:var(--ink3); font-size:12px; white-space:nowrap;} /* ---------- Indicador de guardado (backend compartido) ---------- */ .syncChip{font-size:11px; font-weight:bold; border-radius:99px; padding:2px 9px; white-space:nowrap;} .syncChip.ok{background:var(--ok); color:var(--ok-ink);} .syncChip.guardando{background:var(--info); color:var(--info-ink);} .syncChip.error{background:var(--err); color:var(--err-ink);} /* ---------- Ocupación de bloque ---------- */ .ocup{display:flex; align-items:center; gap:5px; margin-top:4px;} .ocupBar{flex:1; height:4px; border-radius:99px; background:var(--line); overflow:hidden; min-width:24px;} .ocupBar i{display:block; height:100%; border-radius:99px; background:var(--teal); transition:width .18s ease;} .ocupBar.under i{background:#fbbf24;} .ocupBar.over i{background:#dc2626;} .ocupTxt{font-size:9.5px; color:var(--ink3); white-space:nowrap; font-weight:bold;} .ocupTxt.over{color:var(--err-ink);} .ocupPanel{margin-bottom:14px; background:var(--bg2);} .ocupHead{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .ocupHead>div{flex:1;} .ocupPanel .ocupBar{height:8px;} .ocupAviso{border-radius:8px; padding:9px 12px; font-size:12.5px; margin-top:8px; line-height:1.4;} .ocupAviso.over{background:var(--err); color:var(--err-ink);} .ocupAviso.under{background:var(--warn); color:var(--warn-ink);} /* Franja horaria de cada paciente dentro del pabellón */ .horaCaso{display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:56px; padding:4px 6px; border-radius:8px; background:var(--teal-soft); color:var(--teal-ink); font-variant-numeric:tabular-nums; line-height:1.25;} .horaCaso b{font-size:13px;} .horaCaso span{font-size:10.5px; opacity:.75;} .horaCaso i{font-style:normal; font-size:9.5px; opacity:.65;} .horaCaso.over{background:var(--err); color:var(--err-ink);} .caseRow.fueraBloque{background:#fff7f7;} /* ---------- Panel de capacidad semanal ---------- */ .capBar{display:flex; align-items:center; gap:8px;} .capBar .b{flex:1; height:10px; border-radius:99px; background:var(--line); overflow:hidden; position:relative;} .capBar .b i{display:block; height:100%; background:var(--teal);} .capBar .b.under i{background:#fbbf24;} .capBar .b.over i{background:#dc2626;} .capBar .v{font-size:12px; font-weight:bold; min-width:42px; text-align:right; font-variant-numeric:tabular-nums;} @media print{ .ocup, .ocupPanel{display:none !important;} } /* ---------- Recordatorios del año anterior ---------- */ /* Discretos por diseño: son un recordatorio compartido, no una alarma. */ .recLinea{display:flex; align-items:center; gap:9px; flex-wrap:wrap; background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:var(--r); padding:8px 12px; margin-bottom:14px; font-size:12.5px; color:var(--ink2);} .recLinea b{color:var(--teal-ink); font-size:14px; font-variant-numeric:tabular-nums;} .recLinea>span:not(.recPill){flex:1; min-width:200px;} .recPill{background:var(--teal-soft); color:var(--teal-ink); border-radius:99px; padding:2px 9px; font-size:10.5px; font-weight:bold; text-transform:uppercase; letter-spacing:.04em;} .recMas{border:none; background:none; color:var(--teal-ink); font-size:12px; font-weight:bold; text-decoration:underline; padding:2px 4px;} .recGrid{display:grid; grid-template-columns:1fr; gap:10px;} @media(min-width:720px){ .recGrid{grid-template-columns:1fr 1fr;} } .recCard{border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; background:#fff;} .recCardTop{display:flex; align-items:center; gap:8px; margin-bottom:7px;} .recCardTop b{margin-left:auto; font-size:18px; color:var(--teal-ink); font-variant-numeric:tabular-nums;} .recCard h4{font-size:13.5px; line-height:1.35; margin-bottom:5px;} .recCard p{font-size:12.5px; color:var(--ink2); line-height:1.45;} .recNota{display:flex; gap:11px; align-items:flex-start; background:var(--tint); border:1px solid var(--line); border-radius:var(--r); padding:10px 13px; margin-top:10px; font-size:12.5px;} .recNota>b{color:var(--teal-ink); font-size:16px; white-space:nowrap; font-variant-numeric:tabular-nums;} .recNota div b{font-size:12.5px; color:var(--ink);} .recNota span{color:var(--ink2);} @media print{ .recLinea, .recNota, .recGrid{display:none !important;} } /* ---------- Planificación vs referencia ---------- */ .avisoPlan{background:var(--info); color:var(--info-ink); border-radius:var(--r); padding:10px 13px; font-size:12.5px; line-height:1.45; margin-bottom:12px;} .avisoPlan a{color:var(--info-ink); font-weight:bold;} .margenSim{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:14px;} @media(min-width:640px){ .margenSim{grid-template-columns:1fr 1fr;} } .margenSim>div{background:#fff; padding:13px 16px; display:flex; flex-direction:column; gap:2px;} .margenSim .k{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink3); font-weight:bold;} .margenSim b{font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums;} .margenSim>div:last-child b{color:var(--teal-ink);} .margenSim .s{font-size:12px; color:var(--ink2);} @media print{ .avisoPlan, .margenSim{display:none !important;} } /* ---------- Estado condicional y holgura ---------- */ .ocupBar.cond i{background:#2563eb;} .ocupBar.hol i{background:#fbbf24;} .ocupTxt.cond{color:#1e40af;} .ocupTxt.hol{color:var(--warn-ink);} .badge.b-cond{background:var(--info); color:var(--info-ink);} .ocupAviso.cond{background:var(--info); color:var(--info-ink);} .ocupAviso.hol{background:var(--warn); color:var(--warn-ink);} .horaCaso.cond{background:var(--info); color:var(--info-ink);} .btn.cond{background:var(--info); border-color:#bfdbfe; color:var(--info-ink);} .caseRow.fueraBloque{background:transparent;} /* ---------- Módulo de prueba con usuarios ---------- */ .opPanel{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; width:100%; max-width:560px; box-shadow:0 10px 30px rgba(17,24,39,.06);} .opHead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px;} .opHead b{flex:1; font-size:15px;} .opGrid{display:grid; grid-template-columns:1fr; gap:8px;} @media(min-width:520px){ .opGrid{grid-template-columns:1fr 1fr;} } .opBtn{display:flex; flex-direction:column; align-items:flex-start; gap:1px; text-align:left; border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 13px; width:100%; box-shadow:0 1px 2px rgba(0,0,0,.04);} .opBtn:hover{border-color:var(--teal); background:var(--tint);} .opBtn b{font-size:14px; color:var(--ink);} .opBtn span{font-size:11.5px; color:var(--teal-ink); font-weight:bold; text-transform:uppercase; letter-spacing:.03em;} .opBtn i{font-style:normal; font-size:12px; color:var(--ink2); font-weight:normal;} .pruebaFlot{position:fixed; right:16px; bottom:16px; z-index:50; display:flex; gap:8px; background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:99px; padding:6px; box-shadow:0 6px 20px rgba(17,24,39,.14);} #pruebaFlotante.destacado .pruebaFlot{animation:latido 1.1s ease-in-out 4; box-shadow:0 0 0 3px var(--teal-soft), 0 6px 20px rgba(17,24,39,.18);} @keyframes latido{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.045);} } @media (prefers-reduced-motion:reduce){ #pruebaFlotante.destacado .pruebaFlot{animation:none;} } .guiaLista{margin:0 0 4px 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px;} .guiaLista li{border:1px solid var(--line); border-radius:10px; padding:10px 13px; font-size:14px; line-height:1.4;} .guiaLista li b{color:var(--teal-ink); margin-right:5px;} @media print{ .pruebaFlot{display:none !important;} } /* ===================================================================== TELÉFONO Y TABLET Punto de corte 900 px: por debajo, vista de día; por encima, grilla semanal. Un iPad vertical (768) cae en vista de día y horizontal (1024) en grilla, que es exactamente lo que se busca. ===================================================================== */ /* ---------- Selector de día ---------- */ .diaSel{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:12px;} .diaChip{display:flex; flex-direction:column; align-items:center; gap:2px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:9px 4px 7px; min-height:60px; box-shadow:0 1px 2px rgba(0,0,0,.04);} .diaChip b{font-size:13px; color:var(--ink); text-transform:uppercase; letter-spacing:.02em;} .diaChip span{font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums;} .diaChip .pt{width:6px; height:6px; border-radius:99px; margin-top:2px; background:var(--line);} .diaChip .pt.ok{background:var(--teal);} .diaChip .pt.hol{background:#fbbf24;} .diaChip .pt.cond{background:#2563eb;} .diaChip .pt.over{background:#dc2626;} .diaChip .pt.vacio{background:transparent; border:1px solid var(--line);} .diaChip.hoy{border-color:var(--teal-soft);} .diaChip.hoy b::after{content:'·'; color:var(--teal); margin-left:2px;} .diaChip.on{background:var(--teal); border-color:var(--teal);} .diaChip.on b, .diaChip.on span{color:#fff;} .diaChip.on .pt{box-shadow:0 0 0 2px rgba(255,255,255,.5);} /* ---------- Resumen del día ---------- */ .diaResumen{display:flex; gap:14px; align-items:center; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:11px 14px; margin-bottom:12px;} .diaResumen .dr1{display:flex; flex-direction:column; line-height:1.15;} .diaResumen .dr1 b{font-size:19px; font-variant-numeric:tabular-nums;} .diaResumen .dr1 span{font-size:11px; color:var(--ink3);} .diaResumen .drAvisos{display:flex; gap:5px; flex-wrap:wrap; margin-left:auto;} /* ---------- Tarjeta de pabellón ---------- */ .mSector{margin-bottom:18px;} .mSectorTit{display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:8px;} .mBloqueTit{font-size:12px; font-weight:bold; color:var(--ink2); text-transform:uppercase; letter-spacing:.04em; margin:10px 0 6px;} .mBloqueTit span{font-weight:normal; text-transform:none; color:var(--ink3); letter-spacing:0;} .pabCard{border:1px solid var(--line); border-radius:12px; background:#fff; padding:11px 13px; margin-bottom:8px; box-shadow:0 1px 2px rgba(0,0,0,.04); cursor:pointer;} .pabCard:active{background:var(--tint);} .pabCard.over{border-color:#fecaca;} .pabCard.cond{border-color:#bfdbfe;} .pabCard.hol{border-color:#fde68a;} .pabCard.vacio, .pabCard.cerrado{background:var(--bg2); border-style:dashed;} .pabCard.propuestas{background:var(--tint); border-style:dashed;} .pcTop{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px;} .pcTop b{font-size:14px; white-space:nowrap;} .pcEsp{font-size:13px; color:var(--teal-ink); font-weight:bold; flex:1; min-width:60px;} .pcPct{font-size:13px; font-weight:bold; color:var(--ink2); font-variant-numeric:tabular-nums;} .pcCola{font-size:11.5px; color:var(--ink3); margin-top:5px;} .pcAccion{font-size:12px; font-weight:bold; color:var(--teal-ink);} .pcVacio{font-size:12px; color:var(--ink3); padding:6px 0 2px;} .pcLista{margin-top:9px; border-top:1px solid var(--line); padding-top:7px; display:flex; flex-direction:column; gap:6px;} .pcPac{display:flex; gap:9px; align-items:flex-start;} .pcPac.cond .pcHora{background:var(--info); color:var(--info-ink);} .pcHora{background:var(--teal-soft); color:var(--teal-ink); border-radius:7px; padding:2px 6px; font-size:11.5px; font-weight:bold; font-variant-numeric:tabular-nums; white-space:nowrap;} .pcQuien{flex:1; min-width:0; line-height:1.3;} .pcQuien b{display:block; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .pcQuien span{display:block; font-size:11.5px; color:var(--ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .pcMin{font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums; white-space:nowrap;} /* ---------- Barra de fases inferior ---------- */ .navInf{display:none;} body.compacta .navInf{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:45; background:rgba(255,255,255,.97); border-top:1px solid var(--line); padding:4px 2px calc(4px + env(safe-area-inset-bottom)); box-shadow:0 -2px 12px rgba(17,24,39,.08);} .navInf button{border:none; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 2px; min-height:50px; color:var(--ink3);} .navInf button .ni{display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:99px; background:var(--bg3); font-size:12px; font-weight:bold; color:var(--ink2);} .navInf button .nl{font-size:10.5px; font-weight:bold;} .navInf button.on{color:var(--teal-ink);} .navInf button.on .ni{background:var(--teal); color:#fff;} @media (max-width:899px){ /* La grilla semanal y sus pestañas superiores ceden el sitio. */ .gridWrap, table.week{display:none;} nav.tabs{display:none;} main{padding:12px 12px calc(72px + env(safe-area-inset-bottom));} /* Cabecera compacta: marca, título corto y quién eres. */ .topInner{padding:8px 12px; gap:9px;} .topTitle small{display:none;} .topTitle{font-size:14px;} .userChip{margin-left:auto; padding:3px 5px 3px 10px; font-size:11px; gap:6px;} .userChip .role{display:none;} /* Semana: los controles en una fila cómoda. */ .weekBar{gap:6px;} .weekBar h2{font-size:14px; flex:1; min-width:0;} .weekBar .btn.sm{min-width:44px; min-height:44px;} /* Indicadores en dos columnas: seis en fila no se leen en un teléfono. */ .kpis{grid-template-columns:1fr 1fr; gap:8px;} .kpi .n{font-size:20px;} /* Objetivos táctiles: 44 px es el mínimo cómodo con el pulgar. */ .btn{min-height:44px; padding:10px 16px;} .btn.sm{min-height:44px; padding:8px 12px; font-size:12.5px;} .diaChip, .opBtn, .navInf button, .caseRow .ops .btn{touch-action:manipulation;} /* 16 px en los campos: por debajo, iOS hace zoom al enfocar y descoloca todo. */ input, select, textarea{font-size:16px; min-height:44px;} textarea{min-height:80px;} /* Casillas y radios quedan fuera: estirarlos a 44 px los deforma en una caja alta y vacía. El área de toque cómoda la da la etiqueta que los envuelve. */ input[type=checkbox], input[type=radio]{min-height:0; width:20px; height:20px;} label.chk{min-height:44px; display:inline-flex; align-items:center; gap:8px;} /* Modales como hoja que sube desde abajo. */ .overlay{padding:0; align-items:flex-end;} .modal{max-width:100%; border-radius:16px 16px 0 0; padding:16px 14px; max-height:92vh; overflow-y:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom));} .modal.narrow{max-width:100%;} .modalHead{position:sticky; top:-16px; background:#fff; padding-top:4px; z-index:2;} .modalHead .x{min-width:40px; min-height:40px;} .modalFoot{position:sticky; bottom:calc(-16px - env(safe-area-inset-bottom)); background:#fff; padding:10px 0 4px; border-top:1px solid var(--line); flex-wrap:wrap;} /* Fila de paciente: los botones en su propia línea, a lo ancho. */ .caseRow{flex-direction:column; align-items:stretch; gap:8px;} .caseRow .who{min-width:0;} .caseRow .ops{width:100%;} .caseRow .ops .btn{flex:1;} .orderBtns{flex-direction:row; gap:6px;} .orderBtns button{flex:1; min-height:34px;} .horaCaso{flex-direction:row; gap:7px; align-self:flex-start; min-width:0; padding:4px 9px;} /* Capacidad anestésica: se desplaza en horizontal con la etiqueta fija. */ .capGrid{grid-template-columns:110px repeat(5,minmax(58px,1fr)); overflow-x:auto; gap:5px;} .capLbl{position:sticky; left:0; background:#fff; z-index:1; font-size:11px;} .capGrid input{min-height:44px; font-size:15px;} /* Tablas largas: se desplazan y se estrechan, no se aplastan. */ .gridWrap:not(:has(table.week)){overflow-x:auto; -webkit-overflow-scrolling:touch;} table.list{font-size:12.5px;} table.list th, table.list td{padding:7px 8px;} /* La barra de la prueba sube por encima de la navegación. */ .pruebaFlot{bottom:calc(62px + env(safe-area-inset-bottom)); right:10px;} /* Ingreso: una columna, y el acceso por rol primero. */ .loginWrap{flex-direction:column-reverse; gap:14px;} .loginCard, .opPanel{max-width:100%; padding:18px;} .opGrid{grid-template-columns:1fr 1fr;} .opBtn{min-height:64px;} /* Paneles anchos a una columna. */ .recGrid, .margenSim{grid-template-columns:1fr;} .ocupPanel{padding:12px;} } /* Teléfonos pequeños (iPhone SE y similares). */ @media (max-width:400px){ .diaSel{gap:4px;} .diaChip{padding:7px 2px 6px; min-height:54px;} .diaChip b{font-size:12px;} .diaChip span{font-size:10px;} .kpis{grid-template-columns:1fr 1fr;} .opGrid{grid-template-columns:1fr;} .diaResumen{gap:10px; padding:9px 11px;} .diaResumen .dr1 b{font-size:17px;} } /* Tablet en horizontal: grilla semanal, pero con más aire al tocar. */ @media (min-width:900px) and (pointer:coarse){ .btn{min-height:44px;} .btn.sm{min-height:44px;} /* La grilla de capacidad se rellena con el dedo también sobre la mesa — y los formularios se rellenan con el dedo igual que en el teléfono. */ .capGrid input{min-height:44px;} input, select, textarea{min-height:44px;} input[type=checkbox], input[type=radio]{min-height:0;} .slot{min-height:76px;} /* La tablet apoyada sobre la mesa usa la grilla semanal, pero se sigue tocando con el dedo: las pestañas de fase necesitan la misma altura cómoda que los botones. */ nav.tabs button{padding:12px 14px; min-height:44px;} .recMas{min-height:40px; padding:0 8px; margin:0 -8px;} /* El aviso no puede quedar detrás de los botones del módulo de prueba. */ body.pruebaOn .toast{bottom:76px;} } @media print{ .diaSel, .diaResumen, .navInf, .pabCard{display:none !important;} } /* Ajustes finos de aprovechamiento vertical en pantalla estrecha. */ @media (max-width:899px){ /* La franja de demostración a una línea: el detalle largo sobra aquí. */ /* Una sola línea: el detalle largo sobra aquí y «MODO DEMOSTRACIÓN» partía la advertencia en dos. Lo que no se puede perder es la frase operativa —no ingresar datos de pacientes reales—, así que se abrevia el rótulo y se conserva entera la advertencia. */ .demoBar{font-size:11.5px; padding:6px 12px; line-height:1.3;} .demoBar .dbLargo, .demoBar .dbModo{display:none;} .demoBar .dbCorto{display:inline;} /* Cabecera en una sola fila. */ .topInner{flex-wrap:nowrap;} .topTitle{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .userChip{flex-shrink:0; max-width:52%;} .userChip b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; max-width:110px; vertical-align:bottom;} /* Barra de semana en una fila, sin envolver. */ .weekBar{flex-wrap:nowrap; gap:5px; margin-bottom:12px;} .weekBar h2{font-size:14px; white-space:nowrap; text-align:center;} .weekBar .btn.sm{flex-shrink:0; padding:8px 10px;} .weekBar .copiaSem{font-size:15px; line-height:1;} .weekBar .spacer{display:none;} /* Notificaciones por encima de la barra de fases. */ .toast{bottom:calc(120px + env(safe-area-inset-bottom)); left:12px; right:12px; max-width:none; text-align:center;} /* El recordatorio rotativo, más contenido. En un iPhone SE llegaba a ocupar 112 px —una sexta parte de la pantalla— para un texto que es deliberadamente discreto. Se reordena: etiqueta, cifra y «Ver todos» en la primera fila, y el titular debajo, a dos líneas como máximo. El detalle completo sigue estando en «Ver todos». */ .recLinea{padding:7px 10px; font-size:11.5px; gap:6px 8px;} .recLinea b{font-size:13px;} .recLinea .recPill{order:1;} .recLinea > b{order:2;} .recLinea .recMas{order:3; margin-left:auto;} .recLinea > span:not(.recPill){order:4; flex-basis:100%; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} /* «Ver todos» parece un enlace pero es un botón: se le da el área de toque de un botón sin cambiar cómo se ve. */ .recMas{font-size:11.5px; min-height:40px; padding:0 8px; margin:0 -8px;} } /* Lo que flota por encima de la barra de fases. Un aviso o un botón tapado por la navegación es un aviso que no existe: todo lo fijo se apila por encima de ella, en este orden desde abajo. */ @media (max-width:899px){ /* La barra de fases, opaca: con .97 el contenido se transparentaba al desplazar y las etiquetas quedaban ilegibles sobre el texto de fondo. */ body.compacta .navInf{background:#fff;} /* Los botones del módulo de prueba, justo encima de la barra. */ body.compacta .pruebaFlot{bottom:calc(64px + env(safe-area-inset-bottom)); right:12px;} /* Y el aviso, encima de ambos. Sin el transform el centrado de escritorio lo sacaba media pantalla hacia la izquierda. */ .toast{transform:none; bottom:calc(124px + env(safe-area-inset-bottom));} body.compacta .toast{bottom:calc(124px + env(safe-area-inset-bottom));} } /* ---------- Diálogos propios ---------- Sustituyen a confirm(), alert() y prompt(). Se dibujan por encima de cualquier modal abierto: casi siempre la pregunta nace dentro de uno («¿guardar igualmente?» sale del formulario de paciente). */ .dlgOverlay{z-index:120; align-items:center;} .dlgOverlay .dlgBox{max-width:460px;} .dlgTexto{font-size:15px; line-height:1.45; margin:2px 0 0;} .dlgDetalle{margin:8px 0 0; max-width:60ch;} .dlgOverlay .modalFoot{display:flex; gap:8px; justify-content:flex-end; margin-top:18px;} .dlgOverlay #dlgCampo{margin-top:6px;} @media (max-width:899px){ /* Como hoja, igual que los demás modales, pero anclada abajo: la pregunta aparece donde está el pulgar y no en mitad de la pantalla. */ .dlgOverlay{align-items:flex-end;} .dlgOverlay .dlgBox{max-width:100%;} /* El botón que confirma, primero en la lectura de arriba abajo del pulgar. */ .dlgOverlay .modalFoot{flex-direction:column-reverse; gap:8px;} .dlgOverlay .modalFoot .btn{width:100%; justify-content:center; text-align:center;} }