/* ============================================================
   CLINIMALS — VETERINARIA · Design system basado en Libretto
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300..800&display=swap');

:root {
  --brand:        #088a99;
  --brand-dark:   #066e7a;
  --brand-darker: #044d56;
  --brand-light:  #e0f5f7;
  --brand-50:     #f0fafb;
  --success:      #16a34a;
  --success-bg:   #dcfce7;
  --warning:      #d97706;
  --warning-bg:   #fef3c7;
  --danger:       #dc2626;
  --danger-bg:    #fee2e2;
  --info:         #2563eb;
  --info-bg:      #dbeafe;
  --text:         #0f172a;
  --text-secondary: #475569;
  --text-muted:   #94a3b8;
  --border:       #e2e8f0;
  --bg:           #f8fafc;
  --white:        #ffffff;
  --sidebar-w:         250px;
  --admin-header-h:    60px;
  --sidebar-bg:        #0d1b2a;
  --sidebar-text:      rgba(255,255,255,.65);
  --sidebar-hover:     rgba(255,255,255,.06);
  --sidebar-active:    rgba(255,255,255,.12);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-md: 0 10px 25px rgba(0,0,0,.08), 0 4px 10px rgba(0,0,0,.05);
  --shadow-brand: 0 4px 16px rgba(8,138,153,.35);
  --radius-xs: 4px;  --radius-sm: 8px;  --radius: 12px;
  --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px;
  --space-1: .25rem;  --space-2: .5rem;  --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
}

html { font-size: 15px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

a { text-decoration: none; }

/* ════ SIDEBAR ═══════════════════════════════════════════════ */
/* Sin overflow-x:hidden en el layout para no enmascarar desbordes:
   las tablas usan scroll interno y los desbordes reales se corrigen en origen. */
.admin-layout { display:flex; min-height:100vh; min-height:100dvh; }
.admin-sidebar {
  width:var(--sidebar-w); min-height:100vh; background:var(--sidebar-bg);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:1100;
  transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto;
}
.sidebar-brand { height:var(--admin-header-h); display:flex; align-items:center; padding:0 1.25rem; gap:.65rem;
  border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; flex-shrink:0; }
.sidebar-brand-icon { width:36px; height:36px; border-radius:9px; background:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.sidebar-brand-name { font-weight:800; font-size:1.15rem; color:#fff; letter-spacing:-.5px; }
.sidebar-brand-sub  { font-size:.62rem; color:rgba(255,255,255,.35); font-weight:400; margin-top:-3px; }

/* Logo oficial de Clinimals dentro de los contenedores de marca */
.brand-img { width:100%; height:100%; object-fit:contain; display:block; }

/* ════ MARCA MULTIIDIOMA ═════════════════════════════════════ */
.brand-rotate { display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;
  transition:opacity .35s ease, transform .35s ease, letter-spacing .35s ease; }
.brand-rotate.switching { opacity:0; transform:translateY(5px); }
.brand-flag { font-size:.82em; line-height:1; filter:saturate(.9); }
.sidebar-section-label { padding:.9rem 1.25rem .3rem; font-size:.62rem; text-transform:uppercase;
  letter-spacing:.1em; color:rgba(255,255,255,.25); font-weight:700; }
.sidebar-link { display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem;
  color:var(--sidebar-text); font-size:.875rem; font-weight:500; text-decoration:none;
  transition:background .15s,color .15s,border-color .15s; border-left:3px solid transparent; margin:1px 0; }
.sidebar-link i { width:1.1rem; font-size:1rem; flex-shrink:0; text-align:center; }
.sidebar-link:hover { background:var(--sidebar-hover); color:rgba(255,255,255,.9); }
.sidebar-link.active { background:var(--sidebar-active); color:#fff; border-left-color:var(--brand); font-weight:600; }
.sidebar-link.active i { color:#7ce7f2; }
.admin-sidebar .sidebar-divider { border-color:rgba(255,255,255,.07); margin:.4rem 1.25rem; }
.sidebar-bottom { border-top:1px solid rgba(255,255,255,.06); padding:.5rem 0; }
.sidebar-user { display:flex; align-items:center; gap:.75rem; padding:.85rem 1.25rem; min-width:0; }
.sidebar-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; background:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; }
.sidebar-user-name { font-size:.82rem; font-weight:600; color:rgba(255,255,255,.85);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user-role { font-size:.7rem; color:rgba(255,255,255,.4); }
.sidebar-logout { display:flex; align-items:center; gap:.75rem; padding:.6rem 1.25rem;
  color:var(--sidebar-text); font-size:.85rem; background:none; border:none; width:100%;
  cursor:pointer; transition:color .15s; text-align:left; }
.sidebar-logout:hover { color:#fca5a5; }

.admin-main { margin-left:var(--sidebar-w); flex:1; min-height:100vh; display:flex;
  flex-direction:column; min-width:0; }
.admin-header { height:var(--admin-header-h); background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:1rem; padding:0 1.5rem; position:sticky; top:0; z-index:900;
  box-shadow:var(--shadow-xs); }
.admin-header-title { font-size:.95rem; font-weight:600; color:var(--text); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-content { flex:1; padding:1.5rem; }
.sidebar-toggle { background:none; border:none; width:34px; height:34px; border-radius:8px;
  display:none; align-items:center; justify-content:center; cursor:pointer; color:var(--text-secondary);
  font-size:1.1rem; flex-shrink:0; }
.sidebar-toggle:hover { background:#f1f5f9; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:1099; }
.sidebar-overlay.show { display:block; }
@media (max-width:991px){
  .admin-sidebar{ transform:translateX(-100%); }
  .admin-sidebar.show{ transform:translateX(0); }
  .admin-main{ margin-left:0; }
  .admin-content{ padding:1rem; }
  .sidebar-toggle{ display:flex; }
}

/* ════ AUTH ══════════════════════════════════════════════════ */
.auth-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(150deg,var(--brand-darker) 0%,var(--brand-dark) 45%,var(--brand) 100%);
  position:relative; overflow:hidden; padding:1.5rem; }
.auth-wrapper::before { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(13,202,240,.14) 0%,transparent 60%); }
.auth-card { width:100%; max-width:440px; background:#fff; border-radius:var(--radius-lg);
  box-shadow:0 25px 50px rgba(0,0,0,.25); padding:2.25rem; position:relative; z-index:1; }
.brand-icon { width:72px; height:72px; border-radius:18px; background:#fff; color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:2.2rem; margin:0 auto 1.1rem;
  box-shadow:var(--shadow-brand); overflow:hidden; padding:8px; border:1px solid var(--brand-light); }

/* ════ TARJETAS / PANEL ══════════════════════════════════════ */
.stat-card { background:#fff; border-radius:var(--radius-lg); padding:1.25rem 1.5rem;
  border:1px solid var(--border); box-shadow:var(--shadow-sm); display:flex; align-items:center; gap:1rem; }
.stat-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.25rem; flex-shrink:0; }
.stat-value { font-size:clamp(1.3rem, 1rem + 1.5vw, 1.75rem); font-weight:700; color:var(--text); line-height:1.1; }
.stat-label { font-size:.78rem; color:var(--text-muted); }

.panel-card { background:#fff; border-radius:var(--radius-lg); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.panel-card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex;
  align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.panel-card-title { font-weight:700; font-size:.95rem; color:var(--text); display:flex; align-items:center; gap:.5rem; }
.panel-card-body { padding:1.25rem; }

.table-panel { margin:0; }
.table-panel thead { background:var(--brand-light); }
.table-panel thead th { color:var(--brand-dark); font-weight:600; border:none; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; padding:.65rem .9rem; }
.table-panel tbody td { padding:.7rem .9rem; border-color:var(--border); vertical-align:middle; font-size:.9rem; }
.table-panel tbody tr:hover { background:#f0fbfc; }

/* ════ BADGES ════════════════════════════════════════════════ */
.badge { font-size:.72rem; font-weight:600; padding:.35em .7em; border-radius:999px; }
.badge-brand    { background:var(--brand-light); color:var(--brand-dark); }
.badge-success  { background:var(--success-bg); color:#065f46; }
.badge-warning  { background:var(--warning-bg); color:#92400e; }
.badge-danger   { background:var(--danger-bg); color:#991b1b; }
.badge-info     { background:var(--info-bg); color:#1e40af; }
.badge-muted    { background:#f1f5f9; color:var(--text-secondary); }
.badge-urgencia { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.badge-lost { background:#b91c1c; color:#fff; }

/* ════ BOTONES ═══════════════════════════════════════════════ */
.btn { font-weight:600; border-radius:var(--radius-sm); font-size:.875rem; }
.btn-brand { background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover, .btn-brand:focus { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-outline-brand { border-color:var(--brand); color:var(--brand); }
.btn-outline-brand:hover { background:var(--brand); color:#fff; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--text-secondary); }
.btn-ghost:hover { background:#f8fafc; color:var(--text); }

/* ════ FORMULARIOS ═══════════════════════════════════════════ */
.form-label { font-weight:600; font-size:.8rem; color:var(--text-secondary); margin-bottom:.3rem; }
.form-control, .form-select { border-radius:var(--radius-sm); border-color:var(--border);
  font-size:.9rem; padding:.5rem .75rem; }
.form-control:focus, .form-select:focus { border-color:var(--brand); box-shadow:0 0 0 .2rem rgba(8,138,153,.15); }
.form-section-title { font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--brand);
  font-weight:700; margin:1.75rem 0 .75rem; display:flex; align-items:center; gap:.5rem; }
.form-section-title::after { content:''; flex:1; height:1px; background:var(--border); }

/* ════ PERFIL PACIENTE ═══════════════════════════════════════ */
.patient-hero { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff;
  border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow-md); }
.patient-avatar { width:76px; height:76px; border-radius:20px; background:rgba(255,255,255,.15);
  border:2px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; flex-shrink:0; }
.info-chip { background:var(--brand-light); color:var(--brand-dark); border-radius:var(--radius-sm);
  padding:.35rem .7rem; font-size:.78rem; font-weight:600; }
.info-chip-active { background:var(--brand); color:#fff; box-shadow:0 2px 6px rgba(8,138,153,.35); }

.ficha-section { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:1.25rem;
  background:#fff; overflow:hidden; }
.ficha-section-header { background:var(--brand-50); padding:.65rem 1.1rem; font-weight:700;
  font-size:.85rem; color:var(--brand-dark); display:flex; align-items:center; gap:.6rem; }
.ficha-section-body { padding:1.1rem; }

/* ════ VARIOS ════════════════════════════════════════════════ */
.alert { border-radius:var(--radius-sm); border:none; font-size:.88rem; }
.alert-success { background:var(--success-bg); color:#065f46; }
.alert-danger  { background:var(--danger-bg); color:#991b1b; }
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); }
.empty-state i { font-size:2.6rem; color:var(--brand-light); display:block; margin-bottom:.75rem; }
.footer-app { border-top:1px solid var(--border); padding:.9rem 1.5rem; text-align:center;
  color:var(--text-muted); font-size:.8rem; background:#fff; }
.avatar-circle { width:34px; height:34px; border-radius:50%; background:var(--brand-light);
  color:var(--brand-dark); display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.78rem; flex-shrink:0; }
.text-brand { color:var(--brand); }
.mono { font-variant-numeric:tabular-nums; }

/* ════════════════════════════════════════════════════════════
   SITIO PÚBLICO — NAVBAR, LANDING, FOOTER, LEGAL
   ════════════════════════════════════════════════════════════ */
.body-public { background:#fff; }

body.body-public .navbar-public {
  background:#fff; border-bottom:1px solid var(--border);
  padding:.65rem 0; position:sticky; top:0; z-index:1050; box-shadow:var(--shadow-xs);
}
body.body-public .navbar-brand-public { color:var(--text); font-weight:800; letter-spacing:-.5px;
  display:flex; align-items:center; gap:.6rem; font-size:1.2rem; }
.brand-icon-nav { width:36px; height:36px; border-radius:10px; background:#fff;
  color:var(--brand); display:inline-flex; align-items:center; justify-content:center;
  font-size:1.25rem; flex-shrink:0; overflow:hidden; border:1px solid var(--brand-light); }
.brand-sub-nav { display:block; font-size:.58rem; letter-spacing:.18em; color:var(--text-muted);
  font-weight:600; margin-top:-2px; }
body.body-public .nav-link-public { color:var(--text-secondary); font-weight:500; padding:.45rem .8rem;
  transition:color .2s,background .2s; font-size:.9rem; border-radius:var(--radius-sm); }
body.body-public .nav-link-public:hover  { color:var(--brand); background:var(--brand-50); }
body.body-public .nav-link-public.active { color:var(--brand); font-weight:600; }
body.body-public .navbar-toggler { border-color:var(--border); box-shadow:none; padding:.35rem .55rem;
  display:inline-flex; align-items:center; justify-content:center; }
body.body-public .navbar-toggler:focus { box-shadow:0 0 0 .2rem rgba(8,138,153,.15); }
/* Fix: la regla custom (0,2,1) ganaba al display:none de Bootstrap (0,2,0) y la
   hamburguesa se veía en escritorio. Se oculta explícitamente a ≥992px (misma
   especificidad, aparece después en el CSS → gana). */
@media (min-width: 992px) {
  body.body-public .navbar-toggler { display:none; }
}
/* El navbar público es un navbar custom (sin .navbar-light/.navbar-dark), así que
   Bootstrap no pinta el icono del hamburguesa. Se define explícitamente en color brand. */
body.body-public .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,13,42,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Colapso del menú en móvil: panel blanco con sombra suave y separación */
@media (max-width: 991.98px) {
  .navbar-public .navbar-collapse {
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-md); margin-top:.6rem; padding:.6rem;
  }
  .navbar-public .navbar-collapse .navbar-nav { gap:.15rem; }
  body.body-public .navbar-public .navbar-collapse .nav-link-public { padding:.6rem .8rem; }
  body.body-public .navbar-public .navbar-collapse .ms-lg-2 { margin-left:0; }
  .navbar-public .navbar-collapse .btn { width:100%; margin-top:.25rem; }
}
.dropdown-public { border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:.4rem; font-size:.88rem; }
.dropdown-public .dropdown-item { border-radius:var(--radius-sm); padding:.5rem .8rem; }
.dropdown-public .dropdown-item:hover { background:var(--brand-50); color:var(--brand); }

/* Hero */
.hero-landing { background:linear-gradient(150deg,var(--brand-darker) 0%,var(--brand-dark) 45%,var(--brand) 100%);
  position:relative; overflow:hidden; }
.hero-landing::before { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(13,202,240,.14) 0%,transparent 60%);
  pointer-events:none; }
.min-vh-hero { min-height:86vh; }
.hero-title { color:#fff; font-weight:800; font-size:clamp(2.1rem,4.5vw,3.4rem); letter-spacing:-1px; line-height:1.08; }
.hero-sub { color:rgba(255,255,255,.75); font-size:1.05rem; max-width:520px; margin-top:1rem; }
.hero-badge { background:rgba(255,255,255,.12); color:#7ce7f2; border:1px solid rgba(255,255,255,.2);
  font-weight:600; padding:.4rem .9rem; }
.hero-trust { color:rgba(255,255,255,.7); font-size:.82rem; font-weight:500; }
.hero-mockup { perspective:1000px; }
.mockup-card { background:#fff; border-radius:16px; padding:1.5rem;
  box-shadow:0 40px 100px rgba(0,0,0,.4); transform:rotateY(-7deg) rotateX(4deg); }
.mockup-dot { width:10px; height:10px; border-radius:50%; }
.mockup-avatar { width:44px; height:44px; border-radius:14px; background:var(--brand-light);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; }
.mockup-row { display:flex; align-items:center; gap:8px; padding:.45rem .25rem;
  border-bottom:1px solid #f0f4f8; font-size:.82rem; }
.mockup-hora { width:52px; color:var(--brand); font-weight:700; flex-shrink:0; }
.mockup-nombre { flex:1; font-weight:500; }

/* ════ LANDING MODERNO ═══════════════════════════════════════ */
.landing-hero {
  background:linear-gradient(135deg,#06212e 0%,#0d1b2a 45%,#0f3a48 100%);
  position:relative; overflow:hidden;
}
.hero-bg-orbs { position:absolute; inset:0; pointer-events:none; }
.hero-bg-orbs .orb { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.hero-bg-orbs .orb-1 { width:420px; height:420px; background:rgba(8,138,153,.5); top:-120px; right:-80px;
  animation:orb-float 12s ease-in-out infinite; }
.hero-bg-orbs .orb-2 { width:320px; height:320px; background:rgba(13,202,240,.28); bottom:-100px; left:-60px;
  animation:orb-float 15s ease-in-out infinite reverse; }
.hero-bg-orbs .orb-3 { width:200px; height:200px; background:rgba(124,231,242,.2); top:40%; left:55%;
  animation:orb-float 18s ease-in-out infinite; }
@keyframes orb-float { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(24px,-20px) scale(1.08);} }
.landing-hero-title { color:#fff; font-weight:800; font-size:clamp(2.2rem,4.6vw,3.5rem);
  letter-spacing:-1.5px; line-height:1.05; }
.text-gradient { background:linear-gradient(92deg,#2dd4bf 0%,#7ce7f2 55%,#a5f3fc 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.text-gradient-dark { background:linear-gradient(92deg,var(--brand) 0%,#0ea5b7 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.landing-hero-sub { color:rgba(255,255,255,.78); font-size:1.05rem; max-width:540px; margin-top:1rem; line-height:1.6; }
.landing-hero-sub strong { color:#fff; }
.hero-pill { background:rgba(124,231,242,.12); color:#7ce7f2; border:1px solid rgba(124,231,242,.3);
  font-weight:600; font-size:.78rem; padding:.42rem .85rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4rem; }
.hero-pill-ghost { background:rgba(255,255,255,.06); color:rgba(255,255,255,.85); border-color:rgba(255,255,255,.18); }
.landing-cta { box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .2s,box-shadow .2s; }
.landing-cta:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.3); }
body.body-public .landing-cta-ghost { border-color:rgba(255,255,255,.4); }
body.body-public .landing-cta-ghost:hover { background:rgba(255,255,255,.12); color:#fff; }
.landing-hero-trust { color:rgba(255,255,255,.68); font-size:.82rem; font-weight:500; }
.landing-hero-trust i { color:#7ce7f2; }
.landing-hero-visual { position:relative; }
.fce-mockup { background:#fff; border-radius:18px; padding:1.4rem; max-width:440px; margin-left:auto;
  box-shadow:0 40px 100px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.1);
  transform:perspective(1000px) rotateY(-6deg) rotateX(2deg); transition:transform .3s; }
.fce-mockup:hover { transform:perspective(1000px) rotateY(-2deg) rotateX(1deg); }
.fce-mockup-top { display:flex; align-items:center; gap:6px; margin-bottom:.9rem; }
.fce-mockup-dot { width:10px; height:10px; border-radius:50%; }
.fce-mockup-title { margin-left:auto; color:var(--text-muted); font-size:.68rem; font-weight:600; }
.fce-mockup-patient { display:flex; align-items:center; gap:12px; margin-bottom:.8rem; }
.fce-mockup-avatar { width:44px; height:44px; border-radius:14px; background:var(--brand-light);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; }
.fce-mockup-row { display:flex; align-items:center; gap:8px; padding:.4rem .1rem;
  border-bottom:1px solid #f0f4f8; font-size:.8rem; }
.fce-mockup-label { width:64px; color:var(--brand); font-weight:700; flex-shrink:0; }
.fce-mockup-shield { display:flex; align-items:center; gap:8px; margin-top:.8rem; padding:.6rem .8rem;
  border-radius:10px; background:var(--brand-50); font-size:.74rem; color:var(--brand-dark); }
.ai-chat-card { position:absolute; left:-14px; bottom:-26px; width:min(280px, calc(100vw - 32px)); background:#fff;
  border-radius:16px; padding:.9rem 1rem; box-shadow:0 24px 60px rgba(0,0,0,.35);
  border:1px solid var(--border); animation:ai-card-float 6s ease-in-out infinite; }
@keyframes ai-card-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@media (max-width:575.98px){
  .ai-chat-card { position:static; width:100%; bottom:auto; left:auto; margin-top:.6rem; }
}
.ai-chat-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.6rem; }
.ai-chat-avatar { width:30px; height:30px; border-radius:9px; background:linear-gradient(135deg,var(--brand),#0ea5b7);
  color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; flex-shrink:0; }
.ai-live-dot { width:9px; height:9px; border-radius:50%; background:#22c55e; margin-left:auto;
  box-shadow:0 0 0 3px rgba(34,197,94,.2); animation:live-pulse 2s infinite; }
@keyframes live-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.ai-bubble { font-size:.74rem; border-radius:12px; padding:.45rem .7rem; margin-bottom:.45rem; line-height:1.45; }
.ai-bubble-in { background:#f1f5f9; color:var(--text); border-bottom-left-radius:4px; }
.ai-bubble-out { background:var(--brand); color:#fff; border-bottom-right-radius:4px; margin-left:auto; }
.ai-chat-foot { font-size:.66rem; color:var(--text-muted); display:flex; align-items:center; gap:.3rem; }
.hero-wave { position:absolute; bottom:-1px; left:0; right:0; line-height:0; z-index:2; }
.hero-wave svg { width:100%; height:48px; max-height:48px; display:block; }
@media (max-width:575.98px){ .hero-wave svg { height:28px; max-height:28px; } }

.landing-trust { background:#fff; border-bottom:1px solid var(--border); }
.trust-item { display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.4rem; }
.trust-item i { font-size:1.5rem; color:var(--brand); }
.trust-item strong { font-size:1.02rem; color:var(--text); }
.trust-item span { font-size:.75rem; color:var(--text-muted); }

.landing-section-title { font-size:clamp(1.6rem,2.6vw,2.2rem); letter-spacing:-.7px; }
.feature-tag { position:absolute; top:1rem; right:1rem; background:var(--brand); color:#fff;
  font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.25rem .6rem; border-radius:999px; }
.feature-card { position:relative; }

.landing-ia-feature { background:linear-gradient(150deg,#06212e 0%,#0d1b2a 55%,#0f3a48 100%);
  position:relative; overflow:hidden; }
.landing-ia-feature::before { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 20% 30%,rgba(13,202,240,.12) 0%,transparent 60%);
  pointer-events:none; }
.ia-feature-row { display:flex; align-items:flex-start; gap:.8rem; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:.9rem 1.1rem; max-width:460px; transition:background .2s,border-color .2s; }
.ia-feature-row:hover { background:rgba(255,255,255,.09); border-color:rgba(124,231,242,.35); }
.ia-feature-row i { color:#7ce7f2; font-size:1.25rem; margin-top:2px; }
.ia-phone-card { background:#0b1522; border:1px solid rgba(124,231,242,.2); border-radius:22px;
  max-width:400px; margin:0 auto; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.ia-phone-head { display:flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem;
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff; font-weight:700; font-size:.85rem; }
.ia-phone-body { padding:1.1rem; display:flex; flex-direction:column; gap:.55rem; min-height:260px; }
.chat-line { display:flex; }
.chat-line-ia { justify-content:flex-start; }
.chat-bubble { max-width:82%; font-size:.8rem; line-height:1.5; padding:.6rem .85rem; border-radius:14px; }
.chat-bubble-user { background:rgba(124,231,242,.18); color:#c9f5fa; border-bottom-right-radius:4px; }
.chat-bubble-bot { background:rgba(255,255,255,.08); color:rgba(255,255,255,.88); border-bottom-left-radius:4px; }
.ia-phone-foot { padding:.7rem 1.1rem; border-top:1px solid rgba(255,255,255,.08);
  color:#7ce7f2; font-size:.72rem; display:flex; align-items:center; gap:.35rem; }

.landing-final-cta { background:#f0fbfc; position:relative; }
.landing-final-card { background:#fff; border:1px solid var(--border); border-radius:24px;
  padding:3rem 1.5rem; max-width:760px; margin:0 auto; box-shadow:var(--shadow-md); }
.final-emoji { font-size:2.4rem; display:block; margin-bottom:.6rem; }
.final-mini { font-size:.82rem; color:var(--text-secondary); }
.final-mini span { display:inline-flex; align-items:center; gap:.3rem; }

[data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
[data-reveal].revealed { opacity:1; transform:none; }
@media (max-width:991px){
  .fce-mockup { margin:0 auto; transform:none; }
  .ai-chat-card { position:static; margin:1.2rem auto 0; }
  .landing-hero-visual { margin-top:1.5rem; }
}

/* Secciones */
.section-eyebrow { display:inline-block; color:var(--brand); font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.12em; background:var(--brand-light);
  padding:.3rem .8rem; border-radius:999px; }
.landing-stat { width:54px; height:54px; border-radius:14px; background:var(--brand-light);
  color:var(--brand); display:inline-flex; align-items:center; justify-content:center;
  font-size:1.4rem; margin-bottom:.6rem; }
.feature-card { background:#fff; border-radius:var(--radius-lg); padding:1.75rem;
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:box-shadow .25s,transform .25s,border-color .25s; height:100%; }
.feature-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); border-color:var(--brand-light); }
.feature-icon { width:52px; height:52px; border-radius:14px; background:var(--brand-light);
  color:var(--brand); display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:1.1rem; transition:background .2s; }
.feature-card:hover .feature-icon { background:var(--brand); color:#fff; }
.step-circle { width:56px; height:56px; background:var(--brand); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.2rem;
  margin:0 auto 1rem; box-shadow:0 4px 14px rgba(8,138,153,.4); }
.specialty-pill { background:#fff; border:1px solid var(--border); border-radius:var(--radius-full);
  padding:.5rem 1.1rem; display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem;
  font-weight:500; color:var(--text-secondary); transition:all .2s; }
.specialty-pill:hover { border-color:var(--brand); color:var(--brand); background:var(--brand-50);
  transform:translateY(-1px); }
.role-card { background:#fff; border-radius:var(--radius-lg); padding:1.4rem; border:1px solid var(--border);
  box-shadow:var(--shadow-sm); height:100%; transition:transform .2s,box-shadow .2s; }
.role-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.role-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center;
  justify-content:center; font-size:1.15rem; margin-bottom:.8rem; }
.value-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1rem; height:100%; display:flex; flex-direction:column; gap:.35rem; box-shadow:var(--shadow-xs); }
.about-visual { background:var(--brand-50); border:1px solid var(--brand-light);
  border-radius:var(--radius-lg); padding:2.5rem; text-align:center; box-shadow:var(--shadow-sm); }
.about-visual-icon { width:84px; height:84px; border-radius:24px; background:#fff; color:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; font-size:2.6rem;
  box-shadow:var(--shadow-brand); overflow:hidden; padding:8px; }
.legal-block { background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; margin-bottom:1.25rem; box-shadow:var(--shadow-xs); }
.page-hero { padding-top:2rem; }

/* Directorio */
.clinic-card { background:#fff; border-radius:var(--radius-lg); padding:1.5rem;
  border:1px solid var(--border); box-shadow:var(--shadow-sm); height:100%; }
.clinic-logo { width:52px; height:52px; border-radius:14px; background:var(--brand-light);
  display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; }
.clinic-data { margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem;
  color:var(--text-secondary); font-size:.85rem; display:flex; flex-direction:column; gap:.4rem; }
.doctor-card { background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  border:1px solid var(--border); transition:box-shadow .25s,transform .25s; overflow:hidden; height:100%; }
.doctor-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.doctor-card-stripe { height:5px; }
.doctor-card-body { padding:1.25rem; }

/* Directorio moderno (2026-08-21) */
.directorio-hero-card { background:#fff; border-radius:20px; padding:1.5rem;
  box-shadow:0 30px 80px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); }
.directorio-hero-head { display:flex; align-items:center; gap:.55rem; font-weight:800;
  color:var(--brand-dark); margin-bottom:1rem; }
.directorio-hero-head i { font-size:1.15rem; color:var(--brand); }
.directorio-chip { background:#f8fafc; border:1px solid var(--border); color:var(--text-secondary);
  border-radius:999px; font-size:.78rem; font-weight:600; }
.directorio-chip:hover { border-color:var(--brand); color:var(--brand); }
.directorio-chip.activo { background:var(--brand); border-color:var(--brand); color:#fff; }
.directorio-hero-note { margin-top:1rem; font-size:.74rem; color:var(--text-muted); }
.directorio-filtro-titulo { font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--brand-dark); margin: .25rem 0 .5rem; display:flex; align-items:center; gap:.35rem; }
.dir-clinic-card { display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s, border-color .2s; }
.dir-clinic-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand-light); }
.dir-clinic-logo { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; width:56px; height:56px;
  border-radius:16px; font-size:1.5rem; box-shadow:0 6px 16px rgba(8,138,153,.3); }
.dir-clinic-data { flex:1; }
.dir-clinic-data a:hover { color:var(--brand); }
.dir-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:1rem;
  padding-top:.85rem; border-top:1px solid var(--border); }
.dir-card-foot-note { font-size:.7rem; color:var(--text-muted); }
.dir-doctor-card { border-radius:18px; }
.dir-doctor-avatar { box-shadow:0 4px 12px rgba(8,138,153,.18); }
.dir-registro { display:inline-flex; align-items:center; gap:.4rem; background:var(--brand-50);
  color:var(--brand-dark); border-radius:10px; padding:.4rem .7rem; font-size:.74rem; font-weight:600; }

/* Footer */
.footer-public { background:#0d1b2a; color:rgba(255,255,255,.6); padding:4.5rem 0 2rem; }
.footer-public h6 { color:rgba(255,255,255,.9); font-weight:600; margin-bottom:1.1rem;
  font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.footer-public a { color:rgba(255,255,255,.5); text-decoration:none; font-size:.875rem;
  display:block; margin-bottom:.45rem; transition:color .2s; cursor:pointer; }
.footer-public a:hover { color:#fff; }
.footer-public .foot-brand { font-size:1.35rem; font-weight:800; color:#fff;
  letter-spacing:-.5px; display:flex; align-items:center; gap:.5rem; }
.footer-chip { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.6); font-size:.75rem; border-radius:999px; padding:.3rem .7rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.07); margin-top:3rem; padding-top:1.5rem;
  font-size:.78rem; color:rgba(255,255,255,.3); }

/* Banner de cookies */
.cookie-banner { position:fixed; bottom:0; left:0; right:0; background:#fff;
  border-top:2px solid var(--brand); padding:.85rem 1.25rem; box-shadow:0 -4px 16px rgba(0,0,0,.1);
  z-index:1050; animation:slide-up .3s ease; display:none; }
.cookie-banner.show { display:block; }
.cookie-banner a { color:var(--brand); font-weight:600; }
@keyframes slide-up { from{transform:translateY(100%)} to{transform:translateY(0)} }

/* ════════════════════════════════════════════════════════════
   FCE — FICHA CLÍNICA A PANTALLA COMPLETA CON WIZARD
   ════════════════════════════════════════════════════════════ */
.fce-body { background:var(--bg); min-height:100vh; }
.fce-topbar { position:sticky; top:0; z-index:1000; background:var(--sidebar-bg);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem 1.5rem; box-shadow:var(--shadow-md); }
.fce-brand { display:flex; align-items:center; gap:.65rem; text-decoration:none; color:#fff; }
.fce-brand-icon { width:36px; height:36px; border-radius:9px; background:#fff;
  color:#fff; display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.fce-brand strong { font-weight:800; letter-spacing:-.4px; display:block; line-height:1.1; }
.fce-brand small { font-size:.58rem; letter-spacing:.14em; color:rgba(255,255,255,.4); font-weight:600; }
.fce-topbar-actions { display:flex; align-items:center; gap:.6rem; }
.fce-topbar-actions .btn-ghost { color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.25); }
.fce-topbar-actions .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; }
.fce-hint { color:rgba(255,255,255,.4); font-size:.75rem; }
.fce-main { max-width:1400px; margin:0 auto; padding:1.75rem 1.5rem 4rem; }

/* Wizard por pasos */
.fce-wizard-steps { display:flex; justify-content:center; align-items:center; gap:0; margin-bottom:1.75rem; flex-wrap:wrap; }
.fce-wizard-step { display:flex; flex-direction:column; align-items:center; cursor:pointer; background:none; border:none; }
.fce-wizard-bubble { width:42px; height:42px; border-radius:50%; background:#e2e8f0; color:#94a3b8;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem;
  transition:transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease; }
.fce-wizard-step.active .fce-wizard-bubble { background:var(--brand); color:#fff; box-shadow:0 0 0 5px var(--brand-light); }
.fce-wizard-step.completed .fce-wizard-bubble { background:var(--success); color:#fff; }
.fce-wizard-label { font-size:.75rem; color:var(--text-muted); margin-top:6px; font-weight:500; white-space:nowrap; }
.fce-wizard-step.active .fce-wizard-label { color:var(--brand); font-weight:600; }
.fce-wizard-connector { width:56px; height:2px; background:#e2e8f0; margin-bottom:24px; transition:background .3s; }
.fce-wizard-connector.completed { background:var(--success); }
.fce-progress { height:5px; border-radius:999px; background:#e2e8f0; margin-bottom:1.5rem; overflow:hidden; }
.fce-progress-bar { height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-dark));
  border-radius:999px; width:100%; transform:scaleX(.25); transform-origin:left;
  transition:transform .35s ease; will-change:transform; }
.fce-step { animation:fade-step .25s ease; }
@keyframes fade-step { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.fce-nav { position:sticky; bottom:0; background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:.9rem 1.1rem; display:flex; align-items:center;
  gap:.6rem; flex-wrap:wrap; box-shadow:var(--shadow-md); margin-top:1.25rem; z-index:50; }
.fce-nav .fce-nav-sep { flex:1; }
@media (max-width:767px){
  .fce-topbar { padding:.5rem .9rem; flex-wrap:wrap; row-gap:.45rem; }
  .fce-topbar-actions { flex-wrap:wrap; gap:.4rem; }
  .fce-topbar-actions .btn { font-size:.72rem; padding:.3rem .55rem; white-space:nowrap; }
  .fce-hint { display:none; }
  .fce-main { padding:1rem .75rem 4rem; }
  .fce-wizard-connector { width:20px; }
  .fce-wizard-label { font-size:.62rem; }
  .fce-nav { padding:.6rem .7rem; gap:.4rem; }
  .fce-nav .btn { flex:1 1 auto; }
}

/* Tablas de datos en móvil y tablet: scroll horizontal DENTRO de la tarjeta.
   El breakpoint se alinea con el colapso del sidebar (991px) para cubrir
   también el rango 768–991px donde antes la tabla sobresalía sin scroll. */
@media (max-width:991.98px){
  .panel-card > .panel-card-body.p-0 { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .panel-card > .panel-card-body.p-0 > .table-panel,
  .panel-card > .panel-card-body.p-0 > table.table { min-width:640px; }
}

/* RS-09: el gutter g-5 de Bootstrap (3rem) desbordaba 11px por lado en móvil
   dentro del .container (padding 12px). Se ajusta el gutter a 1.5rem en móvil. */
@media (max-width:575.98px){
  .container .g-5, .container-fluid .g-5,
  .container .g-4, .container-fluid .g-4 {
    --bs-gutter-x: 1.5rem;
    margin-inline: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   HISTORIAL CLÍNICO — LÍNEA DE TIEMPO
   ════════════════════════════════════════════════════════════ */
.historial-card { position:relative; padding-left:2rem; margin-bottom:1.25rem; }
.historial-card::before { content:''; position:absolute; left:9px; top:14px; bottom:-14px;
  width:2px; background:var(--brand-light); }
.historial-card:last-child::before { display:none; }
.historial-dot { position:absolute; left:0; top:10px; width:20px; height:20px; border-radius:50%;
  background:var(--brand); border:4px solid var(--brand-light); box-shadow:0 0 0 3px #fff; }
.historial-body { box-shadow:var(--shadow-sm); }
.historial-header { display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; flex-wrap:wrap; padding:.9rem 1.1rem; border-bottom:1px solid var(--border);
  background:var(--brand-50); }
.historial-fecha { font-weight:700; color:var(--brand-dark); font-size:.88rem; }
.historial-cuerpo { padding:1rem 1.1rem; }
.historial-row { display:flex; gap:.6rem; font-size:.85rem; color:var(--text-secondary);
  padding:.4rem 0; border-bottom:1px dashed var(--border); flex-wrap:wrap; }
.historial-row:last-of-type { border-bottom:none; }
.historial-tag { flex-shrink:0; width:96px; font-weight:700; color:var(--text); font-size:.78rem; }
.historial-item { font-size:.84rem; padding:.15rem 0; color:var(--text-secondary); }
.historial-evoluciones { margin-top:.6rem; padding:.7rem .9rem; background:var(--bg);
  border-radius:var(--radius-sm); font-size:.84rem; }

/* Resumen de historial dentro del wizard */
.historial-mini { border:1px dashed var(--brand); border-radius:var(--radius);
  background:var(--brand-50); padding:1rem 1.1rem; margin-bottom:1.25rem; }
.historial-mini-item { display:flex; align-items:center; gap:.6rem; padding:.4rem 0;
  border-bottom:1px solid rgba(8,138,153,.12); font-size:.82rem; }
.historial-mini-item:last-child { border-bottom:none; }

/* Modal de historial */
#modalHistorial .modal-content { border:none; border-radius:var(--radius-lg); overflow:hidden; }
#modalHistorial .modal-header { background:var(--brand-50); border-bottom:1px solid var(--brand-light); }
.historial-tabs .nav-link { color:var(--text-secondary); font-weight:600; font-size:.82rem;
  border-radius:999px; padding:.4rem .9rem; }
.historial-tabs .nav-link:hover { color:var(--brand); }
.historial-tabs .nav-link.active { background:var(--brand); color:#fff; }
.historial-tabs .nav-link .badge { margin-left:.25rem; }
.historial-toggle { display:flex; align-items:center; gap:.6rem; width:100%;
  background:none; border:none; text-align:left; padding:.75rem 1rem; cursor:pointer;
  transition:background .15s; font-size:.86rem; }
.historial-toggle:hover { background:var(--brand-50); }
.historial-motivo { color:var(--text-secondary); font-size:.84rem; min-width:0; }
.historial-chevron { color:var(--text-muted); transition:transform .25s; flex-shrink:0; }
.historial-toggle[aria-expanded="true"] .historial-chevron { transform:rotate(180deg); }
.examen-fila { padding:.55rem .75rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  margin-bottom:.45rem; background:var(--bg); }
.examen-fila-anormal { border-color:#fecaca; background:var(--danger-bg); }

/* ════════════════════════════════════════════════════════════
   MÓDULO DE URGENCIAS — TABLERO DE TRIAGE
   ════════════════════════════════════════════════════════════ */
.col-urg-critico .panel-card-title { color:var(--danger); }
.col-urg-critico { border-top:3px solid var(--danger); }
.col-urg-grave .panel-card-title { color:#ea580c; }
.col-urg-grave { border-top:3px solid #ea580c; }
.col-urg-moderado .panel-card-title { color:var(--warning); }
.col-urg-moderado { border-top:3px solid var(--warning); }
.col-urg-leve .panel-card-title { color:var(--success); }
.col-urg-leve { border-top:3px solid var(--success); }
.urg-col-panel { border-top:0; overflow:hidden; }
.urg-col-head { border-bottom:1px solid var(--border); background:var(--bg); }
.urg-col-head .panel-card-title { font-weight:700; }
.urg-col-count { min-width:24px; height:24px; padding:0 .45rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.urg-columna { min-height:180px; display:flex; flex-direction:column; gap:.6rem; background:var(--bg-soft, #f8fafc); }
.urg-vacio { text-align:center; color:var(--text-muted); font-size:.78rem; padding:1.2rem 0; }
.urg-vacio i { font-size:1.6rem; display:block; margin-bottom:.3rem; opacity:.5; }
.urg-card { border:1px solid var(--border); border-radius:14px;
  padding:.75rem .8rem; background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.06);
  transition:box-shadow .2s, transform .2s; }
.urg-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.urg-avatar { width:38px; height:38px; border-radius:12px; background:var(--brand-light);
  display:flex; align-items:center; justify-content:center; font-size:1.15rem; overflow:hidden; flex-shrink:0; }
.urg-avatar img { width:100%; height:100%; object-fit:cover; }
.urg-especie { font-size:.68rem; color:var(--text-muted); }
.urg-motivo { font-size:.76rem; color:var(--text-secondary); margin-top:.25rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.urg-pie { display:flex; align-items:center; justify-content:space-between; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.urg-espera { font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:.25rem; }
.urg-meta { font-size:.68rem; color:var(--text-muted); }
.urg-badge-atencion { animation:urg-aten-blink 2s infinite; }
@@keyframes urg-aten-blink { 0%,100%{opacity:1;} 50%{opacity:.6;} }
.triage-option { border:2px solid var(--border); border-radius:var(--radius-sm);
  padding:.7rem .8rem; transition:border-color .2s,background .2s; }
.triage-option:hover { border-color:var(--brand); background:var(--brand-50); }
.triage-option:has(input:checked) { border-color:var(--brand); background:var(--brand-light); }
.triage-icon { width:40px; height:40px; border-radius:12px; display:inline-flex;
  align-items:center; justify-content:center; font-size:1.15rem; flex-shrink:0; }

/* ════════════════════════════════════════════════════════════
   PULIDO RESPONSIVE Y RENDIMIENTO (auditoría)
   ════════════════════════════════════════════════════════════ */
/* RS-05: altura dinámica del viewport móvil (fallback 100vh → 100dvh) */
.admin-layout, .fce-body, .auth-wrapper, .min-vh-hero {
  min-height:100vh;
  min-height:100dvh;
}

/* RS-06: texto largo en celdas y códigos no desborda el layout */
.table-panel tbody td, .mono { overflow-wrap:anywhere; word-break:break-word; }

/* RS-08: las tarjetas de stats no empujan el ancho del contenedor */
.stat-card { min-width:0; }
.stat-card > div { min-width:0; }

/* RS-04: objetivos táctiles mínimos en móvil (WCAG 2.5.8 / 44×44px) */
@media (max-width:575.98px){
  .sidebar-toggle { width:44px; height:44px; }
  .btn-sm, .panel-card-header .btn, .panel-card-header .btn-sm,
  .fce-nav .btn, .tutor-tabs a, .historial-tabs .nav-link,
  .dropdown-item, .btn-nav, .navbar-toggler { min-width:44px; min-height:44px; }
  .tutor-tabs a, .historial-tabs .nav-link { padding:.7rem .9rem; }
  .agenda-hero .btn-nav { padding:.5rem .75rem; }
  .dropdown-item { padding:.6rem .9rem; }
  .sidebar-link { padding:.7rem 1.25rem; }
}

/* ═══════════════════ TOUR DE ONBOARDING (tours.js) ═══════════════════ */
#clinimalsTourOverlay {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(13,27,42,.0); pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
#clinimalsTourOverlay.visible { opacity: 1; background: rgba(13,27,42,.55); }

#clinimalsTourSpotlight {
  position: fixed; z-index: 9999; pointer-events: none;
  border: 3px solid var(--brand, #088a99);
  border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(13,27,42,.55);
  opacity: 0; transition: opacity .2s ease;
  /* la reposición es instantánea (sin transición de left/top/width/height) para
     evitar reflow/repaint por frame; solo se anima la entrada con opacity */
  will-change: left, top, width, height, opacity;
}
#clinimalsTourSpotlight.visible { opacity: 1; }

#clinimalsTourPopover {
  position: fixed; z-index: 10000;
  width: 320px; max-width: calc(100vw - 24px);
  background: #fff; color: #0d1b2a;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(13,27,42,.35);
  padding: 16px 18px 14px;
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
#clinimalsTourPopover.visible { opacity: 1; transform: translateY(0); }

#clinimalsTourPopover .clinimals-tour-popover-arrow {
  position: absolute; width: 14px; height: 14px; background: #fff;
  transform: rotate(45deg); box-shadow: 0 0 0 rgba(0,0,0,0); z-index: -1;
}
#clinimalsTourPopover[data-lado="bottom"] .clinimals-tour-popover-arrow { top: -7px; left: 50%; margin-left: -7px; }
#clinimalsTourPopover[data-lado="top"] .clinimals-tour-popover-arrow { bottom: -7px; left: 50%; margin-left: -7px; }
#clinimalsTourPopover[data-lado="right"] .clinimals-tour-popover-arrow { left: -7px; top: 50%; margin-top: -7px; }
#clinimalsTourPopover[data-lado="left"] .clinimals-tour-popover-arrow { right: -7px; top: 50%; margin-top: -7px; }

.clinimals-tour-popover-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.clinimals-tour-popover-title { font-size:.95rem; color:var(--brand-dark, #0d1b2a); display:block; }
.clinimals-tour-popover-close {
  border:0; background:transparent; font-size:1.25rem; line-height:1;
  color:#8a94a6; cursor:pointer; padding:0 2px;
}
.clinimals-tour-popover-close:hover { color:#0d1b2a; }
.clinimals-tour-popover-desc { font-size:.85rem; color:#4a5568; margin:.5rem 0 .75rem; line-height:1.45; }

.clinimals-tour-popover-dots { display:flex; gap:5px; margin-bottom:.75rem; }
.clinimals-tour-dot { width:7px; height:7px; border-radius:50%; background:#d4dae3; }
.clinimals-tour-dot.activo { background:var(--brand, #088a99); }

.clinimals-tour-popover-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.clinimals-tour-count { font-size:.72rem; color:#8a94a6; }
.clinimals-tour-actions { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.clinimals-tour-btn {
  border:1px solid #d4dae3; background:#fff; color:#334155;
  border-radius:8px; font-size:.78rem; padding:.35rem .7rem; cursor:pointer;
}
.clinimals-tour-btn-primary { background:var(--brand, #088a99); border-color:var(--brand, #088a99); color:#fff; font-weight:600; }
.clinimals-tour-btn:disabled { opacity:.45; cursor:not-allowed; }
.clinimals-tour-skip { border-color:transparent; color:#8a94a6; }
.clinimals-tour-btn-primary:hover { filter:brightness(1.06); }

body.clinimals-tour-activo { overflow:hidden; }

/* Botón de tour en el header */
.btn-tour { display:inline-flex; align-items:center; gap:.4rem; }

/* ── Manual del sistema ── */
.manual-cards .manual-card {
  border:1px solid #e5e9f0; border-radius:14px; background:#fff;
  transition: transform .15s ease, box-shadow .15s ease;
  height:100%;
}
.manual-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,27,42,.08); }
.manual-card .manual-card-icon {
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--brand, #088a99); background:var(--brand-light, #e6f4f5);
}
.manual-role-badge { font-size:.72rem; padding:.2rem .55rem; border-radius:999px; }
.manual-table td, .manual-table th { vertical-align:top; }
.manual-rol-destacado { background:var(--brand-light, #e6f4f5); }
.manual-sidenav .nav-link {
  color:#4a5568; border-radius:8px; font-size:.85rem; padding:.45rem .7rem;
}
.manual-sidenav .nav-link.active { background:var(--brand, #088a99); color:#fff; }
.manual-sidenav .nav-link:hover:not(.active) { background:#f1f5f9; }
.manual-section h5 { color:var(--brand-dark, #0d1b2a); margin-top:1.4rem; }
.manual-section h5:first-child { margin-top:0; }

/* ═══════════════════ SUSCRIPCIÓN (planes / Mercado Pago) ═══════════════════ */
.plan-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.plan-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,27,42,.08); }
.plan-card.plan-activo { border:2px solid var(--brand, #088a99); box-shadow:0 10px 24px rgba(8,138,153,.15); }
.periodo-opt { min-width:110px; }

/* ═══════════════════ CHATBOT ASISTENTE (Gemini) ═══════════════════ */
.chatbot { position:fixed; right:18px; bottom:18px; z-index:10500; }
.chatbot-fab {
  width:56px; height:56px; border-radius:50%; border:0;
  background:var(--brand, #088a99); color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(8,138,153,.4); cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
.chatbot-fab:hover { transform:scale(1.06); filter:brightness(1.08); }
.chatbot-panel {
  position:absolute; right:0; bottom:64px;
  width:360px; max-width:calc(100vw - 24px); height:480px; max-height:calc(100dvh - 90px);
  background:#fff; border-radius:16px; box-shadow:0 20px 60px rgba(13,27,42,.35);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.chatbot-panel.abierto { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.chatbot-header {
  display:flex; align-items:center; gap:.6rem;
  padding:.8rem 1rem; color:#fff;
  background:linear-gradient(135deg, var(--brand, #088a99), #065f6b);
}
.chatbot-avatar {
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.chatbot-header small { opacity:.85; }
.chatbot-close { border:0; background:transparent; color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; }
.chatbot-mensajes { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:.6rem; background:#f4f7f9; }
.chatbot-msg {
  max-width:85%; padding:.6rem .8rem; border-radius:12px; font-size:.85rem; line-height:1.45; white-space:normal;
}
.chatbot-msg-bot { align-self:flex-start; background:#fff; border:1px solid #e5e9f0; border-bottom-left-radius:4px; color:#334155; }
.chatbot-msg-usuario { align-self:flex-end; background:var(--brand, #088a99); color:#fff; border-bottom-right-radius:4px; }
.chatbot-msg-typing { color:#8a94a6; font-style:italic; }
.chatbot-chips { display:flex; gap:.4rem; padding:.6rem .8rem; flex-wrap:wrap; border-top:1px solid #eef1f5; }
.chatbot-chips button {
  border:1px solid #cfe8ea; background:var(--brand-light, #e6f4f5); color:var(--brand-dark, #065f6b);
  border-radius:999px; font-size:.72rem; padding:.3rem .6rem; cursor:pointer;
}
.chatbot-chips button:hover { background:#d5edef; }
.chatbot-input { display:flex; gap:.5rem; padding:.6rem .8rem; border-top:1px solid #eef1f5; background:#fff; }
.chatbot-input input {
  flex:1; border:1px solid #d4dae3; border-radius:10px; padding:.55rem .75rem; font-size:.85rem; outline:none;
}
.chatbot-input input:focus { border-color:var(--brand, #088a99); }
.chatbot-input button {
  width:42px; border:0; border-radius:10px; background:var(--brand, #088a99); color:#fff; font-size:1rem; cursor:pointer;
}
.chatbot-note { font-size:.66rem; color:#8a94a6; text-align:center; padding:.4rem; background:#fff; }