/*
 ╔══════════════════════════════════════════════════════════════╗
 ║           OCHOMANOS — DESIGN SYSTEM                         ║
 ║           Fuente de verdad: tipografía, botones,            ║
 ║           colores, radios, sombras y componentes compartidos ║
 ╚══════════════════════════════════════════════════════════════╝

 JERARQUÍA TIPOGRÁFICA — escala Mayor Tercera (~1.25), fluida con clamp()
 ─────────────────────────────────────────────
 Headings → Domine Bold          [768px min]  → [1440px max]
   --display  clamp(28px,2.78vw,40px)   Hero "Bienvenido"
   --h1       clamp(24px,2.22vw,32px)   Títulos de página
   --h2       clamp(20px,1.81vw,26px)   Títulos de sección en cards ("Agenda", "Citas del día")
   --h3       clamp(17px,1.46vw,21px)   Quick card titles, KPI numbers
   --h4       clamp(14px,1.18vw,17px)   Subtítulos menores
   --h5       clamp(12px,0.97vw,14px)   Subtítulos de sección

 Aliases (apuntan a headings, para compatibilidad):
   --text-card-title → var(--h2)   Títulos tipo "Agenda" en cards
   --text-qcard      → var(--h3)   Quick card h3 + kpi-num

 Body → Rubik (interfaz, incluido hero sub)
   --text-hero  clamp(15px,1.11vw,16px)  Subtítulo hero (Rubik)
   --text-lg    17px  Cuerpo grande, botón de card
   --text-base  15px  Navegación, cuerpo general, botones CTA
   --text-sm    14px  Texto secundario, botones
   --text-xs    13px  Tabs, labels secundarios, botones pequeños
   --text-2xs   12px  Labels de filtro, cabeceras de columna
   --text-3xs   11px  Badges, texto fino
   --text-micro  9px  Texto de fine print (nota upgrade)

 SISTEMA DE BOTONES
 ─────────────────────────────────────────────
   Primary    → text-base · pad 11px 18px · radius 22px  (CTAs principales)
   Secondary  → text-xs   · pad  6px 16px · radius 15px  (acciones en cards)
   Tertiary   → text-xs   · pad  7px 10px · radius 11px  (ghost/texto)
   Filter     → text-xs   · pad  0  13px  · radius 15px  (tabs filtro)
*/

@import url('https://fonts.googleapis.com/css2?family=Domine:wght@700&family=Rubik:wght@400;500;600;700&display=swap');

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
  /* ── Escala tipográfica — Mayor Tercera (~1.25), fluida con clamp() ── */
  --display:   clamp(28px, 2.78vw, 40px);  /* 40px @ 1440 */
  --h1:        clamp(24px, 2.22vw, 32px);  /* 32px @ 1440 */
  --h2:        clamp(20px, 1.81vw, 26px);  /* 26px @ 1440 */
  --h3:        clamp(17px, 1.39vw, 20px);  /* 20px @ 1440 */
  --h4:        clamp(13px, 1.11vw, 16px);  /* 16px @ 1440 */
  --h5:        clamp(12px, 0.97vw, 14px);  /* 14px @ 1440 */

  --text-hero: clamp(15px, 1.11vw, 16px);  /* 18px @ 1440 */
  --text-xl:        20px;        /* nav numbers, misc intermediate */
  --text-banner-title: 22px;     /* Título banner "Agendar Cita" */
  --text-card-title: var(--h2);  /* alias → títulos de sección en cards */
  --text-qcard:      var(--h3);  /* alias → quick card h3 + kpi-num */
  --text-table:     12px;        /* celdas de tabla */
  --text-lg:   17px;
  --text-base: 16px;
  --text-sm:   14px;
  --text-xs:   13px;
  --text-2xs:  12px;
  --text-3xs:  11px;
  --text-micro: 9px;

  /* ── Sistema de botones ── */
  --btn-p-font:    var(--text-base);   /* Primary */
  --btn-p-weight:  500;
  --btn-p-pad:     10px 19px;
  --btn-p-radius:  var(--radius-lg);

  --btn-s-font:    var(--text-xs);     /* Secondary */
  --btn-s-weight:  600;
  --btn-s-pad:     5px 19px;
  --btn-s-radius:  var(--radius-lg);

  --btn-t-font:    var(--text-xs);     /* Tertiary */
  --btn-t-weight:  400;
  --btn-t-pad:     8px 11px;
  --btn-t-radius:  11px;

  /* Filter tabs — estándar: pill oscuro igual que "Hoy/Mañana" del Home */
  --btn-f-font:    var(--text-xs);     /* 12px */
  --btn-f-weight:  400;
  --btn-f-pad:     0 14px;
  --btn-f-radius:  15px;

  /* ── Border radius (3 escalones + full) ── */
  --radius-sm:     10px;        /* action buttons en tablas, inputs internos */
  --radius-md:     15px;        /* cards, pills/tags, notas, KPIs */
  --radius-lg:     20px;        /* contenedores principales, botones, tablas, chat */
  --radius-full:   9999px;      /* avatares, dots */

  /* Aliases legacy — apuntan a la escala simplificada */
  --radius-xs:     var(--radius-sm);
  --radius-card:   var(--radius-md);
  --radius-pill:   var(--radius-lg);
  --radius-hero:   var(--radius-lg);
  --radius-qcard:  var(--radius-lg);

  /* ── KPI icons ── */
  --kpi-icon-size:    44px;
  --kpi-icon-radius:  11px;

  /* ── Colores neutros ── */
  --c-bg:          #f4f4f4;
  --c-ink:         #2a2a2a;
  --c-sidebar:     #171717;
  --c-dark:        #171717;
  --c-dark-2:      #2a2a2a;
  --c-card:        #fefefe;
  --c-muted:       #f4f4f4;
  --c-text:        #171717;
  --c-text-inv:    #f4f4f4;
  --c-text-off:    #f4f5f9;
  --c-text-sub:    rgba(23, 23, 23, 0.55);
  --c-placeholder: #9a9a9a;
  --c-data:        #6e6f74;
  --c-divider:     #f4f4f4;

  /* ── Acento de marca ── */
  --c-amber:       #ffb547;
  --c-amber-text:  #b5720a;     /* versión oscura del amber, para texto legible sobre --c-card */

  /* ── Colores funcionales (no de marca — solo para estados de UI) ── */
  --c-red:         #df2e34;     /* errores, campos requeridos, valores negativos */
  --c-lime:        #abc95a;     /* éxito, checks, confirmación */
  --c-lime-text:   #2a4a00;     /* texto sobre --c-lime */
  --c-success:     #2a6e1a;     /* texto positivo: ingresos, pagado */
  --c-blue:        #5ab2f9;     /* info, links funcionales */

  /* ── Pills de estado de agenda (bg + texto) ── */
  --c-status-confirmada-bg:  #d3ef88;  --c-status-confirmada-fg:  #405800;
  --c-status-asignada-bg:    #ffdfaf;  --c-status-asignada-fg:    #4a310d;
  --c-status-atendida-bg:    #d4ecff;  --c-status-atendida-fg:    #003661;
  --c-status-cancelada-bg:   #ffcee6;  --c-status-cancelada-fg:   #510027;
  --c-status-nocumplida-bg:  #ffd4d1;  --c-status-nocumplida-fg:  #6e120d;
  --c-status-ensala-bg:      #fdf0a6;  --c-status-ensala-fg:      #5f5300;
  --c-status-reasignada-bg:  #e7dbff;  --c-status-reasignada-fg:  #3d2a73;

  /* ── Sombras ── */
  --shadow-sm:   0 3px 20px rgba(0, 0, 0, 0.18);
  --shadow-md:   0 4px 26px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 5px 30px rgba(0, 0, 0, 0.06);
}

/* ══════════════════════════════════════
   RESET & BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Rubik', sans-serif;
  background: var(--c-bg);
  display: flex;
  min-height: 100vh;
  color: var(--c-text);
  overflow-x: hidden;
}

/* ══════════════════════════════════════
   SIDEBAR
══════════════════════════════════════ */
.sidebar {
  width: 205px; min-width: 205px;
  background: var(--c-sidebar);
  margin: 10px 0 10px 10px;
  border-radius: var(--radius-lg);
  height: calc(100vh - 20px); min-height: calc(100vh - 20px);
  position: sticky; top: 10px;
  display: flex; flex-direction: column;
  gap: 16px; padding: 28px 20px; overflow-y: auto; z-index: 100;
}

.sidebar-top { display: flex; flex-direction: column; gap: 26px; min-height: 0; }

.logo-wrap { padding: 0 11px; }
.logo-wrap img { height: 21px; width: auto; display: block; }

.nav { display: flex; flex-direction: column; gap: 6px; }

.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 11px; border-radius: var(--radius-sm);
  color: var(--c-text-inv); font-size: var(--text-sm); font-weight: 400;
  cursor: pointer; text-decoration: none; transition: background 0.15s; line-height: 1;
}
.nav-item:hover { background: #1c1c1c; }
.nav-item.active { background: #272727; font-weight: 600; }
.nav-chevron { opacity: 0.55; flex-shrink: 0; }

.sidebar-bottom { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; margin-top: auto; }

.upgrade-card {
  background: linear-gradient(160deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: var(--radius-lg); position: relative;
  padding: 18px 16px 16px; margin-top: 16px; overflow: hidden;
}
.upgrade-heading {
  font-family: 'Domine', serif; font-weight: 700;
  font-size: 19.7px; color: var(--c-text-inv); line-height: 1.1;
  margin-bottom: 14px;
  position: relative; z-index: 2;
}
.upgrade-heading span { color: var(--c-amber); }
.upgrade-mascot {
  position: absolute; right: -8px; bottom: -10px;
  width: 96px; height: auto; object-fit: contain; z-index: 1;
}
.upgrade-btn {
  display: inline-block; width: auto;
  background: var(--c-amber); color: var(--c-ink);
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: var(--text-sm); padding: 8px 22px;
  border-radius: var(--radius-full); border: none; cursor: pointer;
  text-align: center; transition: filter 0.15s;
  position: relative; z-index: 2;
}
.upgrade-btn:hover { filter: brightness(0.95); }
.upgrade-note {
  font-size: var(--text-micro); color: var(--c-text-inv);
  line-height: 1.5; opacity: 0.55;
  padding: 10px 4px 0; margin: 0;
}

/* ══════════════════════════════════════
   TOPBAR ICONS (hero de todas las páginas)
══════════════════════════════════════ */
.topbar {
  position: absolute; top: 38px; right: 60px;
  display: flex; align-items: center; gap: 25px;
}
.topbar-bell {
  position: relative; width: 39px; height: 39px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bell-dot {
  position: absolute; top: 9px; right: 5px;
  width: 7px; height: 7px; background: var(--c-amber); border-radius: 50%;
}
.topbar-avatar {
  width: 39px; height: 39px; background: var(--c-text-off);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.topbar-avatar-inner { width: 30px; height: 30px; background: var(--c-amber); border-radius: var(--radius-md); }
.topbar-settings { width: 35px; height: 35px; background: var(--c-text-off); cursor: pointer; border-radius: 4px; }

/* ══════════════════════════════════════
   SISTEMA DE BOTONES
══════════════════════════════════════ */
/* Variantes de color */
.btn-amber   { background: var(--c-amber); color: var(--c-dark); border: none; }
.btn-dark    { background: var(--c-dark);  color: var(--c-text-inv); border: none; }
.btn-muted   { background: var(--c-muted); color: var(--c-text); border: none; }
.btn-outline { background: transparent; border: 1px solid white; color: white; }

/* Tamaños */
.btn-primary {
  font-family: 'Rubik', sans-serif;
  font-size: var(--btn-p-font); font-weight: var(--btn-p-weight);
  padding: var(--btn-p-pad); border-radius: var(--btn-p-radius);
  cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; transition: filter 0.15s; text-decoration: none;
}
.btn-primary:hover { filter: brightness(0.94); }
.btn-outline:hover { background: rgba(255,255,255,0.08); filter: none; }

.btn-secondary {
  font-family: 'Rubik', sans-serif;
  font-size: var(--btn-s-font); font-weight: var(--btn-s-weight);
  padding: var(--btn-s-pad); border-radius: var(--btn-s-radius);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; transition: opacity 0.15s; text-decoration: none;
}
.btn-secondary:hover { opacity: 0.8; }

.btn-tertiary {
  font-family: 'Rubik', sans-serif;
  font-size: var(--btn-t-font); font-weight: var(--btn-t-weight);
  padding: var(--btn-t-pad); border-radius: var(--btn-t-radius);
  cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap; transition: background 0.15s; border: none; text-decoration: none;
}
.btn-tertiary:hover { filter: brightness(0.94); }

/* ── Filter tab strip ── */
.ftabs {
  display: inline-flex; gap: 2px; align-items: center;
  background: var(--c-muted); border-radius: var(--radius-lg);
  padding: 2px; height: 35px;
}
.ftab {
  font-family: 'Rubik', sans-serif;
  font-size: var(--btn-f-font); font-weight: var(--btn-f-weight);
  padding: var(--btn-f-pad); border-radius: var(--radius-lg);
  border: none; background: transparent; color: var(--c-text);
  cursor: pointer; transition: background 0.12s;
  height: calc(35px - 4px); display: flex; align-items: center;
  white-space: nowrap;
}
.ftab.active { background: var(--c-dark); color: var(--c-text-inv); font-weight: 600; }
.ftab:not(.active):hover { background: #d0d0d0; }

/* ══════════════════════════════════════
   DATA TABLE — componente visual estándar
   Aplicar clase .data-table a cualquier <table>
   o .data-grid a contenedores de filas div
══════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; }

/* Cabeceras — Rubik 10px bold, sin uppercase */
.data-table thead th {
  font-family: 'Rubik', sans-serif;
  font-size: 10px; font-weight: 600;
  color: var(--c-text);
  text-transform: none; letter-spacing: 0;
  padding: 0 14px 10px; text-align: center;
}
.data-table thead th:first-child { padding-left: 24px; text-align: left; }
.data-table thead th:last-child  { padding-right: 24px; }

/* Filas — zebra, sin divisores */
.data-table tbody tr { border-bottom: none !important; }
.data-table tbody tr:nth-child(odd)  { background: var(--c-bg); }
.data-table tbody tr:nth-child(even) { background: var(--c-card); }
.data-table tbody tr:hover           { background: rgba(0,0,0,0.04); }

/* Celdas — Rubik 10.792px regular, color data */
.data-table tbody td {
  font-family: 'Rubik', sans-serif;
  font-size: 10.792px; font-weight: 400;
  color: var(--c-data);
  padding: 0 14px; height: 43px; vertical-align: middle;
  border: none !important;
  text-align: center;
}
.data-table tbody td:first-child { padding-left: 24px; text-align: left; }
.data-table tbody td:last-child  { padding-right: 24px; }

/* Badge dentro de tabla — tamaño spec home */
.data-table .badge { font-size: 9px; padding: 3px 6px; }

/* Botones de acción dentro de tabla — sutiles, sin fondo hasta hover */
.data-table .appt-action-btn { background: transparent; }
.data-table .appt-action-btn:hover { background: var(--c-muted); }

/* ══════════════════════════════════════
   SISTEMA DE BADGES
══════════════════════════════════════ */
.badge {
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: var(--text-2xs); padding: 4px 12px;
  border-radius: var(--radius-md); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ── Estados de agenda — pills pastel (spec Figma) ── */
.badge-confirmada  { background: var(--c-status-confirmada-bg);  color: var(--c-status-confirmada-fg); }
.badge-asignada    { background: var(--c-status-asignada-bg);    color: var(--c-status-asignada-fg); }
.badge-atendida    { background: var(--c-status-atendida-bg);    color: var(--c-status-atendida-fg); }
.badge-cancelada   { background: var(--c-status-cancelada-bg);   color: var(--c-status-cancelada-fg); }
.badge-no-cumplida { background: var(--c-status-nocumplida-bg);  color: var(--c-status-nocumplida-fg); }
.badge-en-sala     { background: var(--c-status-ensala-bg);      color: var(--c-status-ensala-fg); }
.badge-reasignada  { background: var(--c-status-reasignada-bg);  color: var(--c-status-reasignada-fg); }

/* ── Estados contabilidad / RIPS ── */
.badge-enviado    { background: var(--c-status-atendida-bg);    color: var(--c-status-atendida-fg); }
.badge-pendiente  { background: var(--c-status-asignada-bg);    color: var(--c-status-asignada-fg); }
.badge-pagada     { background: var(--c-status-confirmada-bg);  color: var(--c-status-confirmada-fg); }
.badge-anulado    { background: var(--c-status-cancelada-bg);   color: var(--c-status-cancelada-fg); }
.badge-generado   { background: var(--c-status-confirmada-bg);  color: var(--c-status-confirmada-fg); }
.badge-finalizado { background: var(--c-status-atendida-bg);    color: var(--c-status-atendida-fg); }
.badge-aprobado   { background: var(--c-status-ensala-bg);      color: var(--c-status-ensala-fg); }


/* ══════════════════════════════════════
   ICON CIRCLE (círculo degradado + icono 3D)
   Va dentro de quick cards, KPI cards y cualquier
   card que muestre una ilustración 3D como acento.
══════════════════════════════════════ */
.icon-circle {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-bg) 0%, var(--c-card) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.icon-circle img {
  width: 62%; height: 62%; object-fit: contain;
  transform: rotate(15deg); pointer-events: none; display: block;
}

/* ══════════════════════════════════════
   KPI CARD (layout compartido)
══════════════════════════════════════ */
.kpi-card {
  background: var(--c-card); border-radius: var(--radius-md);
  padding: 20px; display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-sm);
}
.kpi-icon {
  width: var(--kpi-icon-size); height: var(--kpi-icon-size);
  min-width: var(--kpi-icon-size); min-height: var(--kpi-icon-size);
  max-width: var(--kpi-icon-size); max-height: var(--kpi-icon-size);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.kpi-icon img {
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  object-fit: contain; pointer-events: none;
  display: block; position: relative;
}
/* Cinturón global: ninguna imagen puede crecer más que su contenedor.
   Evita que PNGs de alta resolución exploten el layout si el CSS contextual
   no aplica a tiempo (FOUC / cache revalidación). */
img { max-width: 100%; height: auto; }
.kpi-label {
  font-family: 'Rubik', sans-serif; font-weight: 600;
  font-size: var(--text-sm); color: var(--c-text);
  text-transform: none; letter-spacing: 0;
}
.kpi-value-row {
  display: flex; align-items: baseline; gap: 6px; margin-top: 3px;
}
.kpi-value {
  font-family: 'Domine', serif; font-weight: 700;
  font-size: var(--h2); color: var(--c-text); line-height: 1;
}
.kpi-sub {
  font-family: 'Rubik', sans-serif; font-size: var(--text-xs);
  color: var(--c-text);
}

/* ── Card title (compartido entre secciones) ── */
.card-title {
  font-family: 'Domine', serif; font-weight: 700;
  font-size: var(--h3); color: var(--c-text); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — sidebar drawer + base
   Breakpoints: 1024px (tablet/drawer) · 640px (mobile)
══════════════════════════════════════════════════════════ */

/* Mobile top bar with hamburger — injected by app.js, hidden on desktop */
.mobile-bar { display: none; }
.nav-toggle {
  width: 42px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-sidebar); color: #fff;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: filter 0.15s;
}
.nav-toggle:hover { filter: brightness(1.4); }
.nav-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease; z-index: 900;
}

@media (max-width: 900px) {
  /* Sidebar becomes an off-canvas drawer (laptops >=901 keep full sidebar) */
  .sidebar {
    position: fixed; top: 0; left: 0;
    height: 100vh; width: 264px; min-width: 264px;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000; box-shadow: 6px 0 40px rgba(0, 0, 0, 0.35);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-overlay { opacity: 1; visibility: visible; }

  /* Sticky mobile bar holding the hamburger */
  .mobile-bar {
    display: flex; align-items: center; gap: 12px;
    position: sticky; top: 0; z-index: 800;
    padding: 12px 18px; background: var(--c-bg);
  }

  /* Long card titles may wrap on small screens */
  .card-title { white-space: normal; }
}

@media (max-width: 640px) {
  .sidebar { width: 84vw; min-width: 84vw; max-width: 320px; }
}

/* ══════════════════════════════════════════════════════════
   ULTRA-WIDE — cap content so it doesn't stretch infinitely
   (no muerde en <=1920; centra el contenido en pantallas grandes)
══════════════════════════════════════════════════════════ */
.main { max-width: 1700px; margin-left: auto; margin-right: auto; }