/* =============================================================
   Sistema visual del consultorio.

   Los colores base los inyecta la plantilla desde la base de datos
   (apps/clinic/context_processors.py), así que la doctora puede
   cambiarlos desde el panel sin que nadie despliegue nada. Los
   valores de abajo son solo el respaldo por si la configuración
   todavía no existe.

   Muestreados de sus documentos impresos, no elegidos por nosotros:
   fondo #FFF6F8, rosa #D99CAA, dorado #876422.

   Pensado para el celular primero: ella atiende de pie, entre
   pacientes, y muchas veces fuera del consultorio.
   ============================================================= */

:root{
  --background:#FFF6F8;
  --accent:#D99CAA;
  --label:#876422;

  --surface:#FFFFFF;
  --ink:#171210;
  --ink-soft:#857A75;

  /* La barra oscura y el oro sobre ella. El dorado de la marca no es un
     color: es un degradado que alterna luces y sombras a lo largo de las
     letras, que es lo que hace que una tinta metálica parezca metal. Un
     dorado plano se ve apagado (el problema de los botones del sitio de
     la clienta). Dos calibraciones del mismo degradado: sobre oscuro con
     más luz; sobre claro, con menos, o se desvanece. El oro es acento:
     etiquetas, detalles, la marca. Nunca un botón. */
  --bar:#171210;
  --bar-line:#2A2220;
  --bar-nav:#CFC4BC;
  --gold-light:#F2E2B0;
  --gold-on-dark:linear-gradient(100deg,#7E5E28 0%,#B8913F 12%,#F2E2B0 26%,#C9A356 38%,#8E6C2C 52%,#DCC489 66%,#B08736 80%,#6E5122 100%);
  --gold-on-light:linear-gradient(100deg,#6B4F1F 0%,#9C7A32 14%,#C9A867 28%,#9A7833 44%,#7A5C24 60%,#B5934C 76%,#8A6A2B 100%);
  --line:#EEE0DE;
  --line-soft:#F7EFEE;

  /* El rosa de la marca sobre blanco da un contraste de ~2:1, muy
     por debajo de lo legible. Se usa tal cual en bordes y rellenos,
     y esta versión oscurecida del MISMO tono para texto y botones.
     Se lee como su marca, pero se puede leer. */
  --accent-ink:#A3546A;
  --accent-ink-hover:#8E4459;
  --accent-soft:#FBEDF0;

  --ok:#3F7256;
  --warn:#9A6B18;
  --warn-soft:#FFFCF5;
  --danger:#A33A3A;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --r:10px;
  --shadow:0 1px 2px rgba(43,37,35,.05), 0 6px 16px -10px rgba(43,37,35,.18);
  --tap:44px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Red de seguridad: la página nunca se desplaza en horizontal. Un elemento
   demasiado ancho se recorta en vez de correr toda la pantalla con él; lo
   que sea legítimamente ancho (tablas, tiras) se desplaza en su propio
   contenedor. hidden en html y no en body: si los dos lo llevan, body se
   vuelve contenedor de desplazamiento y la barra sticky deja de pegarse.
   clip en body no crea contenedor, así que no tiene ese problema. */
html{overflow-x:hidden}
body{overflow-x:clip}
body{
  margin:0;
  background:var(--background);
  color:var(--ink);
  font:400 16px/1.5 var(--sans);
}
a{color:var(--accent-ink)}
img{max-width:100%;height:auto}

/* --- Barra de marca ---------------------------------------- */
.brand{
  background:var(--bar);
  border-bottom:1px solid var(--bar-line);
  padding:10px 16px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:20;
  color:var(--bar-nav);
}
.brand__home{display:inline-flex;text-decoration:none;color:inherit}
.brand__logo{height:34px;width:auto;display:block}

/* Logotipo en oro: el PNG cargado en Clinic sirve de máscara y el degradado
   se pinta a través de él. La URL viene de la plantilla (--logo), nunca de
   una imagen incrustada aquí: ella cambia el logotipo desde el panel. Sin
   soporte de máscara se ve el PNG normal, no un rectángulo dorado. */
.logo{display:inline-block;line-height:0}
.logo--gold{background:var(--gold-on-dark)}
.logo--on-light{background:var(--gold-on-light)}
@supports (mask-image:url("")) or (-webkit-mask-image:url("")){
  .logo--gold{
    -webkit-mask-image:var(--logo);mask-image:var(--logo);
    -webkit-mask-size:contain;mask-size:contain;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
  }
  .logo--gold img{visibility:hidden}
}
/* Sin PNG cargado: el nombre en el mismo oro. */
.brand__name{font:400 19px/1 var(--serif);letter-spacing:.16em;color:var(--gold-light)}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .brand__name{background:var(--gold-on-dark);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.brand__tagline{font-size:10.5px;letter-spacing:.12em;color:var(--bar-nav);margin-top:3px}
/* En pantalla grande la barra va en fila y, si no cabe (el portal tiene
   diez enlaces), baja a una segunda línea en vez de ensanchar la página. */
.brand__nav{
  margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;
  gap:2px 4px;align-items:center;min-width:0;
}
.brand__nav a{
  font-size:14px;text-decoration:none;padding:10px 10px;border-radius:8px;
  color:var(--bar-nav);
}
.brand__nav a:hover{background:var(--bar-line)}
.brand__nav a.is-current{color:var(--gold-light);font-weight:600}
/* El botón de salir es un formulario POST, pero se ve como los enlaces. */
.brand__logout{margin:0;display:inline}
.brand__logout button{
  font:inherit;font-size:14px;color:var(--bar-nav);background:none;border:0;
  padding:10px 10px;border-radius:8px;cursor:pointer;
}
.brand__logout button:hover{background:var(--bar-line)}

/* Hamburguesa: solo por debajo de 700px. La casilla se esconde a la vista
   pero no al teclado ni al lector de pantalla. */
.brand__toggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.brand__burger{display:none}

@media (max-width:699.98px){
  .brand{flex-wrap:wrap}
  .brand__burger{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;
    min-height:var(--tap);padding:0 12px;border-radius:8px;
    font-size:14px;color:var(--bar-nav);cursor:pointer;user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .brand__burger:hover{background:var(--bar-line)}
  .brand__toggle:focus-visible + .brand__burger{outline:2px solid var(--gold-light);outline-offset:2px}
  .brand__burger-icon,
  .brand__burger-icon::before,
  .brand__burger-icon::after{
    display:block;width:18px;height:2px;border-radius:1px;background:currentColor;
  }
  .brand__burger-icon{position:relative}
  .brand__burger-icon::before,
  .brand__burger-icon::after{content:"";position:absolute;left:0}
  .brand__burger-icon::before{top:-6px}
  .brand__burger-icon::after{top:6px}
  /* Abierto: la de en medio desaparece y las otras dos forman una X. */
  .brand__toggle:checked + .brand__burger .brand__burger-icon{background:transparent}
  .brand__toggle:checked + .brand__burger .brand__burger-icon::before{top:0;transform:rotate(45deg)}
  .brand__toggle:checked + .brand__burger .brand__burger-icon::after{top:0;transform:rotate(-45deg)}

  /* El menú ocupa su propia fila completa debajo del logotipo y empuja el
     contenido; no flota encima de nada. */
  .brand__nav{
    display:none;flex-basis:100%;margin:4px -8px 0;
    flex-direction:column;align-items:stretch;gap:0;
    /* La barra es sticky: si el menú es más alto que la pantalla (el portal
       en un celular horizontal), se desplaza dentro de sí mismo. */
    max-height:calc(100vh - 70px);overflow-y:auto;
  }
  .brand__toggle:checked ~ .brand__nav{display:flex}
  .brand__nav a,
  .brand__logout button{
    display:flex;align-items:center;min-height:var(--tap);
    padding:0 12px;font-size:15px;width:100%;text-align:left;
  }
  /* Salir no es una sección: es una acción, y va aparte, al final. */
  .brand__logout{
    display:block;margin-top:8px;padding-top:8px;
    border-top:1px solid var(--bar-line);
  }
}

/* Ingreso (variante A): banda oscura con el logotipo centrado y el
   subtítulo en versalitas espaciadas; el formulario va debajo, sobre el
   rosa, sin tarjeta. */
.brand--hero{
  position:static;flex-direction:column;justify-content:center;gap:12px;
  padding:36px 16px 30px;text-align:center;
}
.brand--hero .brand__logo{height:54px}
.brand--hero .brand__tagline{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;margin:0;
}
.login{max-width:380px;margin:0 auto}
.login .title{text-align:center}
.login .subtitle{text-align:center}

/* --- Contenedor --------------------------------------------- */
.wrap{padding:18px 16px 40px}
@media (min-width:900px){
  .wrap{max-width:1060px;margin:0 auto;padding:26px 24px 60px}
}

/* --- Títulos ------------------------------------------------- */
.title{font:400 27px/1.2 var(--serif);margin:0 0 6px}
.subtitle{color:var(--ink-soft);font-size:14px;margin:0 0 18px}
.section-title{
  font:600 13px/1 var(--sans);color:var(--ink-soft);
  margin:0 0 10px;letter-spacing:.01em;
}

/* --- Botones ------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  padding:10px 15px;border-radius:var(--r);
  font:500 14px/1.2 var(--sans);text-decoration:none;cursor:pointer;
  min-height:var(--tap);
}
.btn:hover{border-color:var(--accent)}
.btn:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.btn--primary{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}
.btn--primary:hover{background:var(--accent-ink-hover);border-color:var(--accent-ink-hover)}
.btn--block{width:100%}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}

/* --- Tarjetas ------------------------------------------------ */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:18px;
}
.card__head{
  font:600 13px/1 var(--sans);color:var(--ink-soft);
  padding:15px 16px 13px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
}
.card__head a{margin-left:auto;font-size:13px;text-decoration:none;font-weight:500}
.card__body{padding:14px 16px}

/* --- Pares etiqueta / valor ---------------------------------- */
.fields{margin:0}
.field{display:flex;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.field:last-child{border-bottom:0}
.field dt{
  flex:0 0 118px;font-size:12.5px;color:var(--label);
  font-weight:600;padding-top:2px;
}
.field dd{margin:0;font-size:15px;flex:1;min-width:0;overflow-wrap:anywhere}
.field dd.is-empty{color:var(--ink-soft);font-style:italic}

/* --- Listas -------------------------------------------------- */
.list{list-style:none;margin:0;padding:0}
.list__item{border-bottom:1px solid var(--line-soft)}
.list__item:last-child{border-bottom:0}
.list__link{
  display:block;padding:14px 16px;text-decoration:none;color:inherit;
  min-height:var(--tap);
}
.list__link:hover{background:#FDF9F9}
.list__title{font-size:16px;font-weight:500;margin-bottom:3px}
.list__meta{font-size:13px;color:var(--ink-soft)}

/* --- Etiquetas de estado ------------------------------------- */
.tag{
  display:inline-block;padding:2px 9px;border-radius:20px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
.tag--ok{background:#E7F0EA;color:var(--ok)}
.tag--warn{background:#FBF2DE;color:var(--warn)}
.tag--muted{background:var(--accent-soft);color:var(--accent-ink)}

/* --- Buscador ------------------------------------------------ */
.search{display:flex;gap:8px;margin-bottom:18px}
.search input{
  flex:1;min-height:var(--tap);padding:10px 14px;font-size:16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font-family:var(--sans);
}
.search input:focus{outline:2px solid var(--accent-ink);outline-offset:-1px;border-color:transparent}

/* --- Formularios --------------------------------------------- */
.form__row{margin-bottom:16px}
.form__row label{
  display:block;font-size:12.5px;font-weight:600;color:var(--label);
  margin-bottom:5px;
}
.form__row input,.form__row select,.form__row textarea{
  width:100%;min-height:var(--tap);padding:10px 12px;
  /* 16px evita que Safari en iOS haga zoom al enfocar el campo. */
  font:400 16px/1.4 var(--sans);
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);
}
.form__row textarea{min-height:96px;resize:vertical}
.form__row input:focus,.form__row select:focus,.form__row textarea:focus{
  outline:2px solid var(--accent-ink);outline-offset:-1px;border-color:transparent;
}
.form__help{font-size:12.5px;color:var(--ink-soft);margin-top:5px}
/* La fecha en palabras bajo un campo de fecha (static/js/date-echo.js).
   En tinta y no en gris: es lo que hay que leer antes de guardar. */
.form__echo{font-size:14px;color:var(--ink);font-weight:600;margin-top:5px}
.form__error{font-size:13px;color:var(--danger);margin-top:5px}
@media (min-width:700px){
  .form__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .form__row--wide{grid-column:1/-1}
}

/* --- Avisos -------------------------------------------------- */
.notice{
  padding:13px 15px;border-radius:var(--r);font-size:13.5px;line-height:1.5;
  background:var(--warn-soft);border:1px solid #EBDCBE;
  border-left:3px solid var(--warn);margin-bottom:18px;
}
.notice strong{display:block;margin-bottom:3px;color:var(--warn)}

/* --- Vacío --------------------------------------------------- */
.empty{text-align:center;padding:48px 24px;color:var(--ink-soft)}
.empty p{margin:0 0 16px;font-size:15px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* --- Tira del expediente -------------------------------------
   Se desplaza en horizontal en el celular. Los pasos no se apilan
   a propósito: el orden es la información, y apilados se pierde
   la sensación de secuencia. */
.record{overflow:hidden}
.record__strip{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.record__strip::-webkit-scrollbar{display:none}
.record__step{
  flex:0 0 auto;min-width:132px;max-width:180px;padding:14px 16px;
  border-right:1px solid var(--line);
}
.record__step:last-child{border-right:0}
.record__step--missing{background:var(--warn-soft)}
.record__mark{
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;margin-bottom:9px;
}
.record__step--done .record__mark{background:var(--ok);color:#fff}
.record__step--missing .record__mark{background:#fff;border:1.5px dashed var(--warn);color:var(--warn)}
.record__step--na .record__mark{background:var(--accent-soft);color:var(--ink-soft)}
.record__label{font-size:13px;font-weight:500;line-height:1.35;display:block}
.record__detail{font-size:11.5px;color:var(--ink-soft);margin-top:4px;display:block;line-height:1.35}
.record__step--missing .record__detail{color:var(--warn);font-weight:600}