/* FluxaNatural — Agenda. Colores y letras de la marca. */
:root{
  --verde:#6C8B6F;
  --verde-oscuro:#54704F;
  --sello:#6E9489;
  --crema:#DAD8CC;
  --gris:#F7F7F7;
  --barra:#F3F3F3;
  --linea:#E2E2DC;
  --texto:#2E332E;
  --suave:#7A807A;
  --serif:"Bodoni Moda",Georgia,serif;
  --sans:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sombra:0 2px 10px rgba(46,51,46,.08);
  --alto-fila:44px;           /* alto de media hora en la rejilla */
  --alto-cabeza:48px;
}

*{box-sizing:border-box}
/* Un display: en una clase le GANA al atributo hidden del navegador. Sin esto,
   .entrar (que es display:grid) se quedaba encima tapando la agenda despues de
   entrar: el DOM decia oculto pero en pantalla seguia la tarjeta de clave. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);color:var(--texto);background:var(--gris);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
body.sin-scroll{overflow:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:.01em}
a{color:var(--verde-oscuro)}
button{font-family:inherit;font-size:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit}

/* ---------- botones ---------- */
.btn{
  border:1px solid var(--verde);background:var(--verde);color:#fff;
  padding:9px 18px;border-radius:999px;transition:.15s;white-space:nowrap;
}
.btn:hover{background:var(--verde-oscuro);border-color:var(--verde-oscuro)}
.btn:disabled{opacity:.5;cursor:default}
.btn--claro{background:#fff;color:var(--texto);border-color:var(--linea)}
.btn--claro:hover{background:var(--gris);border-color:var(--verde);color:var(--verde-oscuro)}
.btn--peligro{background:#fff;color:#A15C5C;border-color:#E3CACA}
.btn--peligro:hover{background:#A15C5C;color:#fff;border-color:#A15C5C}
.btn--chico{padding:6px 13px;font-size:13.5px}

/* ---------- campos ---------- */
.campo{display:block;margin-bottom:14px}
.campo > span{display:block;font-size:13px;color:var(--suave);margin-bottom:5px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:9px 12px;border:1px solid var(--linea);border-radius:8px;
  background:#fff;color:var(--texto);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(108,139,111,.13)
}
.campo textarea{min-height:72px;resize:vertical}
.fila{display:flex;gap:12px}
.fila > *{flex:1;min-width:0}

/* ---------- entrar ---------- */
.entrar{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:linear-gradient(160deg,#fff 0%,var(--crema) 100%)}
.entrar-caja{width:100%;max-width:380px;background:#fff;padding:38px 32px;
  border-radius:14px;box-shadow:var(--sombra);text-align:center}
.entrar-caja .logo-entrar{width:108px;height:auto;display:block;margin:0 auto 12px}
.entrar-caja h1{font-size:30px;margin-bottom:4px}
.entrar-caja .lema{color:var(--suave);font-size:13.5px;margin:0 0 26px}
.entrar-caja form{text-align:left}
.entrar-caja .btn{width:100%;margin-top:6px}
.entrar-error{color:#A15C5C;font-size:13.5px;margin-top:14px;min-height:20px}

/* ---------- armazon ---------- */
.cabeza{
  background:#fff;border-bottom:1px solid var(--linea);padding:0 20px;
  display:flex;align-items:center;gap:22px;height:60px;position:sticky;top:0;z-index:30
}
.marca{font-family:var(--serif);font-size:21px;white-space:nowrap;display:flex;align-items:center;gap:9px}
.marca img{width:34px;height:auto;flex:none}
.marca b{font-weight:400;color:var(--verde)}
.menu{display:flex;gap:4px;flex:1;overflow-x:auto}
.menu button{
  background:none;border:0;padding:8px 14px;border-radius:999px;color:var(--suave);
  white-space:nowrap
}
.menu button:hover{background:var(--gris);color:var(--texto)}
.menu button.activo{background:var(--crema);color:var(--texto)}
.yo{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--suave);white-space:nowrap}
main{padding:20px;max-width:1500px;margin:0 auto}

/* ---------- barra de controles ---------- */
.controles{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;padding:12px 14px;border-radius:12px;box-shadow:var(--sombra);margin-bottom:16px
}
.controles select,.controles input[type=date]{
  padding:7px 10px;border:1px solid var(--linea);border-radius:8px;background:#fff;color:var(--texto)
}
.controles .titulo{font-family:var(--serif);font-size:19px;margin-right:auto}
.paso{display:flex;gap:4px}
.paso button{border:1px solid var(--linea);background:#fff;width:34px;height:34px;border-radius:8px}
.paso button:hover{border-color:var(--verde);color:var(--verde-oscuro)}
.pestanas{display:flex;gap:2px;background:var(--gris);padding:3px;border-radius:9px}
.pestanas button{border:0;background:none;padding:6px 14px;border-radius:7px;color:var(--suave)}
.pestanas button.activo{background:#fff;color:var(--texto);box-shadow:0 1px 3px rgba(0,0,0,.07)}

/* ---------- rejilla de la agenda ---------- */
.rejilla-caja{background:#fff;border-radius:12px;box-shadow:var(--sombra);
  overflow:auto;max-height:calc(100vh - 208px)}
.agenda{display:flex;min-width:min-content;position:relative}
.canal{width:58px;flex:none;position:sticky;left:0;z-index:9;background:#fff;
  border-right:1px solid var(--linea)}
.canal .esquina{height:var(--alto-cabeza);position:sticky;top:0;z-index:2;background:#fff;
  border-bottom:1px solid var(--linea)}
.canal .h{height:var(--alto-fila);font-size:11.5px;color:var(--suave);
  padding:2px 8px 0 0;text-align:right;border-top:1px solid transparent}
.canal .h.media{color:#C8CCC8;font-size:10.5px}

.col{flex:1 0 152px;position:relative;border-left:1px solid var(--linea)}
.col .cab{height:var(--alto-cabeza);position:sticky;top:0;z-index:7;background:#fff;
  border-bottom:1px solid var(--linea);padding:7px 8px;text-align:center;overflow:hidden}
.col .cab .nom{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col .cab .sub{font-size:11.5px;color:var(--suave);white-space:nowrap}
.col .cab .tope{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:1px}
.col.hoy .cab{background:#FBFAF5}
.col .pista{position:relative}
.col .slot{height:var(--alto-fila);border-top:1px solid var(--linea);cursor:pointer}
.col .slot.media{border-top-style:dotted;border-top-color:#EEEEE8}
.col .slot:hover{background:rgba(108,139,111,.08)}
.col .slot:hover::after{content:'+';display:block;text-align:center;color:var(--verde);
  font-size:17px;line-height:var(--alto-fila);opacity:.5}
.col .slot.cerrada{cursor:default;
  background:repeating-linear-gradient(45deg,#FAFAF8,#FAFAF8 5px,#F1F1ED 5px,#F1F1ED 10px)}
.col .slot.cerrada:hover::after{content:none}

.bloque{position:absolute;left:3px;right:3px;border-radius:7px;padding:3px 7px;overflow:hidden;
  color:#fff;font-size:12px;line-height:1.28;cursor:pointer;z-index:4;
  box-shadow:0 1px 4px rgba(0,0,0,.15);border-left:3px solid rgba(0,0,0,.2)}
.bloque:hover{filter:brightness(1.08);z-index:6}
.bloque .b-hora{font-size:10.5px;font-weight:600;opacity:.92}
.bloque .b-nom{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloque .b-serv{font-size:11px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bloque.corto{padding:1px 6px;line-height:1.2}
.bloque.corto .b-serv{display:none}
.bloque.mudo{opacity:.55}
.ahora{position:absolute;left:0;right:0;height:2px;background:#C0392B;z-index:8;pointer-events:none}
.ahora::before{content:'';position:absolute;left:-3px;top:-3px;width:8px;height:8px;
  border-radius:50%;background:#C0392B}

/* ---------- tarjetas y tablas ---------- */
.tarjeta{background:#fff;border-radius:12px;box-shadow:var(--sombra);padding:18px;margin-bottom:16px}
.tarjeta h2{font-size:20px;margin-bottom:12px}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:16px}
.cifra{background:#fff;border-radius:12px;box-shadow:var(--sombra);padding:16px 18px}
.cifra .n{font-family:var(--serif);font-size:32px;line-height:1.1}
.cifra .r{font-size:12.5px;color:var(--suave);margin-top:2px}
.cifra .extra{font-size:12px;color:var(--verde);margin-top:4px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;font-size:12.5px;color:var(--suave);
  padding:8px 10px;border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--gris);vertical-align:middle}
tbody tr:hover{background:var(--gris)}
tbody tr.clic{cursor:pointer}
.num{text-align:right;font-variant-numeric:tabular-nums}

.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:11.5px;color:#fff;white-space:nowrap}
.vacio{text-align:center;color:var(--suave);padding:40px 16px}
.vacio h3{font-size:19px;margin-bottom:6px;color:var(--texto)}

/* ---------- modal ---------- */
.capa{position:fixed;inset:0;background:rgba(46,51,46,.45);display:grid;place-items:center;
  padding:18px;z-index:100;overflow:auto}
.modal{background:#fff;border-radius:14px;width:100%;box-shadow:0 12px 40px rgba(0,0,0,.22);
  max-height:calc(100vh - 36px);display:flex;flex-direction:column}
.modal header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--linea)}
.modal header h3{font-size:21px}
.modal .cerrar{background:none;border:0;font-size:26px;line-height:1;color:var(--suave);padding:0 4px}
.modal .cerrar:hover{color:var(--texto)}
.modal-cuerpo{padding:20px;overflow:auto}
.acciones{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--linea)}
.acciones .der{margin-left:auto;display:flex;gap:9px}

.datos{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:14px;margin-bottom:6px}
.datos dt{color:var(--suave);font-size:13px}
.datos dd{margin:0}

/* buscador de pacientes dentro del modal */
.sugerencias{border:1px solid var(--linea);border-radius:8px;margin-top:-8px;margin-bottom:14px;
  max-height:190px;overflow:auto;background:#fff}
.sugerencias div{padding:8px 12px;cursor:pointer;font-size:13.5px;border-bottom:1px solid var(--gris)}
.sugerencias div:hover{background:var(--crema)}
.sugerencias div small{color:var(--suave);display:block}

/* ---------- aviso flotante ---------- */
.aviso{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);
  background:var(--texto);color:#fff;padding:11px 22px;border-radius:999px;
  box-shadow:0 6px 22px rgba(0,0,0,.24);z-index:200;opacity:0;transition:.25s;
  font-size:14px;max-width:90vw;text-align:center
}
.aviso.visible{opacity:1;transform:translate(-50%,0)}
.aviso--error{background:#A15C5C}
.aviso--ok{background:var(--verde-oscuro)}

.cargando{text-align:center;padding:50px;color:var(--suave)}

/* ---------- movil ---------- */
@media (max-width:820px){
  .cabeza{gap:12px;padding:0 12px}
  .marca{font-size:18px}
  .yo span{display:none}
  main{padding:12px}
  .controles .titulo{font-size:16px;width:100%;margin-right:0}
  .rejilla-caja{max-height:none}
  table{font-size:13px}
  .oculta-movil{display:none}
}