/* ===============================
   HIDROAPP — ESTILO BASE UNIFICADO
   =============================== */

/* Tipografía Inter (ligera, legible y moderna) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  --bg: #f6f8fb;
  --paper: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #64748b;
  --line: #e2e8f0;
  --brand: #3b82f6;
  --brand-600: #2563eb;
  --brand-100: #dbeafe;
  --ok: #10b981;
  --danger: #ef4444;

  --container: 1120px;
  --radius: 14px;
  --shadow: 0 10px 24px rgba(15, 23, 42, .06);

  /* Fuente base: prioriza Inter pero mantiene fallback seguro del sistema */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --fs-base: 16px;
  --fs-h1: 28px;
  --fs-h2: 18px;
  --fs-label: 14px;
  --fs-small: 13px;

  /* Alto del logo en la barra superior */
  --logo-h: 70px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body.app-body{
  margin:0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "calt" 1; /* agradable con Inter */
}

/* CONTENEDOR ESTÁNDAR */
.app-shell{
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 20px 40px;
}
.app-shell > .app-shell{ max-width: 100%; padding: 0; }

/* FOOTER & FLASHES */
.app-footer{
  max-width: var(--container);
  margin: 24px auto 40px;
  padding: 0 20px;
  color: var(--muted);
  font-size: var(--fs-small);
}
.flash-ok{
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
  padding: 10px 12px; border-radius: 10px; margin: 8px 0 18px;
}

/* TIPOGRAFÍA */
h1.page-title{ font-size: var(--fs-h1); font-weight: 800; margin: 0 0 12px; letter-spacing:-0.01em; }
.section-title{ font-size: var(--fs-h2); font-weight: 800; margin: 0 0 10px; letter-spacing:-0.01em; }
.page-meta{ color: var(--muted); font-size: var(--fs-small); }

/* ENLACES (neutralizamos morados/azules) */
.app-shell a{ color: inherit; text-decoration: none; }
.app-shell a:hover{ text-decoration: underline; }

/* LISTAS LIMPIAS */
.app-shell ul{ list-style: none; margin: 0; padding: 0; }
.app-shell li{ margin: 12px 0; }

/* TARJETA CONTENEDORA GENERAL */
.panel{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.panel + .panel{ margin-top: 16px; }

/* SECCIONES DENTRO DE PANEL (opcional) */
.section{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin: 16px 0;
}

/* LAYOUTS DE FORMULARIOS */
.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 920px){ .grid-2{ grid-template-columns: 1fr; } }

/* FORM CONTROLS */
.label{
  display: block; font-size: var(--fs-label); color: var(--ink-2);
  margin-bottom: 6px; font-weight: 700;
}
input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="time"], select, textarea{
  width: 100%; padding: 12px 12px; border: 1px solid var(--line);
  border-radius: 12px; background: #fff; color: var(--ink);
  outline: none; transition: border-color .15s ease, box-shadow .15s ease;
  font-size: 15px;
  font-family: var(--font);
}
textarea{ resize: vertical; }
input:focus, select:focus, textarea:focus{
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100);
}
::placeholder{ color: #9aa6b2; }

/* BOTONES */
.btn, .btn-ghost, .btn-soft, .btn-primary{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 600; text-decoration: none; cursor: pointer; user-select: none;
  font-size: 15px;
  font-family: var(--font);
}
.btn{ background:#fff; border-color: var(--line); color: var(--ink-2); }
.btn:hover{ border-color:#cbd5e1; }
.btn-ghost{ background:#fff; border-color: var(--line); color: var(--ink-2); }
.btn-ghost:hover{ border-color:#cbd5e1; }
.btn-soft{ background: var(--brand-100); color: var(--brand-600); }
.btn-primary{ background: var(--brand); color:#fff; }
.btn-primary:hover{ background: var(--brand-600); }
.btn + .btn, .btn + .btn-primary, .btn-primary + .btn{ margin-left: 8px; }

/* PILLS */
.pill{ display:inline-block; padding:6px 10px; border-radius:999px;
  font-size: var(--fs-small); border:1px solid var(--line); color: var(--ink-2);
  font-family: var(--font);
}
.pill.gray{ background:#f8fafc; }
.pill.green{ background:#ecfdf5; border-color:#86efac; color:#065f46; }
.pill.red{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

.muted{ color: var(--muted); }

/* LISTADO EN TARJETAS (p.ej. Pacientes) */
.list-cards > li{
  background:#fff; border:1px solid var(--line); border-radius: 14px;
  padding: 12px 14px; box-shadow: var(--shadow); margin: 12px 0;
}
.list-cards .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.list-cards .line-1{ font-weight: 800; }
.list-cards .line-2{ color: var(--muted); font-size: var(--fs-small); margin-top: 2px; }
.list-cards .actions{ display:flex; gap:8px; }

/* TABLAS (sesiones) */
.table-wrap{ overflow-x: auto; }
.table{ width:100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
.table thead th{ color: var(--ink-2); font-weight:700; font-size: var(--fs-label); }
.table .actions{ white-space: nowrap; }

/* NAVBAR */
.navbar{ background:#fff; border-bottom:1px solid var(--line); }
.navbar .inner{
  max-width: var(--container); margin: 0 auto; padding: 10px 20px;
  display:flex; justify-content: space-between; align-items:center; gap:12px;
}
/* Logo en navbar */
.brand img{
  display:block;
  height: var(--logo-h);
  width: auto;
}

/* ====== Layout helpers para formularios (2 columnas responsivas) ====== */
.panel{
  max-width:1100px;
  margin:0 auto;
  padding:18px 20px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(16,24,40,.05);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr;  /* móvil: 1 col */
  gap:12px 16px;
}
@media (min-width: 900px){
  .form-grid{ grid-template-columns:1fr 1fr; }  /* desktop: 2 cols */
}

.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}
@media (min-width: 900px){
  .grid-2{ grid-template-columns:1fr 1fr; }
}

/* Controles coherentes */
.form-control label{
  display:block;
  font-weight:600;
  margin:0 0 6px 0;
  color:#0f172a;
  font-family: var(--font);
}
.form-control input,
.form-control select,
.form-control textarea{
  width:100%;
  border:1px solid #e6eef5;
  border-radius:10px;
  padding:10px 12px;
  background:#f9fbfd;
  line-height:1.35;
  font-size:15px;
  font-family: var(--font);
}
.form-control textarea{ resize: vertical; }

/* Titulares y pills coherentes (por si faltan) */
.page-title{ font-size:26px; font-weight:800; margin:0; color:#0f172a; letter-spacing:-0.01em; }
.section-title{ font-size:16px; font-weight:800; margin:18px 0 8px; color:#0f172a; letter-spacing:-0.01em; }
.pill{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eef2ff; color:#4338ca; font-weight:600; font-size:12px;
  font-family: var(--font);
}
.pill.green{ background:#ecfdf5; color:#047857; }
.pill.gray{ background:#f3f4f6; color:#374151; }

/* Botones base */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:10px;
  background:#f3f4f6; color:#111827; text-decoration:none; border:0;
  font-family: var(--font);
}
.btn:hover{ background:#e5e7eb; }
.btn-primary{
  background:#3b82f6; color:#fff; border:0;
}
.btn-primary:hover{ background:#2563eb; }
.btn.danger{ background:#fee2e2; color:#991b1b; }
.btn.danger:hover{ background:#fecaca; }

/* Tablas de sesiones */
.table-wrap{ width:100%; overflow:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid #eef2f7; padding:10px 12px; text-align:left; }
.table .actions{ white-space:nowrap; }

/* Forzar texto blanco en botones primarios */
.btn-primary,
.btn-primary:link,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active,
a.btn-primary,
button.btn-primary {
  color: #fff !important;
}

/* ===============================
   Dashboard accents (brand)
   =============================== */

/* Métricas */
.metric-box{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:14px; box-shadow: var(--shadow);
}
.metric-head{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.metric-label{ font-weight:700; color:#0f172a; }
.metric-value{ font-size:28px; font-weight:800; margin-top:6px; color:#0f172a; }
.metric-note{ color:var(--muted); font-size:13px; margin-top:6px; }
.metric-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background: var(--brand-100); color: var(--brand-600);
  border:1px solid #bfdbfe;
}
.metric-icon--users::before{ content:"👥"; }
.metric-icon--calendar::before{ content:"🗓️"; }
.metric-icon--episodes::before{ content:"📂"; }

/* Lista de sesiones (paleta azul de la app) */
.dash-sessions{ margin:10px 0 0; }
.session-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px; border-bottom:1px solid var(--line);
}
.session-item:last-child{ border-bottom:0; }
.session-main{
  flex:1;
  background: var(--brand-100);
  border:1px solid #bfdbfe;
  border-radius:12px;
  padding:12px 14px;
}
.session-title{
  font-weight:800; color:#0f172a; display:flex; align-items:center; gap:8px;
}
.pill--brand-soft{
  background: var(--brand-100);
  color: var(--brand-600);
  border: 1px solid #bfdbfe;
}
.session-meta{ color:var(--muted); font-size:13px; margin-top:4px; }
.session-progress{
  height:8px; background:#e6effe; border-radius:999px; overflow:hidden; margin-top:10px;
}
.session-progress__bar{
  display:block; height:100%; width:45%;
  background: var(--brand-600);
  border-radius:999px;
}
.session-actions{ flex:0 0 auto; display:flex; align-items:center; }

/* Fin Dashboard accents */
/* ===== Dashboard — Forzar azul marca para sesiones y botón ===== */

/* tarjeta de sesión (píldora del nombre) */
.session-main{
  background: var(--brand-100) !important;        /* #dbeafe */
  border: 1px solid #bfdbfe !important;
}

/* barra de progreso de la sesión */
.session-progress__bar{
  background: var(--brand-600) !important;        /* #2563eb */
}

/* botón primario "Ver episodio" */
.btn-primary,
a.btn-primary,
button.btn-primary{
  background: var(--brand) !important;            /* #3b82f6 */
  color: #fff !important;
  border: 0 !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover{
  background: var(--brand-600) !important;
}

/* === Estado de sesión (tabla episodios) === */
.row-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Botón éxito pequeño, pill y verde */
.btn-success {
  background: #22c55e;            /* verde */
  color: #fff;
  border: 1px solid #16a34a;
  font-family: var(--font);
}
.btn-success:hover { filter: brightness(0.95); }

/* Variante outline verdosa (para "Deshacer") */
.btn-outline-success {
  background: #ecfdf5;            /* verde muy claro */
  color: #16a34a;
  border: 1px solid #a7f3d0;
  font-family: var(--font);
}
.btn-outline-success:hover { filter: brightness(0.98); }

/* Por si tu .btn-xs no existe o quieres más compacto */
.btn.btn-xs {
  font-size: .78rem;
  line-height: 1.1;
  padding: 4px 10px;
  border-radius: 9999px;          /* pill */
  font-family: var(--font);
}