:root{color-scheme:light;--ink:#183b42;--muted:#52676b;--accent:#087f77;--line:#d6e4e3;--bg:#f0f6f5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,sans-serif}header{padding:20px 4%;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}header strong{font-size:28px;color:var(--accent);margin-right:20px}header span{color:var(--muted)}main{max-width:1440px;margin:auto;padding:20px 4% 50px}h1{font-size:30px;line-height:1.2;margin:8px 0 20px}h2{font-size:23px;margin:5px 0 15px}h3{margin:10px 0}p{color:var(--muted)}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px;min-width:0}.narrow{max-width:460px;margin:50px auto}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;color:var(--accent)}label{display:block;font-weight:600;font-size:14px;margin-bottom:15px}input,textarea,select{display:block;width:100%;margin-top:6px;border:1px solid #a9bfc0;background:white;color:var(--ink);padding:11px;border-radius:7px;font:inherit}textarea{min-height:95px;resize:vertical}button{background:var(--accent);color:#fff;border:1px solid transparent;border-radius:7px;padding:11px 16px;font:600 14px system-ui;cursor:pointer}button.secondary{background:white;color:var(--ink);border-color:var(--line)}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #69b9ec;outline-offset:3px}nav{display:flex;gap:10px;margin-bottom:25px}.heading,.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.grow{flex:1}.columns{display:grid;grid-template-columns:minmax(280px,1fr) minmax(400px,2fr);gap:24px;margin-top:20px}.patient{display:block;text-align:left;width:100%;background:white;color:var(--ink);border:1px solid var(--line);margin-bottom:10px}.patient.selected{border:2px solid var(--accent);background:#eaf7f3}.patient small{display:block;font-weight:400}.entry{border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.entry p{white-space:pre-wrap;overflow-wrap:anywhere;margin:5px 0 16px}.entry dt{font-weight:700;font-size:14px}.entry dd{margin:0}.meta{font-size:13px;color:var(--muted)}.user{padding:16px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}#notice,#modal-error{color:#a12d26;min-height:24px}dialog{border:1px solid var(--line);border-radius:14px;max-width:650px;width:94%;max-height:90vh;padding:26px;color:var(--ink)}dialog::backdrop{background:#183b4280}footer{font-size:12px;text-align:center;color:var(--muted);padding:20px}[hidden]{display:none!important}#account button{margin-left:8px}@media(max-width:850px){.columns{grid-template-columns:1fr}header{align-items:flex-start;flex-direction:column}header span{font-size:13px}.card{padding:18px}h1{font-size:26px}.narrow{margin:20px auto}}@media print{header,nav,footer,button,#search-form,#patient-list{display:none!important}.columns{display:block}.card{border:0}}

.patient-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:12px 0 25px}.patient-info-item{min-width:0}.patient-info dt{font-size:13px;color:var(--muted);font-weight:600}.patient-info dd{margin:4px 0 0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}#detail{scroll-margin-top:20px}@media(max-width:520px){.patient-info{grid-template-columns:1fr}}

.columns:has(#detail[hidden]){grid-template-columns:1fr}

/* PC, tablet y celular: contenido flexible y controles táctiles. */
header>div,#account,.heading>div,.row>*,nav{min-width:0}
#account{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:100%}
#account button{margin-left:0}
#identity{overflow-wrap:anywhere}
button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
input,select,textarea{min-width:0;max-width:100%;font-size:16px}
input,select{min-height:44px}
label{min-width:0}
nav{flex-wrap:wrap}
.patient,.patient small,h2,h3,p,.meta{overflow-wrap:anywhere}
.columns{grid-template-columns:minmax(240px,1fr) minmax(0,2fr)}
dialog{width:calc(100% - 24px);max-width:650px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:850px){.columns{grid-template-columns:minmax(0,1fr)}header{gap:12px}}
@media(max-width:520px){
  main{padding:16px 12px 32px}.card{padding:16px}header{padding:16px 12px}
  .heading{align-items:flex-start}.heading>div{flex:1 1 100%}
  #account{width:100%}#identity{flex-basis:100%}
  #search-form{align-items:stretch}#search-form .grow{flex-basis:100%;margin-bottom:0}
  #search-form>button{width:100%}
  .patient-info{grid-template-columns:minmax(0,1fr)}
  dialog{padding:18px 16px}
  .row{gap:10px}.row>button{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* La ficha forma parte del listado y desplaza los pacientes siguientes. */
#patients-view .columns{display:block}
#patient-list>#detail{margin:0 0 18px;border-radius:0 0 12px 12px;border-top:0;padding-top:16px}
.patient.selected{margin-bottom:0;border-radius:7px 7px 0 0}

.media-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}.media-gallery figure{margin:0;min-width:0}.media-gallery img,.media-gallery video{display:block;max-width:100%;width:100%;max-height:360px;object-fit:contain;border-radius:8px}.media-gallery figcaption{overflow-wrap:anywhere;margin-top:8px}.media-gallery small{display:block}

.suggestion-inbox{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:24px;min-width:0}.suggestion-inbox.has-pending{background:#fff6df;border:2px solid #996611}.suggestion-inbox h2{font-size:21px}.suggestion{border:1px solid var(--line);border-radius:8px;padding:16px;margin:12px 0;min-width:0;background:#fff}.suggestion.pending{border-left:5px solid #996611;background:#fff6df}.suggestion p{white-space:pre-wrap;overflow-wrap:anywhere}.suggestion strong{overflow-wrap:anywhere}.suggestion-thread{margin:20px 0}.entry{scroll-margin-top:20px}@media(max-width:520px){.suggestion-inbox,.suggestion{padding:14px}}