/* clinica/static/estilo.css
   LA QUERENCIA · Salud mental — sistema visual según el manual de marca v1.
   Verde profundo como base (tierra firme, calma, cobijo); terracota como
   ÚNICA luz cálida (la presencia humana, las acciones); hueso y arena para
   respirar. Fraunces para display, DM Sans para cuerpo.
   Los NOMBRES de variables se conservan (los templates no cambian). */

:root{
  /* Paleta del manual */
  --verde-profundo:#14241d;
  --verde:#2d5546;
  --terracota:#e0895f;
  --arena:#d9cfbc;
  --hueso:#f2efe6;

  /* Mapeo a los tokens de la app */
  --bg:var(--hueso);
  --surface:#ffffff;
  --surface-2:#f8f6ef;
  --text:var(--verde-profundo);
  --text-2:#5f7068;
  --text-3:#9fb0a5;
  --border:rgba(20,36,29,0.12);
  --border-2:rgba(20,36,29,0.18);
  --accent:var(--verde);                 /* estructura, links, símbolo */
  --accent-bg:rgba(45,85,70,0.08);
  --accent-border:rgba(45,85,70,0.25);
  --ok:var(--verde);
  --ok-bg:rgba(45,85,70,0.08);
  --ok-border:rgba(45,85,70,0.25);
  --warn:#a9663c;
  --warn-bg:rgba(224,137,95,0.12);
  --warn-border:rgba(224,137,95,0.3);
  --danger:#a85a52;
  --danger-bg:rgba(168,90,82,0.1);
  --disabled-bg:var(--arena);
  --disabled-text:#a39a86;
  --radius:12px;
  --font-serif:'Fraunces',Georgia,serif;
  --font-sans:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);
     font-family:var(--font-sans);line-height:1.65;
     -webkit-font-smoothing:antialiased;}
.serif{font-family:var(--font-serif);font-weight:500;}

.card{background:var(--surface);border:0.5px solid var(--border);
      border-radius:var(--radius);padding:16px 20px;}
.card.suave{background:var(--surface-2);border:none;}

button{font-family:var(--font-sans);border:0.5px solid var(--border-2);
       background:var(--surface);color:var(--text);border-radius:var(--radius);
       cursor:pointer;font-size:13px;padding:7px 14px;}
/* Terracota = el acento único: la luz, las acciones. */
button.primary{background:var(--terracota);color:#fff;border:none;font-weight:500;}
button.ok{background:var(--verde);color:var(--hueso);border:none;font-weight:500;}
button.danger{background:var(--danger-bg);color:var(--danger);border:none;font-weight:500;}
button.ghost{background:transparent;border:none;color:var(--text-2);}
button:disabled{background:var(--disabled-bg);color:var(--disabled-text);
                cursor:not-allowed;border:none;}

.pill{font-size:12px;padding:3px 10px;border-radius:999px;display:inline-block;}
.pill.warn{color:var(--warn);background:var(--warn-bg);}
.pill.ok{color:var(--ok);background:var(--ok-bg);}
.pill.muted{color:var(--text-3);background:var(--surface-2);}

textarea,input,select{font-family:var(--font-sans);border:0.5px solid var(--border);
  border-radius:8px;background:var(--surface-2);color:var(--text);
  padding:9px 10px;font-size:13px;width:100%;}
label{font-size:13px;color:var(--text-2);}

.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
        justify-content:center;font-size:12px;font-weight:500;flex-shrink:0;
        background:var(--accent-bg);color:var(--verde);}
.avatar.suave{background:var(--surface-2);color:var(--text-2);}

.punto{width:7px;height:7px;border-radius:50%;background:var(--ok);display:inline-block;}
.rec-punto{width:8px;height:8px;border-radius:50%;background:var(--terracota);display:inline-block;}

a{color:var(--verde);}
.tenue{color:var(--text-2);}  .mas-tenue{color:var(--text-3);}
.chico{font-size:13px;}  .mini{font-size:12px;}

/* La casita de La Querencia junto al nombre (el logo siempre acompaña). */
.marca{display:flex;align-items:center;gap:10px;}
.marca svg{flex-shrink:0;}