/* =============================================================================
   Sistema de diseño
   Capa única que define el lenguaje visual de todo el producto: tipografía,
   color, espacios, radios, sombras y el aspecto de cada componente. Se carga
   después de style.css (que guarda la estructura y lo propio de cada pantalla)
   y manda sobre él.

   Identidad: azul para la acción y la navegación, verde lima para lo
   positivo y la marca, neutros fríos para todo lo demás. El color se usa con
   moderación: las superficies son blancas y la jerarquía la dan el espacio,
   el tamaño y el peso del texto.
   ============================================================================= */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens ------------------------------------------------------------------ */
:root {
  /* Marca (13 de octubre de 2026): índigo profundo + teal, con degradados en las superficies de identidad.
     Todo color de marca sale de aquí; los estados (pagado, alerta, error) tienen sus propios colores y no cambian con la marca. */
  --brand: #4338ca;          /* índigo corporativo: acciones, enlaces, selección */
  --brand-strong: #3730a3;   /* al pasar el mouse o presionar */
  --brand-focus: #4f46e5;    /* índigo de interacción: foco */
  --brand-deep: #19243a;     /* índigo profundo: menú, títulos sobre blanco */
  --brand-soft: #eef0ff;
  --brand-line: #d4d8f7;
  --teal: #0d9488;           /* teal principal: solo en degradados y detalles, nunca bajo texto chico */
  --teal-strong: #0d9488;
  --teal-dark: #0f766e;
  --money: #0b7f76;          /* acciones de cobro: teal con contraste suficiente para texto blanco (4,9:1) */
  --money-strong: #0a6c64;
  --brand-gradient: linear-gradient(115deg, #19243a 0%, #3730a3 65%, #0d9488 100%);
  --sidebar-gradient: linear-gradient(180deg, #19243a 0%, #202c49 38%, #292c65 72%, #3730a3 100%);
  --action-gradient: linear-gradient(110deg, #4338ca 0%, #0d9488 100%);
  --on-dark: #fff;
  --on-dark-muted: #dde7fa;
  /* Estados, para rellenos, puntos y bordes (como texto se usan sus tonos oscuros de siempre). */
  --status-success: #10b981;
  --status-warning: #f59e0b;
  --status-danger: #ef4444;
  --status-info: #4f46e5;

  /* Nombres anteriores: siguen funcionando y apuntan a la marca nueva. */
  --blue: var(--brand);
  --blue-dark: var(--brand-strong);
  --blue-deep: var(--brand-deep);
  --blue-soft: var(--brand-soft);
  --blue-line: var(--brand-line);
  --green: #0f766e;        /* teal oscuro: lo positivo */
  --green-strong: #0c625c;
  --green-line: #c4e3de;
  --green-dark: #0b5f58;   /* texto sobre fondos suaves: legible */
  --green-soft: #ecf6f4;
  --green-ink: #fff;    /* texto sobre el acento pleno */

  /* Neutros */
  --ink: #1b2430;
  --slate: #475467;
  --muted: #667085;
  --faint: #98a2b3;
  --line: #e4eaf1;
  --line-strong: #d3dbe5;
  --bg: #f5f7ff;
  --surface: #fff;
  --surface-2: #f8fafc;

  /* Estados */
  --red: #c53a3a;
  --red-soft: #fef3f2;
  --amber: #9a6a1a;
  --amber-soft: #fffaeb;

  /* Forma */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;

  /* Profundidad: sombras frías, muy suaves */
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, .1), 0 2px 6px -2px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .22);
  --ring: 0 0 0 4px rgba(79, 70, 229, .16);

  /* Movimiento */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: .14s;
}

/* 2. Base y tipografía ------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font: 400 14.5px/1.5 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'cv11', 'ss03', 'calt';
  letter-spacing: -.006em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(79, 70, 229, .18); }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 620; letter-spacing: -.024em; line-height: 1.2; }
h2 { font-size: 1.1rem; font-weight: 620; letter-spacing: -.016em; line-height: 1.3; }
h3 { font-size: .95rem; font-weight: 620; letter-spacing: -.01em; }
strong, b { font-weight: 620; }
small { color: var(--muted); }
a { color: var(--blue); text-underline-offset: 2px; transition: color var(--fast) var(--ease); }
a:hover { color: var(--blue-dark); }
.num, td.num, th.num, .figure, .stat strong, .time, table { font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: .86rem; line-height: 1.5; }
svg.icon { stroke-width: 1.75; }

/* Barra de avance al cambiar de página o enviar un formulario */
body::before { content: ''; position: fixed; inset: 0 auto auto 0; z-index: 100; height: 2px; width: 0; background: linear-gradient(90deg, var(--green), var(--blue)); opacity: 0; pointer-events: none; }
body.leaving::before { opacity: 1; width: 85%; transition: width 6s cubic-bezier(.1, .7, .1, 1); }

/* 3. Estructura ------------------------------------------------------------- */
main { max-width: 86rem; padding: 1.5rem 2rem 3.5rem; }

/* Barra superior */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; height: 3.75rem; padding: 0 2rem; background: rgba(245, 247, 255, .82); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.topbar-search { position: relative; flex: 1; max-width: 30rem; margin: 0; }
.topbar-search svg { position: absolute; left: .8rem; top: 50%; width: 1rem; height: 1rem; translate: 0 -50%; color: var(--faint); pointer-events: none; }
.topbar-search input { width: 100%; height: 2.4rem !important; padding: 0 2.6rem 0 2.4rem; border-radius: 999px; background: var(--surface); }
.topbar-search kbd { position: absolute; right: .65rem; top: 50%; translate: 0 -50%; padding: .05rem .4rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-2); color: var(--muted); font: 600 .7rem/1.4 'Inter', sans-serif; pointer-events: none; }
.topbar-search input:focus + kbd { display: none; }
.topbar-suggest { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; max-height: 22rem; overflow-y: auto; padding: .3rem; border: 1px solid var(--line, #e4eaf1); border-radius: 14px; background: #fff; box-shadow: 0 14px 32px -12px rgba(25, 36, 58, .35); }
.topbar-suggest a { display: flex; flex-direction: column; gap: .05rem; padding: .5rem .7rem; border-radius: 9px; color: var(--ink, #1b2430); font-size: .88rem; text-decoration: none; }
.topbar-suggest a small { color: #9a6700; font-size: .74rem; }
.topbar-suggest a:hover, .topbar-suggest a.on { background: var(--brand-soft, #eef0fe); color: var(--brand-deep, #19243a); }
.topbar-suggest p { margin: 0; padding: .55rem .7rem; color: var(--muted, #667085); font-size: .84rem; }
.topbar-suggest .topbar-suggest-all { display: block; width: 100%; margin-top: .2rem; padding: .55rem .7rem; border: 0; border-top: 1px solid #edf2f7; border-radius: 0 0 9px 9px; background: none; background-image: none; box-shadow: none; color: var(--brand, #4338ca); font-size: .84rem; font-weight: 600; text-align: left; cursor: pointer; }
.topbar-suggest .topbar-suggest-all:hover { background: var(--brand-soft, #eef0fe); }
.topbar-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.topbar-chip { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--slate); font-size: .82rem; font-weight: 500; white-space: nowrap; }
.topbar-chip svg { width: .95rem; height: .95rem; color: var(--faint); }
/* Chip de la sucursal que cambia de sede (con más de una). */
.topbar-branch { position: relative; }
.topbar-branch > summary.topbar-chip { cursor: pointer; list-style: none; transition: border-color .16s, background .16s; }
.topbar-branch > summary::-webkit-details-marker { display: none; }
.topbar-branch > summary::after { content: none !important; display: none !important; }
.topbar-branch > summary.topbar-chip:hover, .topbar-branch[open] > summary.topbar-chip { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-deep); }
.topbar-branch .topbar-branch-chev { width: .8rem; height: .8rem; margin-left: .05rem; }
.topbar-branch .menu-pop { right: 0; left: auto; min-width: 14rem; }
.topbar-branch-title { margin: .2rem .6rem .35rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.topbar-branch form { margin: 0; }
.topbar-branch button.link { border: 0; background: none; box-shadow: none; min-height: 0; display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .6rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; text-align: left; }
.topbar-branch button.link:hover { background: var(--brand-soft); color: var(--brand-deep); }
.topbar-branch button.link.current { color: var(--brand); font-weight: 600; }
.topbar-branch button.link svg { width: 1rem; height: 1rem; flex: none; }
.topbar-user { display: flex; align-items: center; gap: .6rem; padding: .25rem .7rem .25rem .25rem; border-radius: 999px; border: 1px solid transparent; color: var(--ink); transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.topbar-user:hover { background: var(--surface); border-color: var(--line); text-decoration: none; color: var(--ink); }
.topbar-user .avatar { width: 2rem; height: 2rem; font-size: .74rem; background: var(--blue); color: #fff; }
.topbar-user span { display: grid; line-height: 1.2; }
.topbar-user strong { font-size: .84rem; font-weight: 600; }
.topbar-user small { font-size: .72rem; }
@media (max-width: 900px) { .topbar { padding: 0 1rem; } .topbar-chip, .topbar-user span { display: none; } }
@media (max-width: 760px) { .topbar { position: static; } main { padding: 1rem 1rem 3rem; } }

/* Menú lateral: mismo azul, más aire y texto más fino */
.sidebar { background: var(--sidebar-gradient); }
.sidebar nav a { font-size: .9rem; font-weight: 500; letter-spacing: -.005em; padding: .56rem .9rem; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.sidebar nav a svg { opacity: .9; }
.sidebar nav a.active { font-weight: 600; }
.nav-section { font-size: .66rem; letter-spacing: .09em; margin-top: 1.25rem; }
.brand strong { font-size: 1rem; font-weight: 620; letter-spacing: -.012em; }
.brand-mark, .brand-logo { box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.branch-switch { border-radius: var(--radius-sm); }
.menu-toggle { transition: background var(--fast) var(--ease); }

/* Encabezado de página */
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.5rem; }
.page-head span { font-size: .78rem; font-weight: 500; padding: .2rem .7rem; }

/* 4. Superficies ------------------------------------------------------------ */
.panel, fieldset:not(.plain), .plan-strip, .filters, .agenda-bar, .bulk-bar, .cal, .empty, .agenda aside {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.panel { padding: 1.35rem 1.5rem 1.5rem; margin-bottom: 1.1rem; }
.panel-head { margin-bottom: .6rem; }
.panel-head h2 { font-size: 1.05rem; }
.empty { border-style: dashed; box-shadow: none; }
.panel .empty { border: 0; }
.section-label { color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .08em; }
legend { color: var(--slate); font-size: .68rem; font-weight: 600; letter-spacing: .08em; }

/* Encabezados azules (ficha, plan, caja, inicio): el degradado de la marca, con un brillo sutil */
.hero, .welcome {
  position: relative; overflow: hidden;
  border-radius: 18px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(13, 148, 136, 0) 0%, rgba(13, 148, 136, 0) 45%), var(--brand-gradient);
  box-shadow: 0 12px 28px -12px rgba(79, 70, 229, .45), var(--shadow);
}
.hero h1, .welcome h1 { font-size: 1.5rem; font-weight: 620; letter-spacing: -.022em; }
.hero-avatar { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.hero-card { border-radius: 12px; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hero-card small { font-weight: 600; opacity: .8; }
.hero-card .figure { font-size: 1.3rem; font-weight: 620; letter-spacing: -.02em; }

/* 5. Indicadores ------------------------------------------------------------ */
.stats { gap: .9rem; margin-bottom: 1.1rem; }
.stat, .stat.blue, .stat.green, .stat.teal, .stat.red, .stat.amber {
  position: relative;
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.stat::before { content: ''; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.stat.blue::before { background: var(--blue); }
.stat.green::before { background: var(--green); }
.stat.teal::before { background: #12a594; }
.stat.red::before { background: #e5484d; }
.stat.amber::before { background: #e0a100; }
.stat small { font-size: .7rem; font-weight: 600; letter-spacing: .05em; color: var(--muted); }
.stat strong, .stat.blue strong, .stat.green strong, .stat.teal strong, .stat.red strong, .stat.amber strong { margin-top: .3rem; font-size: 1.7rem; font-weight: 620; letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.stat.red strong { color: var(--red); }
.stat span { margin-top: .25rem; font-size: .8rem; color: var(--muted); }
a.stat:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--shadow-md); }
/* Con ícono (panel de inicio) */
.stat.has-icon { padding-right: 3.6rem; }
.stat-icon { position: absolute; right: 1rem; top: 1rem; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--slate); }
.stat-icon svg { width: 1.05rem; height: 1.05rem; }
.stat.blue .stat-icon { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
.stat.green .stat-icon { background: var(--green-soft); border-color: #c4e3de; color: var(--green-dark); }
.stat.red .stat-icon { background: var(--red-soft); border-color: #fecdca; color: var(--red); }
.stat.amber .stat-icon { background: var(--amber-soft); border-color: #fedf89; color: var(--amber); }
.stat.teal .stat-icon { background: #e6f7f5; border-color: #b9e6e0; color: #0b6b60; }

/* 6. Botones ----------------------------------------------------------------- */
button, a.button {
  border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 560; letter-spacing: -.006em;
  padding: .52rem .95rem;
  background: var(--blue); border: 1px solid var(--blue-dark); color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .14);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
}
button:hover, a.button:hover { background: var(--blue-dark); border-color: var(--blue-deep); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1), inset 0 1px 0 rgba(255, 255, 255, .1); transform: none; filter: none; }
button:active, a.button:active { box-shadow: inset 0 1px 2px rgba(16, 24, 40, .2); }
button:focus-visible, a.button:focus-visible, a:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-xs); }
button:disabled { opacity: .55; cursor: not-allowed; }
button.success, a.button.success,
form:not(.inline) > button:not(.outline):not(.link):not(.ghost):not(.icon-button):not(.danger),
form > div > button:not(.outline):not(.link):not(.ghost):not(.danger),
fieldset > button:not(.outline):not(.link) {
  background: var(--green); border-color: var(--green-strong); color: #fff; font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .3);
}
button.success:hover, a.button.success:hover,
form:not(.inline) > button:not(.outline):not(.link):not(.ghost):not(.icon-button):not(.danger):hover,
form > div > button:not(.outline):not(.link):not(.ghost):not(.danger):hover,
fieldset > button:not(.outline):not(.link):hover { background: var(--green-strong); border-color: #0a524d; color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
button.outline, a.button.outline { background: var(--surface); border-color: var(--line-strong); color: var(--slate); box-shadow: var(--shadow); }
button.outline:hover, a.button.outline:hover { background: var(--surface-2); border-color: #b9c0cc; color: var(--ink); box-shadow: var(--shadow); }
button.danger { background: #d92d20; border-color: var(--red); color: #fff; }
button.danger:hover { background: var(--red); border-color: #912018; }
button svg.icon, a.button svg.icon { width: 1rem; height: 1rem; }
/* Acciones de fila */
button.link, td .inline > a, td:last-child > a, .panel-head > a:not(.button), details.menu summary {
  padding: .26rem .7rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--slate);
  font-size: .8rem; font-weight: 560; box-shadow: var(--shadow);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
button.link:hover, td .inline > a:hover, td:last-child > a:hover, .panel-head > a:not(.button):hover, details.menu summary:hover { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-dark); box-shadow: var(--shadow); }
button.link.danger { background: var(--surface); border-color: #fecdca; color: var(--red); }
button.link.danger:hover { background: var(--red-soft); border-color: #fda29b; color: var(--red); }
/* Controles que no son botones de acción */
.icon-button, .icon-button:hover, .menu-toggle, .menu-toggle:hover, .tick-mark, .odonto .segmented button, button.badge.locked, button.hero-card { box-shadow: none; }
.odonto .segmented button, .odonto .segmented button:hover { border: 0; background: none; color: var(--slate); }
.odonto .segmented button.current, .odonto .segmented button.current:hover { background: var(--surface); color: var(--blue-dark); box-shadow: var(--shadow-sm); }
.results button, .results button:hover { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 450; box-shadow: none; }
.results button:hover { background: var(--blue-soft); border-color: var(--blue-line); }
button.ghost, button.ghost:hover { box-shadow: none; }

/* 7. Formularios ------------------------------------------------------------ */
label { font-size: .8rem; font-weight: 520; color: var(--slate); gap: .35rem; }
input, select, textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: .9rem; letter-spacing: -.006em;
  box-shadow: var(--shadow);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: #b9c0cc; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--muted); box-shadow: none; }
input[type="checkbox"], input[type="radio"] { box-shadow: none; accent-color: var(--blue); }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
textarea { padding: .6rem .7rem; line-height: 1.45; }
select { cursor: pointer; }
.error { border: 1px solid #fecdca; border-radius: var(--radius-sm); background: var(--red-soft); color: var(--red); font-weight: 500; }
.alert { border: 1px solid #fedf89; border-radius: var(--radius-sm); background: var(--amber-soft); color: #7a2e0e; }
.notice { border-radius: var(--radius-sm); }
small.invalid { color: var(--red); font-weight: 500; }
small.valid { color: var(--green-dark); }

/* 8. Tablas ----------------------------------------------------------------- */
table { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); font-size: .9rem; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
thead th { background: var(--surface-2); color: var(--muted); font-size: .68rem; font-weight: 600; letter-spacing: .06em; padding-top: .65rem; padding-bottom: .65rem; }
tbody tr { transition: background var(--fast) var(--ease); }
tbody tr:hover > td, tbody tr:hover > th { background: var(--surface-2); }
tbody th { color: var(--slate); font-weight: 520; }
table tfoot td, table tfoot th { background: var(--surface-2); border-top: 1px solid var(--line-strong); }
td small { color: var(--muted); }
td.hint[colspan] { color: var(--muted); }
.panel table { box-shadow: none; }
.summary th { color: var(--slate); }
tr.status-cancelled td { color: var(--faint); }
/* Paginación */
nav.tabs[aria-label="Páginas"] { justify-content: flex-end; margin-top: .9rem; }
.tabs a, .tabs span { border-color: var(--line-strong); font-size: .82rem; font-weight: 520; box-shadow: var(--shadow); transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.tabs span { box-shadow: none; color: var(--muted); }
.tabs a.current { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-dark); box-shadow: none; }

/* 9. Etiquetas de estado ------------------------------------------------------ */
.badge, .chip, .pill, .item-state, .box-state, .move-kind, .st, .sit, .over {
  font-size: .74rem; font-weight: 560; letter-spacing: 0; line-height: 1.5;
}
.badge { padding: .12rem .6rem; background: var(--blue-soft); color: var(--blue-dark); border: 1px solid var(--blue-line); }
.badge.off { background: var(--red-soft); color: var(--red); border-color: #fecdca; }
.item-state, .box-state, .move-kind { padding: .12rem .6rem; border: 1px solid transparent; }
.item-state.pend, details.menu.progress summary.pend { background: var(--red-soft); color: var(--red); border-color: #fecdca; }
.item-state.done, details.menu.progress summary.done, .box-state.reviewed { background: var(--blue-soft); color: var(--blue-dark); border-color: var(--blue-line); }
.item-state.paid, details.menu.progress summary.paid, .box-state.open, .move-kind.payment { background: var(--green-soft); color: var(--green-dark); border-color: #c4e3de; }
.item-state.part, details.menu.progress summary.part, .box-state.closed, .move-kind.expense { background: var(--amber-soft); color: var(--amber); border-color: #fedf89; }
.move-kind.refund { background: var(--red-soft); color: var(--red); border-color: #fecdca; }
.move-kind.withdrawal { background: var(--surface-2); color: var(--slate); border-color: var(--line-strong); }
details.menu.progress summary { box-shadow: none; }
.debt-text { color: var(--red); font-weight: 560; }

/* 10. Navegación secundaria --------------------------------------------------- */
.subtabs { gap: .25rem 1.5rem; border-bottom-color: var(--line); }
.subtabs a { font-size: .9rem; color: var(--muted); transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.subtabs a.current { color: var(--blue-dark); }
.segmented { border-color: var(--line); background: var(--surface-2); border-radius: 11px; }
.segmented a { border-radius: 8px; font-size: .84rem; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.segmented a.current { box-shadow: var(--shadow-sm); }
.pick span { box-shadow: var(--shadow); transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }

/* 11. Ventanas, menús y avisos ------------------------------------------------- */
dialog.confirm, dialog.sheet-dialog { border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
dialog::backdrop { background: rgba(16, 24, 40, .45); backdrop-filter: blur(2px); }
dialog[open] { animation: pop-in .18s var(--ease); }
.menu-pop, .cal-pop, .note-pop, .rename-pop { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); }
details[open] > .menu-pop, details[open] > .cal-pop, details[open] > .note-pop, details[open] > .rename-pop, details[open] > form.menu-pop { animation: pop-in .14s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
.notice.toast { border-radius: 12px; box-shadow: var(--shadow-lg); }
.lock-bar { border-radius: 14px; box-shadow: var(--shadow-lg); }

/* 12. Agenda, plan y odontograma: mismos acabados ------------------------------ */
.cal-head { background: var(--surface-2); }
.appt { border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.appt:hover { box-shadow: var(--shadow-md); }
.timeline.compact .appt { box-shadow: none; }
.timeline.compact .appt:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.hour-block h2 { font-size: .95rem; color: var(--muted); }
.plan-facts dt { color: var(--muted); font-size: .66rem; letter-spacing: .07em; }
.plan-facts dd { font-weight: 520; }
.od-summary { border-radius: var(--radius-sm); }
.search-box { border-radius: 999px; box-shadow: var(--shadow); }

/* 13. Panel de inicio ----------------------------------------------------------- */
.dash { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.dash > div { display: grid; gap: 1.1rem; min-width: 0; }
.dash .panel { margin: 0; }
@media (max-width: 1050px) { .dash { grid-template-columns: minmax(0, 1fr); } }
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .6rem; align-items: end; height: 10.5rem; padding-top: 1.4rem; }
.chart-col { position: relative; display: grid; grid-template-rows: 1fr auto; gap: .45rem; height: 100%; min-width: 0; text-align: center; }
.chart-bar { align-self: end; width: 100%; max-width: 3.2rem; margin: 0 auto; min-height: 3px; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, #818cf8, var(--blue)); position: relative; transition: filter var(--fast) var(--ease); }
.chart-col.today .chart-bar { background: linear-gradient(180deg, #17897f, var(--green-strong)); }
.chart-col.empty .chart-bar { background: var(--line); }
.chart-col:hover .chart-bar { filter: brightness(1.08); }
.chart-bar b { position: absolute; left: 50%; bottom: calc(100% + .25rem); translate: -50% 0; font-size: .72rem; font-weight: 600; color: var(--slate); white-space: nowrap; }
.chart-col span { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-col.today span { color: var(--ink); font-weight: 600; }
.todo-list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; }
.todo-list a { display: flex; align-items: center; gap: .8rem; padding: .7rem .6rem; border-radius: var(--radius-sm); color: var(--ink); transition: background var(--fast) var(--ease); }
.todo-list a:hover { background: var(--surface-2); text-decoration: none; }
.todo-list .todo-icon { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--blue-soft); color: var(--blue); }
.todo-list .todo-icon.warn { background: var(--amber-soft); color: var(--amber); }
.todo-list .todo-icon.ok { background: var(--green-soft); color: var(--green-dark); }
.todo-list .todo-icon svg { width: 1.05rem; height: 1.05rem; }
.todo-list span { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.todo-list small { font-size: .78rem; }
.todo-list b { font-size: 1.05rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.todo-list li + li { border-top: 1px solid var(--line); }
.bar-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.bar-list li { display: grid; gap: .3rem; }
.bar-list div { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.bar-list div b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-list i { display: block; height: .45rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-list i::after { content: ''; display: block; height: 100%; width: var(--w, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--blue), #818cf8); }

/* 14. Detalles ------------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: #c9d0da transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #cdd3dc; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background-color: #aeb6c2; }
.sidebar::-webkit-scrollbar { width: 0; }
.app.guest.split { background: var(--surface); }
.login-side { background: radial-gradient(90% 70% at 0% 100%, rgba(15, 118, 110, .2) 0%, rgba(15, 118, 110, 0) 55%), var(--brand-gradient); }
.login-side h2 { font-weight: 620; letter-spacing: -.028em; }
.login-form h1 { font-size: 1.6rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .topbar, body::before { display: none !important; }
  .panel, table, .stat { box-shadow: none; }
}

/* Grupos de opciones que son <fieldset> pero no tarjetas */
fieldset.how-far, fieldset.plain { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }

/* Gráficos de barras: la barra crece dentro de su carril y las etiquetas quedan alineadas abajo */
.chart-col { display: flex; flex-direction: column; gap: .45rem; height: 100%; color: inherit; }
.chart-col:hover { text-decoration: none; }
.chart-track { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.chart-bar { align-self: flex-end; }
.chart-col > span:last-child { flex: none; font-size: .72rem; color: var(--muted); }
.chart-col.today > span:last-child { color: var(--ink); font-weight: 600; }

/* Indicadores con ícono: el ícono va arriba, el número nunca queda debajo de él */
.stat.has-icon { padding-right: 1.15rem; }
.stat-icon { position: static; margin-bottom: .7rem; }
.stat.has-icon::before { top: 1rem; bottom: auto; height: 2.1rem; }
.welcome + .stats { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.stat strong, .stat.blue strong, .stat.green strong, .stat.teal strong, .stat.red strong, .stat.amber strong { font-size: 1.6rem; overflow-wrap: anywhere; }
.chart-col.zero .chart-bar { background: var(--line); }
.chart-col .chart-track { overflow: visible; padding-top: 1.3rem; }
.chart { padding-top: 0; height: 11rem; }
.welcome + .stats { grid-template-columns: repeat(auto-fit, minmax(10.6rem, 1fr)); }

/* Formularios largos (dar cita, alta de usuario): en una tarjeta, no sueltos sobre el fondo */
form.stack.roomy, form.sections { padding: 1.5rem 1.6rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); gap: 1rem; }
form.stack.roomy > h2, form.sections > h2 { margin: .9rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 1rem; }
form.stack.roomy fieldset:not(.plain), form.sections fieldset:not(.plain) { box-shadow: none; background: var(--surface-2); }
form.stack.roomy > button, form.sections > div > button { justify-self: start; min-width: 10rem; }

/* 15. Pantallas chicas ------------------------------------------------------------
   En teléfono el menú se guarda tras el botón de las tres rayas, y nada obliga a
   desplazarse hacia el lado: lo ancho (tablas, calendario) se desplaza dentro de su caja. */
@media (max-width: 760px) {
  .sidebar { gap: .6rem; padding: .7rem .9rem; }
  .sidebar > * { margin-right: 0; }
  .menu-toggle { display: grid; order: 2; margin: 0 0 0 auto; align-self: center; }
  .brand { order: 1; flex: 1; min-width: 0; }
  .sidebar .branch-switch, .sidebar > nav, .sidebar .account { display: none; order: 3; flex: 1 1 100%; }
  .app.nav-open .sidebar .branch-switch, .app.nav-open .sidebar .account { display: flex; }
  .app.nav-open .sidebar > nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .app.nav-open .sidebar .nav-section { display: block; grid-column: 1 / -1; }
  .app.nav-open .sidebar .account { padding-top: .7rem; border-top: 1px solid rgba(255, 255, 255, .22); }
  .sidebar nav a { padding: .6rem .7rem; }
  .topbar { height: auto; padding: .6rem 1rem; }
  .topbar-search { max-width: none; }
  .topbar-search kbd { display: none; }
  main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .panel, .plan-strip, .filters, .hero, .welcome { padding-left: 1rem; padding-right: 1rem; }
  .agenda-bar .day { min-width: 0; flex: 1 1 100%; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .od-section input, .toolbar input[type="search"], .rename-pop { min-width: 0; }
  .rename-pop { width: calc(100vw - 3rem); }
  .od-section, .bulk-bar, .plan-steps { flex-wrap: wrap; }
  .timeline.compact .appt { grid-template-columns: minmax(0, 1fr) auto; }
  .timeline.compact .appt header { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evolve-pop, .menu-pop, .note-pop { max-width: calc(100vw - 2.5rem); }
  .chips-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .3rem; }
  .chips-filter .segmented { margin-left: 0; flex: none; }
  .hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
}
@media (max-width: 760px) {
  main { overflow-x: clip; }
  main > *, .plan > section > * { max-width: 100%; min-width: 0; }
  .agenda-bar form.inline, .filters, .toolbar, .inline.wrap { flex-wrap: wrap; }
  .agenda-bar select, .agenda-bar input, .filters select, .filters input { max-width: 100%; min-width: 0; flex: 1 1 9rem; }
  .chips-filter { max-width: 100%; }
  .plan-groups, .plan-group { min-width: 0; max-width: 100%; }
  .od-add .grid, .grid, .fields, .panel .fields { grid-template-columns: minmax(0, 1fr); }
  .lock-bar p { min-width: 0; }
  .hero, .welcome { border-radius: 14px; }
}
.pick, .how-far label { position: relative; }
@media (max-width: 760px) {
  .lock-bar { flex-wrap: wrap; bottom: .5rem; }
  .lock-bar p { flex: 1 1 12rem; min-width: 12rem; }
  .lock-bar form, .lock-bar form button { width: 100%; }
}
/* Los campos de una misma fila quedan a la misma altura aunque uno lleve una ayuda debajo */
.fields > label, .grid > label { align-content: start; }

/* Botones de guardar y crear: verde petróleo (#0f766e) con texto blanco. */
/* El botón principal (guardar, crear, confirmar) es índigo; el teal queda para las acciones de cobro (.money). */
:root { --lime: var(--brand); --lime-strong: var(--brand-strong); --lime-line: var(--brand-strong); --lime-ink: #fff; }
button.success, a.button.success,
form:not(.inline) > button:not(.outline):not(.link):not(.ghost):not(.icon-button):not(.danger),
form > div > button:not(.outline):not(.link):not(.ghost):not(.danger),
fieldset > button:not(.outline):not(.link) {
  background: var(--lime); border-color: var(--lime-line); color: var(--lime-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255, 255, 255, .35);
}
button.success:hover, a.button.success:hover,
form:not(.inline) > button:not(.outline):not(.link):not(.ghost):not(.icon-button):not(.danger):hover,
form > div > button:not(.outline):not(.link):not(.ghost):not(.danger):hover,
fieldset > button:not(.outline):not(.link):hover { background: var(--lime-strong); border-color: var(--lime-strong); color: var(--lime-ink); }

/* 16. Combos y selectores ----------------------------------------------------
   Un solo aspecto y un solo comportamiento para toda lista desplegable. El campo
   cerrado es el <select> de siempre, sin el dibujo del navegador; el panel que
   se abre lo arma app.js (en pantallas táctiles se usa el selector del teléfono). */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.1rem;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .6rem center !important;
  background-size: 1rem 1rem !important;
}
select:hover:not(:disabled) { border-color: #b9c0cc; }
select.combo-open, select.combo-open:hover { border-color: var(--blue); box-shadow: var(--ring); }
select.combo-open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234338ca' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 10 4-4 4 4'/%3E%3C/svg%3E") !important; }
select:disabled { cursor: not-allowed; opacity: 1; }
select:user-invalid, select.invalid, select[aria-invalid="true"] { border-color: #f04438; }
select:user-invalid:focus, select.invalid:focus, select[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(240, 68, 56, .16); }
select[aria-busy="true"] { color: var(--muted); cursor: progress; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6' stroke='%23d0d5dd'/%3E%3Cpath d='M8 2a6 6 0 0 1 6 6' stroke='%234338ca'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 8 8' to='360 8 8' dur='.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important; }
td select, .week select, .menu-pop select, .doer select { padding-right: 1.7rem; background-position: right .4rem center !important; background-size: .9rem .9rem !important; }
.st-select, .chip-select { padding-right: 1.7rem; background-position: right .45rem center !important; background-size: .85rem .85rem !important; }

.combo-panel {
  position: fixed; z-index: 200; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: .3rem; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
  font-size: .875rem; font-weight: 400; letter-spacing: -.006em; text-transform: none; text-align: left;
  transform-origin: top center; animation: combo-in .13s var(--ease);
}
.combo-panel.up { transform-origin: bottom center; animation-name: combo-in-up; }
@keyframes combo-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } }
@keyframes combo-in-up { from { opacity: 0; transform: translateY(4px) scale(.985); } }
.combo-search { position: relative; margin: 0 0 .3rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.combo-search::before {
  content: ''; position: absolute; left: .65rem; top: calc(50% - .15rem); width: .95rem; height: .95rem; translate: 0 -50%; pointer-events: none;
  background: var(--faint);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.combo-search input, .combo-search input:hover, .combo-search input:focus {
  width: 100%; height: 2.25rem !important; padding: 0 .6rem 0 2.1rem;
  border: 0; border-radius: 8px; background: var(--surface-2); box-shadow: none; outline: none; font-size: .875rem;
}
.combo-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.combo-option {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem .6rem; border-radius: 8px; line-height: 1.35;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.combo-option + .combo-option { margin-top: 1px; }
.combo-option span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.combo-option.grouped { padding-left: 1rem; }
.combo-option.blank { color: var(--muted); }
.combo-option.active { background: var(--surface-2); }
.combo-option[aria-selected="true"] { background: var(--blue-soft); color: var(--blue-deep); font-weight: 520; }
.combo-option[aria-selected="true"].active { background: #dfeaf9; }
.combo-option[aria-disabled="true"] { color: var(--faint); cursor: not-allowed; }
.combo-option i { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
.combo-option[aria-selected="true"] i {
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.combo-group { padding: .55rem .6rem .25rem; color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.combo-group:not(:first-child) { margin-top: .3rem; border-top: 1px solid var(--line); }
.combo-empty { padding: .9rem .6rem; color: var(--muted); text-align: center; }
[hidden].combo-option, [hidden].combo-group, [hidden].combo-empty { display: none; }

/* Resultados de los buscadores (pacientes, prestaciones): el mismo panel. */
.results:has(button) { gap: 1px; padding: .3rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06); max-height: 19rem; overflow-y: auto; animation: combo-in .13s var(--ease); }
.results button, .results button:hover { min-height: 0; height: auto; padding: .5rem .6rem; border: 0; border-radius: 8px; background: transparent; font-size: .875rem; line-height: 1.35; }
.results button:hover, .results button:focus-visible { background: var(--blue-soft); color: var(--blue-deep); outline: none; }

@media (prefers-reduced-motion: reduce) { .combo-panel, .results:has(button) { animation: none; } }
@media print { .combo-panel { display: none; } }

/* 17. Identidad ejecutiva ----------------------------------------------------
   Regla 80 / 15 / 5: neutros claros, azul corporativo y verde petróleo solo como
   acento. Nada de colores vivos en acciones principales. */
.sidebar { background: var(--sidebar-gradient); }
.sidebar > nav { padding: .25rem 0; gap: 2px; }
.sidebar nav a { border-radius: 10px; color: rgba(255, 255, 255, .78); font-weight: 480; }
.sidebar nav a svg { opacity: .8; stroke-width: 1.6; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar nav a.active, .app.slim .sidebar nav a.active { margin-right: .85rem; padding-right: .9rem; border-radius: 10px; background: rgba(255, 255, 255, .13); color: #fff; font-weight: 580; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.app.slim .sidebar nav a.active { margin-right: .6rem; padding-right: 0; }
.sidebar nav a.active svg { color: #fff; opacity: 1; }
.sidebar nav a.active::before, .sidebar nav a.active::after { display: none; }
.nav-section { color: rgba(255, 255, 255, .45); }
.brand-mark { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .18); box-shadow: none; font-weight: 620; }
.branch-switch { padding: .55rem .65rem .65rem; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.branch-switch label { color: rgba(255, 255, 255, .5); font-weight: 600; }
.branch-switch select, .branch-switch select:hover { background-color: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .14) !important; color: #fff; box-shadow: none; font-weight: 560;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important; }
.branch-switch select:hover { background-color: rgba(255, 255, 255, .15); }
.branch-switch select option { color: var(--ink); }
.account { border-top-color: rgba(255, 255, 255, .1); }
.avatar { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.topbar-user .avatar { background: var(--blue-deep); border: 0; }

/* Encabezados azules: degradado apenas perceptible, sin brillo de color */
.hero, .welcome { background: var(--brand-gradient); box-shadow: 0 10px 24px -14px rgba(25, 36, 58, .5), var(--shadow); }
.welcome { padding: 1.5rem 1.75rem; }
.welcome h1 { font-size: 1.4rem; font-weight: 600; }
.welcome p { color: rgba(255, 255, 255, .72); font-size: .88rem; }
.welcome a.button.success, .hero a.button.success { border-color: rgba(255, 255, 255, .18); }
.login-side { background: var(--brand-gradient); }
.login-side li svg { color: #7fd1c7; }
body::before { background: var(--action-gradient); }

/* Botones: principal en verde petróleo, de acción en azul, secundario en blanco con texto azul */
button, a.button { font-weight: 560; letter-spacing: -.005em; }
button.success, a.button.success { font-weight: 560; }
button.outline, a.button.outline { color: var(--blue-deep); border-color: var(--line-strong); }
button.outline:hover, a.button.outline:hover { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.welcome a.button.outline, .welcome a.button.outline:hover, .hero a.button.outline, .hero a.button.outline:hover { color: #fff; }
button.danger { background: #d14343; border-color: #c53a3a; }
button.danger:hover { background: #c53a3a; border-color: #a83030; }

/* Indicadores y estados: color contenido */
.stat.green::before, .stat.teal::before { background: var(--green); }
.stat.amber::before { background: #c28a2e; }
.stat.red::before { background: #d14343; }
.chart-col.today .chart-bar { background: var(--green); }
.notice.toast::before { background: #1f8a70; color: #fff; }
.pill { font-weight: 560; }
a.cal-free:hover span { color: #fff; }
@media (min-width: 761px) { .welcome + .stats:has(> .stat:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } }

/* 18. Listado de presupuestos ------------------------------------------------
   Todo con el prefijo .bud-: no toca otras pantallas. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bud-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.bud-head h1 { margin: 0; font-size: 1.5rem; }
.bud-head p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.bud-where { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--slate); font-size: .78rem; font-weight: 500; }
.bud-where svg { width: .9rem; height: .9rem; color: var(--faint); }

.bud-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
.bud-kpi { position: relative; display: grid; gap: .15rem; padding: 1rem 1.15rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.bud-kpi small { color: var(--muted); font-size: .76rem; font-weight: 520; }
.bud-kpi strong { color: var(--ink); font-size: 1.55rem; font-weight: 620; letter-spacing: -.028em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bud-kpi > span:last-child { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.bud-kpi-icon { position: absolute; top: .9rem; right: .95rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; }
.bud-kpi-icon svg { width: 1rem; height: 1rem; }
.bud-kpi-icon.blue { background: var(--blue-soft); color: var(--blue); }
.bud-kpi-icon.teal { background: var(--green-soft); color: var(--green); }
.bud-kpi-icon.amber { background: var(--amber-soft); color: #c28a2e; }
.bud-kpi small { padding-right: 2.4rem; }
.bud-scope { margin: -.5rem 0 1rem; color: var(--muted); font-size: .78rem; }

.bud-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: .9rem; }
.bud-tabs { display: flex; gap: .25rem 1.4rem; padding: 0 1.15rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.bud-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .85rem .1rem .75rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--muted); font-size: .875rem; font-weight: 520; white-space: nowrap; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.bud-tabs a:hover { color: var(--ink); text-decoration: none; }
.bud-tabs a.current { color: var(--blue-deep); border-bottom-color: var(--blue); font-weight: 600; }
.bud-tabs b { min-width: 1.4rem; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--slate); font-size: .72rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.bud-tabs a.current b { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.bud-dot { width: .45rem; height: .45rem; border-radius: 50%; background: #98a2b3; }
.bud-dot.presented { background: var(--blue); }
.bud-dot.accepted { background: var(--green); }
.bud-dot.rejected { background: #d14343; }

.bud-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .7rem; margin: 0; padding: .9rem 1.15rem; border-bottom: 1px solid var(--line); }
.bud-filters label { display: grid; gap: .25rem; margin: 0; }
.bud-filters label > span { color: var(--muted); font-size: .7rem; font-weight: 520; }
.bud-filters input, .bud-filters select, .bud-filters button { height: 2.25rem !important; font-size: .85rem; box-shadow: none; }
.bud-filters select { min-width: 9rem; max-width: 13rem; }
.bud-search { position: relative; flex: 1 1 15rem; min-width: 12rem; }
.bud-search svg { position: absolute; left: .7rem; bottom: .65rem; width: .95rem; height: .95rem; color: var(--faint); pointer-events: none; }
.bud-search input { width: 100%; padding-left: 2.1rem; }
.bud-filter-actions { display: flex; align-items: center; gap: .7rem; }
.bud-clear { color: var(--muted); font-size: .82rem; font-weight: 520; }

table.bud-table { width: 100%; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; overflow: visible; }
.bud-table th, .bud-table td { padding: .7rem .9rem; vertical-align: middle; }
.bud-table th:first-child, .bud-table td:first-child { padding-left: 1.15rem; }
.bud-table thead th { background: var(--surface-2); white-space: nowrap; }
.bud-table thead a { display: inline-flex; align-items: center; gap: .3rem; color: inherit; }
.bud-table thead a:hover { color: var(--ink); text-decoration: none; }
.bud-table thead a::after { content: ''; width: .55rem; height: .55rem; opacity: 0; background: currentColor; clip-path: polygon(50% 100%, 0 30%, 100% 30%); transition: opacity var(--fast) var(--ease); }
.bud-table thead a:hover::after { opacity: .4; }
.bud-table th[aria-sort="descending"] a, .bud-table th[aria-sort="ascending"] a { color: var(--blue-deep); }
.bud-table th[aria-sort="descending"] a::after { opacity: 1; }
.bud-table th[aria-sort="ascending"] a::after { opacity: 1; clip-path: polygon(50% 0, 0 70%, 100% 70%); }
.bud-table td.num a { color: var(--slate); font-weight: 560; font-variant-numeric: tabular-nums; }
.bud-table td.date, .bud-table td.pro, .bud-table td.plan { color: var(--slate); }
.bud-table td.date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bud-table td.patient { font-weight: 560; color: var(--ink); }
.bud-table td.patient a { color: var(--blue); }
.bud-table td.plan { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bud-table .amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bud-table td.amount { color: var(--ink); font-weight: 560; }
.bud-table th.amount a { flex-direction: row-reverse; }
.bud-table td.act { width: 1%; padding-right: .7rem; text-align: right; }
.bud-table tbody tr:last-child td { border-bottom: 0; }

.bud-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .16rem .6rem .16rem .5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--slate); font-size: .76rem; font-weight: 560; white-space: nowrap; }
.bud-badge i { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .75; }
.bud-badge.draft i { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.bud-badge.presented { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.bud-badge.accepted { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.bud-badge.rejected { background: var(--red-soft); border-color: #f3cfcf; color: var(--red); }

details.bud-menu summary, details.bud-menu summary:hover { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border-radius: 8px; border-color: transparent; background: none; box-shadow: none; color: var(--muted); }
details.bud-menu summary::after { content: none; }
details.bud-menu summary:hover, details.bud-menu[open] summary { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
details.bud-menu summary svg { width: 1.05rem; height: 1.05rem; }
.bud-menu .menu-pop { min-width: 13.5rem; gap: 1px; padding: .3rem; }
.bud-menu .menu-pop a, .bud-menu .menu-pop a:hover { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: var(--ink); font-size: .85rem; font-weight: 450; text-decoration: none; }
.bud-menu .menu-pop a:hover, .bud-menu .menu-pop a:focus-visible { background: var(--blue-soft); color: var(--blue-deep); }
.bud-menu .menu-pop svg { width: 1rem; height: 1rem; color: var(--faint); }
.bud-table tbody tr:nth-last-child(-n+2):not(:nth-child(-n+3)) .menu-pop { top: auto; bottom: calc(100% + 4px); }

.bud-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1.15rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .8rem; }
.bud-foot nav { display: flex; align-items: center; gap: .6rem; }
.bud-foot nav a { padding: .3rem .7rem; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--slate); font-weight: 520; }
.bud-foot nav a:hover { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); text-decoration: none; }
.bud-card .empty { border: 0; box-shadow: none; }

@media (max-width: 1100px) { .bud-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bud-table td.pro, .bud-table th:nth-child(5) { display: none; } }
@media (max-width: 760px) {
  .bud-filters label, .bud-filters select, .bud-search { flex: 1 1 100%; max-width: none; }
  .bud-filters label:has(input[type="date"]) { flex: 1 1 45%; }
  .bud-filter-actions { flex: 1 1 100%; }
  /* Cada presupuesto pasa a ser una tarjeta: nada se pierde ni se desplaza hacia el lado. */
  .bud-table thead { display: none; }
  .bud-table, .bud-table tbody { display: block; }
  .bud-table tbody tr { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; padding: .85rem 1.15rem; border-bottom: 1px solid var(--line); }
  .bud-table tbody tr:last-child { border-bottom: 0; }
  .bud-table td, .bud-table td:first-child { display: block; padding: 0; border: 0; background: none !important; max-width: none; white-space: normal; }
  .bud-table td.pro { display: block; }
  .bud-table td.patient { grid-column: 1; grid-row: 1; font-size: .95rem; }
  .bud-table td.amount { grid-column: 2; grid-row: 1; padding-right: 2.2rem; }
  .bud-table td.plan { grid-column: 1 / -1; grid-row: 2; }
  .bud-table td.pro { grid-column: 1 / -1; grid-row: 3; font-size: .8rem; }
  .bud-table td.num { grid-column: 1; grid-row: 4; font-size: .8rem; }
  .bud-table td.date { grid-column: 1; grid-row: 4; padding-left: 3.6rem; font-size: .8rem; }
  .bud-table td[data-label="Estado"] { grid-column: 2; grid-row: 4; text-align: right; }
  .bud-table td.act { position: absolute; top: .55rem; right: .6rem; width: auto; }
}
@media (max-width: 480px) { .bud-kpis { grid-template-columns: 1fr 1fr; gap: .6rem; } .bud-kpi strong { font-size: 1.25rem; } }
.bud-filters select { min-width: 8rem; max-width: 11.5rem; }
.bud-filters input[type="date"] { width: 8.9rem; }
.bud-search { flex: 1 1 12rem; min-width: 11rem; }
.bud-table th, .bud-table td { padding-left: .7rem; padding-right: .7rem; }
@media (min-width: 761px) { .bud-filters .bud-order { display: none; } }
@media (min-width: 1200px) { .bud-table td.patient { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
@media (max-width: 1100px) and (min-width: 761px) { .bud-table td.plan { white-space: normal; } .bud-table td.date { white-space: normal; } }
.bud-filters select { max-width: 10.5rem; }
.bud-filters input[type="date"] { width: 8.3rem; }
.bud-search { flex: 1 1 9rem; min-width: 9rem; }
@media (max-width: 760px) {
  .bud-table td, .bud-table td:first-child { padding: 0; }
  .bud-table td.amount { padding-right: 2.2rem; }
  .bud-table td.num { text-align: left; justify-self: start; }
  .bud-table td.date { padding-left: 3.4rem; }
  .bud-filters select, .bud-filters input[type="date"] { max-width: none; width: 100%; }
}
.bud-table thead th { white-space: normal; line-height: 1.25; }
.bud-table thead th a { white-space: nowrap; }
.bud-table td.plan { max-width: 13rem; }

/* 19. Agenda: presentación de las citas ---------------------------------------
   Solo aspecto. Posición, alto y ancho de cada bloque los fija la vista; aquí no
   se toca la cuadrícula ni la geometría. El color de cada estado es el que la
   clínica definió (--c): se usa pleno en el borde lateral y muy diluido de fondo. */
.cal .cal-appt, .cal .cal-appt.confirmed, .cal .cal-appt.attended, .cal .cal-appt.no_show {
  border-radius: 6px; border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 11%, #fff);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, #fff);
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.cal .cal-appt:hover { background: color-mix(in srgb, var(--c) 17%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, #fff); }
.cal .cal-appt[open] { background: color-mix(in srgb, var(--c) 17%, #fff); box-shadow: inset 0 0 0 1px var(--c), 0 4px 12px -4px rgba(16, 24, 40, .18); }
.cal .cal-appt.ob { border: 0; border-left: 3px solid var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, #fff); background-image: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--c) 9%, transparent) 6px 7px); }
.cal .cal-appt.out { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.cal .cal-appt.out strong { color: var(--muted); text-decoration: line-through; }
.cal .cal-appt summary { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: .28rem .45rem .2rem .5rem; border-radius: 0 6px 6px 0; font-size: .76rem; line-height: 1.3; }
.cal .cal-appt summary:hover { filter: none; background: none; }
.cal .cal-appt summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; box-shadow: none; border-radius: 5px; }
.cal .cal-appt strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: .78rem; font-weight: 580; line-height: 1.3; letter-spacing: -.008em; text-transform: none; }
.cal .cal-appt .t, .cal .cal-appt .p { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .68rem; font-weight: 480; line-height: 1.35; opacity: 1; font-variant-numeric: tabular-nums; }
.cal .cal-appt .has-note { position: absolute; top: .3rem; right: .35rem; display: block; width: auto; line-height: 0; color: color-mix(in srgb, var(--c) 55%, #667085); }
.cal .cal-appt .has-note svg { width: .78rem; height: .78rem; }
.cal .cal-appt:has(.has-note) strong { padding-right: 1rem; }
.cal .cal-appt:has(.stacked) strong { padding-right: 1.5rem; }
.cal .cal-appt:has(.stacked) .has-note { display: none; }
.cal .cal-appt .stacked { top: 3px; right: 3px; background: #c28a2e; font-weight: 600; }
/* Citas cortas (hasta 15 min): una sola línea, centrada */
.cal .cal-appt.short summary { flex-direction: row; align-items: center; padding-top: 0; padding-bottom: 0; }
.cal .cal-appt.short strong { flex: 1; font-size: .74rem; }
.cal .cal-appt.short .has-note { position: static; flex: none; margin-left: .25rem; }
.cal .cal-appt.short:has(.has-note) strong { padding-right: 0; }
/* Con espacio (30 min o más): se suma la hora; desde 45 min, el nombre puede usar dos líneas y se lee la nota */
.cal .cal-appt.roomy .t { display: block; }
.cal .cal-appt.tall strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.cal .cal-appt.tall .p { display: block; margin-top: .1rem; font-variant-numeric: normal; }
/* Columnas angostas */
.cal.dense .cal-appt summary { padding: .22rem .3rem .15rem .35rem; }
.cal.dense .cal-appt strong { font-size: .72rem; letter-spacing: -.012em; }
.cal.dense .cal-appt.short strong { font-size: .7rem; }
.cal.dense .cal-appt .t, .cal.dense .cal-appt .p { font-size: .64rem; }
.cal.dense .cal-appt .has-note svg { width: .7rem; height: .7rem; }
.cal .cal-grip::after { height: 2px; background: color-mix(in srgb, var(--c) 55%, #1b2430); }
/* Nombre completo al enfocar con el teclado (con el mouse lo da el title) */
.cal .cal-appt:has(summary:focus-visible):not([open])::before { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 12; padding: .25rem .5rem; border-radius: 6px; background: #1b2430; color: #fff; font-size: .72rem; font-weight: 500; white-space: nowrap; pointer-events: none; }
.cal .cal-appt:has(summary:focus-visible) { z-index: 10; }

/* Día: tarjetas y filas */
.timeline .appt { border: 1px solid var(--line); border-top: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 10px; padding: .8rem .95rem .75rem; gap: .25rem; box-shadow: var(--shadow); }
.timeline .appt:hover { border-color: var(--line-strong); border-left-color: var(--c); box-shadow: var(--shadow-sm); }
.timeline .appt .time { color: var(--muted); font-size: .78rem; font-weight: 520; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.timeline .appt .name { color: var(--ink); font-size: .98rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; text-transform: none; overflow: hidden; text-overflow: ellipsis; }
.timeline .appt a.name:hover { color: var(--blue); text-decoration: none; }
.timeline .appt .meta { color: var(--muted); font-size: .8rem; }
.timeline .appt .meta .contact { color: var(--faint); font-variant-numeric: tabular-nums; }
.timeline .appt .note-text { margin: .15rem 0 0; color: var(--slate); font-size: .8rem; }
.timeline .appt .note-text svg { width: .85rem; height: .85rem; vertical-align: -2px; color: #c28a2e; }
.timeline .appt .move { color: var(--blue); font-size: .8rem; font-weight: 540; }
.timeline .appt.out { background: var(--surface-2); border-left-style: solid; border-top-style: solid; }
.timeline .appt.out .name { color: var(--muted); }
.timeline .hour-block h2 { color: var(--muted); font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.timeline .note-box summary { width: 1.7rem; height: 1.7rem; border-radius: 8px; color: var(--faint); }
.timeline .note-box summary svg { width: 1rem; height: 1rem; }
.timeline .note-box.has summary { background: var(--amber-soft); border-color: #f0dfb8; color: #c28a2e; }
.timeline .sit { padding: .14rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 560; }
.timeline .st, .timeline .st-select, .cal .st, .cal .st-select { border: 1px solid color-mix(in srgb, var(--c) 30%, #fff); border-left: 3px solid var(--c); border-radius: 8px; background-color: color-mix(in srgb, var(--c) 10%, #fff); color: color-mix(in srgb, var(--c) 45%, #1b2430); font-size: .78rem; font-weight: 560; box-shadow: none; }
.timeline.compact .appt { border-top: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 8px; padding: .35rem .75rem; }
.timeline.compact .appt .name { font-size: .9rem; font-weight: 580; }
.timeline.compact .appt .time { color: var(--slate); font-size: .82rem; font-weight: 560; }

/* 20. Agenda: lenguaje visual del módulo --------------------------------------
   Calendario blanco y neutro; el color queda para el estado de cada cita. Solo
   aspecto: columnas, reglas, posiciones y alturas no se tocan. */
.cal { --grid: #e7edf4; --grid-soft: #edf2f7; background: #fff; border-color: var(--grid); }
.cal-head, .cal.overlay .cal-head { background: #fff; border-bottom-color: var(--grid); }
.cal-head a, .cal-head strong { border-left-color: var(--grid); color: #243041; font-size: .82rem; font-weight: 600; letter-spacing: -.008em; padding-top: .7rem; padding-bottom: .65rem; }
.cal-head a { transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.cal-head a:hover { color: var(--blue); background: #f8fafc; text-decoration: none; }
.cal-head a small { color: #667085; font-size: .68rem; font-weight: 480; }
.cal-head strong.today { color: var(--blue-deep); background: #f4f5ff; box-shadow: inset 0 -2px 0 var(--blue); }
.cal-col { background: #fff; border-left-color: var(--grid); }
.cal-col.today { background: #f4f5ff; }
.cal-line { border-top-color: var(--grid-soft); }
.cal-hours span, .cal-rule span { color: #475569; opacity: .75; font-weight: 500; }
.cal-hours span.hour, .cal-rule span.hour { color: #243041; opacity: 1; font-weight: 600; }
.cal-rule { background: #fff; border-right-color: var(--grid-soft); }
.cal-now, .cal-now::before { background: #d14343; }
.cal-now { height: 1.5px; }
/* Disponibilidad: celdas neutras con un borde fino. Donde no atiende queda el blanco del calendario. */
.cal-free { border-radius: 6px; background: #f8fafc; box-shadow: inset 0 0 0 1px var(--grid), 0 0 0 1px #fff; transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.cal-col.today .cal-free { background: #fbfdff; box-shadow: inset 0 0 0 1px #dbe7f6, 0 0 0 1px #f4f5ff; }
a.cal-free:hover { background: var(--blue-soft); box-shadow: inset 0 0 0 1px var(--blue-line), 0 0 0 1px #fff; }
a.cal-free:hover span { color: var(--blue-deep); font-size: .7rem; font-weight: 580; }
a.cal-free:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cal-off { background: repeating-linear-gradient(135deg, #e3e9f1 0 1px, #f8fafc 1px 7px); }
.cal.overlay { border-color: #ecdcae; box-shadow: 0 0 0 3px rgba(212, 167, 44, .1); }
.cal.overlay .cal-free { background: #fffaeb; box-shadow: inset 0 0 0 1px #f1e3b9, 0 0 0 1px #fff; }
.cal.overlay a.cal-free:hover { background: #fdf0c8; }
.cal.overlay a.cal-free:hover span { color: #7c5a10; }
.legend { color: #667085; font-size: .78rem; }
.legend i { border-color: var(--line); border-radius: 4px; }
.legend i.free { background: #f8fafc; border-color: #d9e1ea; }
.legend i.closed { background: #fff; }
.legend i.off { background: repeating-linear-gradient(135deg, #e3e9f1 0 1px, #f8fafc 1px 7px); }

/* Citas: micro-tarjetas */
.cal .cal-appt, .cal .cal-appt.confirmed, .cal .cal-appt.attended, .cal .cal-appt.no_show {
  border-radius: 8px; border-left: 3px solid var(--c);
  background: color-mix(in srgb, var(--c) 6%, #fff);
  box-shadow: inset 0 0 0 1px #e5eaf2;
}
.cal .cal-appt:hover { background: color-mix(in srgb, var(--c) 3%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, #e5eaf2); }
.cal .cal-appt[open] { background: #fff; box-shadow: inset 0 0 0 1px #e5eaf2, 0 0 0 2px rgba(25, 36, 58, .35); }
.cal .cal-appt.ob { box-shadow: inset 0 0 0 1px #e5eaf2; }
.cal .cal-appt summary { border-radius: 0 8px 8px 0; padding: .3rem .5rem .2rem .55rem; }
.cal .cal-appt strong { color: #1b2430; font-weight: 600; }
.cal .cal-appt .t { color: #475569; font-weight: 500; }
.cal .cal-appt .p { color: #667085; font-weight: 450; }
.cal .cal-appt .has-note { color: #94a3b8; }
.cal .cal-appt:hover .has-note { color: #64748b; }
.cal .cal-appt.sliding, .cal .cal-appt.stretching { outline: 2px solid rgba(25, 36, 58, .45); box-shadow: inset 0 0 0 1px #e5eaf2, 0 8px 20px -8px rgba(16, 24, 40, .28); }
.cal-pop { border-color: #e5eaf2; }
.cal-pop p { color: #667085; font-size: .82rem; }
.cal-pop p strong { color: #1b2430; font-size: .92rem; font-weight: 600; }

/* Barras superiores del módulo */
.agenda-bar { border-color: #e4eaf1; box-shadow: var(--shadow); padding: .75rem 1rem; }
.agenda-bar h1 { font-size: 1.3rem; font-weight: 620; letter-spacing: -.02em; }
.agenda-bar .day span { color: #243041; font-size: .92rem; font-weight: 600; }
.agenda-bar .day a { color: #475569; border-radius: 8px; }
.agenda-bar .day a:hover { background: #f8fafc; color: var(--blue-deep); }
.agenda-bar .where { color: #667085; font-size: .82rem; }
.agenda-bar .where strong { color: #243041; font-weight: 600; }
.agenda-bar .segmented, .chips-filter .segmented { padding: 3px; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; }
.agenda-bar .segmented a, .chips-filter .segmented a { border: 1px solid transparent; border-radius: 8px; color: #475569; font-size: .84rem; font-weight: 520; }
.agenda-bar .segmented a svg, .chips-filter .segmented a svg { color: #94a3b8; width: .95rem; height: .95rem; }
.agenda-bar .segmented a.current, .chips-filter .segmented a.current { background: #fff; border-color: #d8e2ee; color: var(--brand-deep); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.agenda-bar .segmented a.current svg, .chips-filter .segmented a.current svg { color: var(--brand); }
.agenda-bar a.button.outline, .agenda-bar button.outline { border-color: #dce4ee; color: var(--brand-deep); box-shadow: none; }
.agenda-bar a.button.outline.on { background: #fffaeb; border-color: #ecdcae; color: #7c5a10; }
.agenda-bar a.button.success, .agenda-bar a.button.success:hover { border: 0; }
.agenda-bar a.button.success:hover { background: #0d665f; }
.agenda-bar input, .agenda-bar select { border-color: #dce4ee; box-shadow: none; }
.agenda-bar .badge { background: #f8fafc; border-color: #e4eaf1; color: #475569; font-weight: 560; }

/* Filtro por estado y buscador */
.chips-label { color: #667085; font-size: .7rem; letter-spacing: .05em; }
.chips-sep { background: #e4eaf1; }
.chips-filter .pick span { padding: .3rem .7rem; border-color: #dce4ee; background: #fff; color: #667085; font-size: .8rem; font-weight: 500; box-shadow: none; }
.chips-filter .pick span:hover { border-color: #c5d0de; color: #1b2430; }
.chips-filter .pick span::before { width: .45rem; height: .45rem; opacity: .4; }
.chips-filter .pick input:checked + span { border-color: color-mix(in srgb, var(--c, #94a3b8) 35%, #dce4ee); background: color-mix(in srgb, var(--c, #94a3b8) 7%, #fff); color: #1b2430; }
.chips-filter .pick b { padding: 0 .35rem; background: none; color: #667085; font-size: .72rem; font-weight: 560; font-variant-numeric: tabular-nums; }
.search-box { border-color: #dce4ee; border-radius: 999px; box-shadow: none; padding: 0 1rem; }
.search-box svg { color: #94a3b8; width: 1rem; height: 1rem; }
.search-box input::placeholder { color: #98a2b3; }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .1); }

/* Día: tarjetas y filas */
.timeline .cards { border-left-color: #e7edf4; }
.timeline .appt { border-color: #e5eaf2; border-top-color: #e5eaf2; border-left: 3px solid var(--c); border-radius: 10px; box-shadow: none; background: #fff; }
.timeline .appt:hover { border-color: #d5deea; border-left-color: var(--c); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.timeline .appt .time { color: #475569; font-weight: 500; }
.timeline .appt .name { color: #1b2430; font-weight: 600; }
.timeline .appt .meta { color: #667085; }
.timeline .appt .meta .contact { color: #98a2b3; }
.timeline .appt .note-text { padding: .3rem .55rem; border-radius: 8px; background: #f8fafc; color: #475569; }
.timeline .appt .note-text svg { color: #94a3b8; }
.timeline .appt .move { padding: .2rem .55rem; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; color: var(--brand-deep); font-size: .78rem; font-weight: 540; }
.timeline .appt .move:hover { background: var(--blue-soft); border-color: var(--blue-line); text-decoration: none; }
.timeline .appt.out { background: #fafbfc; }
.timeline .note-box summary { color: #94a3b8; }
.timeline .note-box summary:hover { background: #f8fafc; color: #64748b; }
.timeline .note-box.has summary { background: #f8fafc; border-color: #e4eaf1; color: var(--brand); }
.timeline .sit { border: 1px solid transparent; }
.timeline .sit.gray { background: #f8fafc; border-color: #e4eaf1; color: #667085; }
.timeline .st, .timeline .st-select, .cal .st, .cal .st-select { border: 1px solid #e5eaf2; border-left: 3px solid var(--c); background-color: color-mix(in srgb, var(--c) 6%, #fff); color: #1b2430; font-weight: 540; }
.timeline .st-select:hover, .cal .st-select:hover { border-color: #d5deea !important; border-left-color: var(--c) !important; }
.timeline .hour-block h2 { color: #475569; font-size: .82rem; font-weight: 600; }
.timeline .over, .cal-pop .over { background: #fffaeb; border-color: #ecdcae; color: #7c5a10; font-weight: 600; text-transform: none; letter-spacing: 0; }
.overlay-note { border: 1px solid #ecdcae; border-radius: 10px; background: #fffaeb; color: #7c5a10; }

/* 21. Agenda: estados que se distinguen de un vistazo --------------------------
   Fondo con más carácter, borde lateral más ancho, el nombre del estado en su
   propio color (oscurecido para que se lea) y un punto de acento. */
.cal .cal-appt, .cal .cal-appt.confirmed, .cal .cal-appt.attended, .cal .cal-appt.no_show { border-left-width: 4px; background: color-mix(in srgb, var(--c) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, #e5eaf2); }
.cal .cal-appt:hover { background: color-mix(in srgb, var(--c) 15%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, #e5eaf2); }
.cal .cal-appt[open] { background: color-mix(in srgb, var(--c) 10%, #fff); }
.cal .cal-appt .t { color: color-mix(in srgb, var(--c) 45%, #334155); }
.timeline .appt, .timeline.compact .appt { border-left-width: 4px; }
.timeline .st, .timeline .st-select, .cal .st, .cal .st-select {
  border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); border-left: 1px solid color-mix(in srgb, var(--c) 28%, #fff);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--c) 10%, #fff);
  color: color-mix(in srgb, var(--c) 82%, #111827); font-weight: 600;
}
.timeline .st-select:hover, .cal .st-select:hover { border-color: color-mix(in srgb, var(--c) 55%, #fff) !important; }
.timeline .st, .cal .st { display: inline-flex; align-items: center; gap: .4rem; }
.timeline .st::before, .cal .st::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
/* En el selector el punto va como fondo, junto a la flecha */
.timeline .st-select, .cal .st-select {
  padding-left: 1.45rem;
  background-image: radial-gradient(circle closest-side, var(--c) 92%, transparent), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") !important;
  background-position: left .6rem center, right .45rem center !important;
  background-size: .5rem .5rem, .85rem .85rem !important;
  background-repeat: no-repeat !important;
}
.chips-filter .pick span::before { width: .5rem; height: .5rem; opacity: .45; }
.chips-filter .pick input:checked + span { border-color: color-mix(in srgb, var(--c, #94a3b8) 45%, #fff); background: color-mix(in srgb, var(--c, #94a3b8) 10%, #fff); color: color-mix(in srgb, var(--c, #475569) 82%, #111827); font-weight: 560; }
.chips-filter .pick.all input:checked + span { color: #1b2430; }
.chips-filter .pick b { color: inherit; opacity: .8; }
.timeline .appt footer { flex-wrap: nowrap; }
.timeline .appt footer form { min-width: 0; }
.timeline .appt footer .st-select { min-width: 0; max-width: 100%; }
.timeline .appt .move { flex: none; }

/* 22. Inicio: panel ejecutivo --------------------------------------------------
   Todo con el prefijo .home-: no toca otras pantallas. */
.home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem; padding: 1.15rem 1.5rem; margin-bottom: 1.1rem; border-radius: 16px; background: var(--brand-gradient); color: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.home-head h1 { margin: 0; color: #fff; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.home-head p { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem; margin: .2rem 0 0; color: rgba(255, 255, 255, .72); font-size: .84rem; }
.home-head p i { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, .45); }
.home-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.home-actions a { display: inline-flex; align-items: center; gap: .45rem; height: 2.35rem; padding: 0 .95rem; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(12, 20, 56, .28); color: #fff; font-size: .86rem; font-weight: 540; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
/* Velo oscuro (no blanco): sobre el extremo teal del degradado el texto blanco daba 3,8:1; así queda sobre 5,8:1. */
.home-actions a:hover { background: rgba(12, 20, 56, .42); border-color: rgba(255, 255, 255, .36); text-decoration: none; }
.home-actions a.primary { background: #0f766e; border-color: #0f766e; }
.home-actions a.primary:hover { background: #0d665f; border-color: #0d665f; }
.home-actions a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: none; }
.home-actions svg { width: 1rem; height: 1rem; opacity: .9; }

.home-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.6rem; }
.home-kpis.n1, .home-kpis.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home-kpis.n4, .home-kpis.n7, .home-kpis.n8 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-kpi { display: grid; gap: .1rem; padding: 1rem 1.15rem 1.05rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; color: inherit; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.home-kpi:hover { border-color: #cfd9e6; box-shadow: 0 2px 8px -2px rgba(16, 24, 40, .08); text-decoration: none; }
.home-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 1.9rem; }
.home-kpi small { color: #667085; font-size: .8rem; font-weight: 540; }
.home-kpi i { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--bg); color: #667085; }
.home-kpi i svg { width: 1rem; height: 1rem; }
.home-kpi i.blue { background: var(--brand-soft); color: var(--brand); }
.home-kpi i.teal { background: #e6f4f0; color: #0f766e; }
.home-kpi strong { color: #1b2430; font-size: 1.75rem; font-weight: 640; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.home-kpi-hint { color: #667085; font-size: .8rem; }
.home-kpi-hint.warn { color: #9a6a1a; }
.home-kpi-hint.warn::before { content: ''; display: inline-block; width: .4rem; height: .4rem; margin-right: .4rem; border-radius: 50%; background: #c28a2e; vertical-align: 1px; }

.home-zone { margin: 0 0 .65rem; color: #667085; font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.home-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: .9rem; align-items: start; margin-bottom: 1.6rem; }
.home-panel { border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); min-width: 0; }
.home-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem .9rem; }
.home-panel h3 { margin: 0; color: #1b2430; font-size: .98rem; font-weight: 620; letter-spacing: -.012em; }
.home-panel header p { margin: .15rem 0 0; color: #667085; font-size: .8rem; }
.home-panel header p strong { color: #1b2430; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-panel header > a { flex: none; padding: .3rem .7rem; border: 1px solid #dce4ee; border-radius: 8px; color: var(--brand-deep); font-size: .8rem; font-weight: 540; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.home-panel header > a:hover { background: var(--brand-soft); border-color: var(--brand-line); text-decoration: none; }
.home-panel .empty { border: 0; box-shadow: none; padding-top: .5rem; }
.home-delta { font-weight: 600; font-variant-numeric: tabular-nums; }
.home-delta.up { color: #0f766e; }
.home-delta.down { color: #9a6a1a; }

/* Gráfico de barras: líneas de referencia muy suaves, valor sobre cada barra y aviso al pasar o enfocar */
.home-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .5rem; padding: .4rem 1.25rem 1.1rem; }
.home-chart > * { position: relative; display: grid; grid-template-rows: 1.1rem 9rem auto; gap: .3rem; justify-items: center; color: inherit; border-radius: 8px; outline: none; }
.home-chart > *:hover { text-decoration: none; }
.home-chart b { align-self: end; color: #475569; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.home-chart .track { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; border-bottom: 1px solid #e4eaf1; background: linear-gradient(#edf2f7, #edf2f7) 0 0 / 100% 1px no-repeat, linear-gradient(#edf2f7, #edf2f7) 0 33.3% / 100% 1px no-repeat, linear-gradient(#edf2f7, #edf2f7) 0 66.6% / 100% 1px no-repeat; }
.home-chart .track i { width: min(62%, 2.4rem); min-height: 0; border-radius: 5px 5px 0 0; background: var(--brand); opacity: .82; transform-origin: bottom; animation: home-grow .5s var(--ease) both; transition: opacity var(--fast) var(--ease); }
.home-chart.money .track i { background: #0f766e; }
.home-chart > *:hover .track i, .home-chart > *:focus-visible .track i, .home-chart .today .track i { opacity: 1; }
.home-chart .day { color: #667085; font-size: .74rem; font-weight: 500; white-space: nowrap; }
.home-chart .day::first-letter { text-transform: uppercase; }
.home-chart .today .day { color: var(--brand-deep); font-weight: 640; }
.home-chart .today b { color: #1b2430; }
.home-chart > *:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(79, 70, 229, .45); }
.home-chart > *:hover::after, .home-chart > *:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% - .6rem); z-index: 5; translate: -50% 0; padding: .3rem .55rem; border-radius: 7px; background: #1b2430; color: #fff; font-size: .74rem; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 16px -6px rgba(16, 24, 40, .4); }
.home-chart > *:first-child:hover::after, .home-chart > *:first-child:focus-visible::after { left: 0; translate: 0 0; }
.home-chart > *:last-child:hover::after, .home-chart > *:last-child:focus-visible::after { left: auto; right: 0; translate: 0 0; }
@keyframes home-grow { from { transform: scaleY(0); } }

/* Agenda de hoy, resumida */
.home-today { margin: 0; padding: 0 0 .35rem; list-style: none; }
.home-today li { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .55rem 1.25rem; border-top: 1px solid #edf2f7; transition: background var(--fast) var(--ease); }
.home-today li:hover { background: #fafbfc; }
.home-today time { color: #1b2430; font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-today .who { display: grid; min-width: 0; }
.home-today .who a, .home-today .who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1b2430; font-size: .88rem; font-weight: 580; }
.home-today .who a:hover { color: var(--brand); text-decoration: none; }
.home-today .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #667085; font-size: .76rem; }
.home-today .state { display: inline-flex; align-items: center; gap: .4rem; padding: .14rem .6rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 28%, #fff); background: color-mix(in srgb, var(--c) 10%, #fff); color: color-mix(in srgb, var(--c) 82%, #111827); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.home-today .state i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--c); }
.home-today li.late time { color: #9a6a1a; }
.home-more { display: block; padding: .7rem 1.25rem .85rem; border-top: 1px solid #edf2f7; color: var(--brand); font-size: .82rem; font-weight: 540; }

/* Pendientes */
.home-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .7rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.home-todo a { display: flex; align-items: center; gap: .8rem; height: 100%; padding: .8rem 1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; color: inherit; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.home-todo a:hover { border-color: #cfd9e6; background: #fcfdfe; text-decoration: none; }
.home-todo i, .home-clear i { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 9px; background: var(--brand-soft); color: var(--brand); }
.home-todo i svg, .home-clear i svg { width: 1.05rem; height: 1.05rem; }
.home-todo i.warn { background: #fdf6e7; color: #c28a2e; }
.home-todo i.ok, .home-clear i { background: #e6f4f0; color: #0f766e; }
.home-todo span, .home-clear span { display: grid; flex: 1; min-width: 0; }
.home-todo strong, .home-clear strong { color: #1b2430; font-size: .88rem; font-weight: 580; }
.home-todo small, .home-clear small { color: #667085; font-size: .78rem; }
.home-todo b { min-width: 1.8rem; padding: .1rem .5rem; border-radius: 999px; background: var(--bg); border: 1px solid #e4eaf1; color: #1b2430; font-size: .8rem; font-weight: 620; text-align: center; font-variant-numeric: tabular-nums; }
.home-clear { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; padding: .8rem 1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; }

/* Recaudación por sucursal */
.home-branches { display: grid; gap: .95rem; margin: 0; padding: .2rem 1.25rem 1.25rem; list-style: none; }
.home-branches div { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .35rem; font-size: .86rem; }
.home-branches span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1b2430; font-weight: 540; }
.home-branches b { color: #1b2430; font-weight: 620; font-variant-numeric: tabular-nums; }
.home-branches small { width: 2.6rem; color: #667085; font-size: .76rem; text-align: right; font-variant-numeric: tabular-nums; }
.home-branches i { display: block; height: 6px; border-radius: 999px; background: linear-gradient(#0f766e, #0f766e) 0 0 / var(--w) 100% no-repeat #edf2f7; }

@media (max-width: 1000px) { .home-kpis, .home-kpis.n4, .home-kpis.n7, .home-kpis.n8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .home-head { padding: 1rem 1.1rem; }
  .home-actions { width: 100%; }
  .home-actions a { flex: 1 1 auto; justify-content: center; }
  .home-kpis { gap: .6rem; }
  .home-kpi { padding: .85rem .9rem; }
  .home-kpi strong { font-size: 1.35rem; }
  .home-kpi i { display: none; }
  .home-chart { gap: .25rem; padding-left: .8rem; padding-right: .8rem; }
  .home-chart > * { grid-template-rows: 1.1rem 7rem auto; }
  .home-chart .day { font-size: .66rem; }
  .home-today li { grid-template-columns: 2.9rem minmax(0, 1fr); padding: .55rem 1rem; }
  .home-today .state { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .home-chart .track i { animation: none; } }

/* 23. Listado de pacientes -----------------------------------------------------
   Usa el encabezado, la tarjeta y el pie del listado de presupuestos (.bud-) y
   los indicadores del inicio (.home-kpi); lo propio lleva el prefijo .pat-. */
.pat-kpis { grid-template-columns: repeat(2, minmax(0, 17rem)); margin-bottom: 1.1rem; }
.pat-kpis.three { grid-template-columns: repeat(3, minmax(0, 17rem)); }
.pat-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; padding: .9rem 1.15rem; border-bottom: 1px solid #e4eaf1; }
.pat-search { display: flex; align-items: center; gap: .6rem; flex: 1 1 20rem; max-width: 34rem; margin: 0; }
.pat-search label { position: relative; flex: 1; margin: 0; }
.pat-search label svg { position: absolute; left: .75rem; top: 50%; translate: 0 -50%; width: .95rem; height: .95rem; color: #94a3b8; pointer-events: none; }
.pat-search input { width: 100%; height: 2.35rem !important; padding-left: 2.2rem; border-color: #dce4ee; box-shadow: none; font-size: .88rem; }
.pat-search button, .pat-actions a.button { height: 2.35rem; font-size: .86rem; }
.pat-search button, .pat-actions a.button.outline { border-color: #dce4ee; box-shadow: none; }
.pat-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pat-actions a.button.outline svg { color: #667085; }

.pat-scroll { overflow-x: auto; }
table.pat-table { width: 100%; min-width: 50rem; table-layout: fixed; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; }
.pat-table .c-num { width: 6%; } .pat-table .c-name { width: 25%; } .pat-table .c-doc { width: 15%; } .pat-table .c-age { width: 6%; }
.pat-table .c-phone { width: 16%; } .pat-table .c-agr { width: 21%; } .pat-table .c-act { width: 11%; }
.pat-table th, .pat-table td { padding: .6rem .75rem; vertical-align: middle; border-bottom: 1px solid #e4eaf1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pat-table th:first-child, .pat-table td:first-child { padding-left: 1.15rem; }
.pat-table thead th { background: #f8fafc; }
.pat-table tbody tr:last-child td { border-bottom: 0; }
.pat-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pat-table td.num { color: #667085; }
.pat-table td.name a { color: #1b2430; font-weight: 580; }
.pat-table td.name a:hover { color: var(--brand); text-decoration: none; }
/* Documento y celular nunca se cortan ni se truncan */
.pat-table td.doc, .pat-table td.phone { overflow: visible; text-overflow: clip; color: #344054; font-variant-numeric: tabular-nums; }
.pat-table td.doc small { color: #667085; font-size: .72rem; font-weight: 560; }
.pat-table td.agr { color: #344054; }
.pat-table td.agr span { display: block; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; outline: none; }
.pat-table td.agr span:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, .4); }
.pat-table .none { color: #98a2b3; }
.pat-table td.act { padding-right: 1rem; text-align: right; overflow: visible; }
.pat-book, td.act > a.pat-book { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; color: var(--brand-deep); font-size: .8rem; font-weight: 540; box-shadow: none; white-space: nowrap; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.pat-book svg { width: .9rem; height: .9rem; color: #94a3b8; transition: color var(--fast) var(--ease); }
.pat-book:hover, td.act > a.pat-book:hover { background: #e6f4f0; border-color: #b9ddd5; color: #0f766e; text-decoration: none; }
.pat-book:hover svg { color: #0f766e; }
.pat-card .empty { border: 0; box-shadow: none; }

@media (max-width: 1100px) { .pat-actions a.button.outline { padding: 0 .7rem; } }
@media (max-width: 760px) {
  .pat-kpis, .pat-kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pat-search, .pat-actions { flex: 1 1 100%; max-width: none; }
  .pat-actions a.button { flex: 1 1 auto; justify-content: center; }
  /* Cada paciente pasa a tarjeta: nada se comprime ni se desplaza hacia el lado. */
  .pat-scroll { overflow: visible; }
  table.pat-table { min-width: 0; table-layout: auto; }
  .pat-table thead, .pat-table colgroup { display: none; }
  .pat-table, .pat-table tbody { display: block; }
  .pat-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .8rem 1.15rem; border-bottom: 1px solid #e4eaf1; }
  .pat-table tbody tr:last-child { border-bottom: 0; }
  .pat-table td, .pat-table td:first-child { display: block; padding: 0; border: 0; background: none !important; text-align: left; overflow: visible; white-space: normal; }
  .pat-table td.name { grid-column: 1; grid-row: 1; font-size: .95rem; }
  .pat-table td.act { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; }
  .pat-table td.doc { grid-column: 1; grid-row: 2; }
  .pat-table td.phone { grid-column: 1; grid-row: 3; }
  .pat-table td.agr { grid-column: 1 / -1; grid-row: 4; font-size: .82rem; color: #667085; }
  .pat-table td.num:not(.age) { grid-column: 2; grid-row: 3; text-align: right; font-size: .78rem; }
  .pat-table td.num:not(.age)::before { content: 'N.º '; }
  .pat-table td.age { display: none; }
  .pat-table td.doc:has(.none), .pat-table td.phone:has(.none) { display: none; }
}
table.pat-table { min-width: 56rem; }
.pat-table .c-num { width: 6%; } .pat-table .c-name { width: 23%; } .pat-table .c-doc { width: 15%; } .pat-table .c-age { width: 6%; }
.pat-table .c-phone { width: 18%; } .pat-table .c-agr { width: 20%; } .pat-table .c-act { width: 12%; }
@media (max-width: 760px) { table.pat-table { min-width: 0; } }
.pat-table .c-num { width: 7%; } .pat-table .c-name { width: 22%; } .pat-table .c-doc { width: 14%; } .pat-table .c-age { width: 6%; }
.pat-table .c-phone { width: 17%; } .pat-table .c-agr { width: 23%; } .pat-table .c-act { width: 11%; }
.pat-table td.num, .pat-table th.num { overflow: visible; text-overflow: clip; }
.pat-table th, .pat-table td { padding-left: .6rem; padding-right: .6rem; }
.pat-card { min-width: 0; max-width: 100%; }
.pat-scroll { position: relative; }
.pat-table .c-name { width: 21%; } .pat-table .c-act { width: 12%; }
.pat-table td.act { padding-right: 1.15rem; }
@media (max-width: 760px) { .pat-table td.act { padding: 0; } }
/* Nombre o convenio que no cabe: se resalta y se muestra completo al pasar o enfocar */
.pat-table td.agr, .pat-table td.name { position: relative; overflow: visible; }
.pat-table td.name a { display: block; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; }
.pat-table td.cut span, .pat-table td.cut a { cursor: help; }
.pat-table td.name.cut a { cursor: pointer; }
.pat-table td.cut:hover span, .pat-table td.cut:hover a, .pat-table td.cut:focus-within span { color: var(--brand-deep); background: var(--brand-soft); box-shadow: 0 0 0 4px var(--brand-soft); }
.pat-table td.cut:hover::after, .pat-table td.cut:focus-within::after {
  content: attr(data-full); position: absolute; left: .35rem; bottom: calc(100% - .45rem); z-index: 6;
  width: max-content; max-width: 22rem; padding: .4rem .65rem; border-radius: 8px;
  background: #1b2430; color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.35; white-space: normal;
  box-shadow: 0 8px 20px -8px rgba(16, 24, 40, .45); pointer-events: none; animation: combo-in-up .12s var(--ease);
}
.pat-table tbody tr:first-child td.cut:hover::after, .pat-table tbody tr:first-child td.cut:focus-within::after { bottom: auto; top: calc(100% - .45rem); }
@media (max-width: 760px) { .pat-table td.cut::after { display: none; } }
.pat-table td.agr.cut:hover::after, .pat-table td.agr.cut:focus-within::after { max-width: 18rem; }

/* 24. Odontograma: dibujo clínico ----------------------------------------------
   Solo aspecto. Piezas, caras, zonas y su comportamiento son los mismos. */
.odonto { --od-pend: #d14343; --od-done: #2563eb; --od-sel: #0f766e; --od-line: #94a3b8; }
.odonto-bar { margin-bottom: .9rem; }
.odonto .segmented { padding: 3px; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; }
.odonto .segmented button, .odonto .segmented button:hover { height: auto; padding: .34rem .85rem; border: 1px solid transparent; border-radius: 8px; background: none; color: #475569; font-size: .84rem; font-weight: 520; }
.odonto .segmented button:hover { color: #1b2430; }
.odonto .segmented button.current, .odonto .segmented button.current:hover { background: #fff; border-color: #d8e2ee; color: var(--brand-deep); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.od-legend { display: inline-flex; flex-wrap: wrap; gap: .3rem 1.1rem; color: #667085; font-size: .8rem; font-weight: 500; }
.od-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.od-legend i { width: .7rem; height: .7rem; margin: 0; border-radius: 4px; vertical-align: 0; }
.od-legend i.pend { background: color-mix(in srgb, var(--od-pend) 28%, #fff); box-shadow: inset 0 0 0 1.5px var(--od-pend); }
.od-legend i.done { background: color-mix(in srgb, var(--od-done) 28%, #fff); box-shadow: inset 0 0 0 1.5px var(--od-done); }
.od-legend i.sel { background: color-mix(in srgb, var(--od-sel) 45%, #fff); box-shadow: inset 0 0 0 1.5px var(--od-sel); }
.od-set { max-width: 50rem; }
.odonto[data-view="mixta"] .od-temporal { border-top: 1px solid #edf2f7; }

.od-shape, .od-face { fill: #fff; stroke: var(--od-line); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: fill var(--fast) var(--ease), stroke var(--fast) var(--ease); }
.od-shape { fill: #fbfcfd; }
.od-face { stroke-width: .9; stroke: #b6c0cd; }
.od-neck { fill: none; stroke: #cbd5e1; stroke-width: .9; stroke-linecap: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.od-frame { fill: none; stroke: var(--od-line); stroke-width: 1.15; pointer-events: none; vector-effect: non-scaling-stroke; }
.od-mid { stroke: #e4eaf1; stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.od-num { font-size: 8.5px; font-weight: 600; fill: #64748b; letter-spacing: .01em; }
.od-zone rect { fill: #f8fafc; stroke: #e4eaf1; stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--fast) var(--ease), stroke var(--fast) var(--ease); }
.od-zone text { font-size: 8.5px; font-weight: 560; fill: #64748b; letter-spacing: .02em; }

.od-shape.pend { fill: color-mix(in srgb, var(--od-pend) 16%, #fff); stroke: var(--od-pend); }
.od-shape.done { fill: color-mix(in srgb, var(--od-done) 16%, #fff); stroke: var(--od-done); }
.od-face.pend { fill: color-mix(in srgb, var(--od-pend) 42%, #fff); stroke: var(--od-pend); }
.od-face.done { fill: color-mix(in srgb, var(--od-done) 42%, #fff); stroke: var(--od-done); }
.od-shape.pend + .od-neck { stroke: color-mix(in srgb, var(--od-pend) 55%, #fff); }
.od-shape.done + .od-neck { stroke: color-mix(in srgb, var(--od-done) 55%, #fff); }
.od-zone.pend rect { fill: color-mix(in srgb, var(--od-pend) 12%, #fff); stroke: color-mix(in srgb, var(--od-pend) 70%, #fff); }
.od-zone.done rect { fill: color-mix(in srgb, var(--od-done) 12%, #fff); stroke: color-mix(in srgb, var(--od-done) 70%, #fff); }
.od-zone.pend text { fill: #a83030; }
.od-zone.done text { fill: #1d4ed8; }

.odonto.selectable .od-shape:hover, .odonto.selectable .od-face:hover { stroke: #64748b; fill: #f1f5f9; }
.odonto.selectable .od-shape.pend:hover, .odonto.selectable .od-face.pend:hover { stroke: var(--od-pend); fill: color-mix(in srgb, var(--od-pend) 30%, #fff); }
.odonto.selectable .od-shape.done:hover, .odonto.selectable .od-face.done:hover { stroke: var(--od-done); fill: color-mix(in srgb, var(--od-done) 30%, #fff); }
.odonto.selectable .od-zone:hover rect { fill: #f1f5f9; stroke: #cbd5e1; }
.od-shape.sel, .od-face.sel { fill: color-mix(in srgb, var(--od-sel) 38%, #fff) !important; stroke: var(--od-sel) !important; stroke-width: 1.5; }
.od-zone.sel rect { fill: color-mix(in srgb, var(--od-sel) 16%, #fff) !important; stroke: var(--od-sel) !important; stroke-width: 1.4; }
.od-zone.sel text { fill: #0b5f58; }
.od-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.od-chip { font: inherit; font-size: .78rem; font-weight: 560; padding: 4px 10px; border-radius: 999px; background: #f8fafc; border: 1px solid #e4eaf1; color: #475569; cursor: default; box-shadow: none; }
.odonto.selectable .od-chip { cursor: pointer; }
.odonto.selectable .od-chip:hover { background: #f1f5f9; border-color: #cbd5e1; }
.od-chip.pend { background: color-mix(in srgb, var(--od-pend) 12%, #fff); border-color: color-mix(in srgb, var(--od-pend) 70%, #fff); color: #a83030; }
.od-chip.done { background: color-mix(in srgb, var(--od-done) 12%, #fff); border-color: color-mix(in srgb, var(--od-done) 70%, #fff); color: #1d4ed8; }
.od-chip.sel { background: color-mix(in srgb, var(--od-sel) 16%, #fff) !important; border-color: var(--od-sel) !important; color: #0b5f58 !important; }
.od-tooth:has(.sel) .od-num { fill: #0f766e; }
.od-tooth:has(.sel) .od-frame { stroke: var(--od-sel); }
.od-summary { border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; color: #667085; }

/* 25. Odontograma: anatomía ----------------------------------------------------
   Contorno principal más marcado que las divisiones y los surcos. */
.odonto { --od-line: #64748b; --od-inner: #a3b1c2; }
.od-shape { fill: #fff; stroke: var(--od-line); stroke-width: 1.35; }
.od-neck { stroke: var(--od-inner); stroke-width: .95; }
.od-face { fill: #fff; stroke: var(--od-inner); stroke-width: .9; }
.od-frame { fill: none; stroke: var(--od-line); stroke-width: 1.35; stroke-linejoin: round; pointer-events: none; vector-effect: non-scaling-stroke; transition: stroke var(--fast) var(--ease); }
.od-groove { fill: none; stroke: var(--od-inner); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; vector-effect: non-scaling-stroke; opacity: .9; }
.odonto.selectable .od-shape:hover, .odonto.selectable .od-face:hover { stroke: var(--brand); fill: var(--brand-soft); }
.odonto.selectable .od-shape.pend:hover, .odonto.selectable .od-face.pend:hover { stroke: var(--od-pend); }
.odonto.selectable .od-shape.done:hover, .odonto.selectable .od-face.done:hover { stroke: var(--od-done); }
.od-tooth:has(.od-face.pend) .od-groove, .od-tooth:has(.od-face.done) .od-groove, .od-tooth:has(.od-face.sel) .od-groove { stroke: #64748b; opacity: .55; }
.od-face.pend { fill: color-mix(in srgb, var(--od-pend) 34%, #fff); }
.od-face.done { fill: color-mix(in srgb, var(--od-done) 34%, #fff); }
.od-shape.sel, .od-face.sel { fill: color-mix(in srgb, var(--od-sel) 34%, #fff) !important; }
.od-num { fill: #475569; }

/* 26. Odontograma: volumen -------------------------------------------------------
   Sombras y brillo encima del color de cada pieza. No reciben clics. */
.od-vol { pointer-events: none; stroke: none; }
.od-shape { fill: #fdfdfb; }
.od-face { fill: #fdfdfb; }
.od-shape.pend { fill: color-mix(in srgb, var(--od-pend) 26%, #fff); }
.od-shape.done { fill: color-mix(in srgb, var(--od-done) 26%, #fff); }
@media print { .od-vol { display: none; } }

/* 27. Plan: agregar una prestación dentro de una sección ------------------------ */
.group-add { margin: .6rem 0 0; }
/* Abierto bajo el encabezado de la sección: separado de la tabla de abajo; cerrado no ocupa lugar. */
.plan-group > .group-add { margin: .5rem 0 .8rem; }
.plan-group > .group-add:has(> [data-add-slot][hidden]) { margin: 0; }
.group-add > button { height: 2.2rem; font-size: .84rem; border-style: dashed; border-color: #cbd5e1; color: var(--brand-deep); box-shadow: none; }
.group-add > button:hover { border-style: solid; }
.group-add-slot { padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--brand-line); border-radius: 12px; background: #f8fbff; animation: combo-in .14s var(--ease); }
.group-add-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: .8rem; }
.group-add-head strong { color: var(--brand-deep); font-size: .92rem; font-weight: 620; }
.group-add-head span { flex: 1; min-width: 0; color: #667085; font-size: .8rem; }
.od-add.in-group { margin: 0; }
/* La sección ya está elegida: el campo no hace falta aquí. */
.od-add.in-group label:has(select[name="section_id"]) { display: none; }

/* 28. Plan: secciones, prestaciones y pagos ------------------------------------
   Cada sección es una tarjeta con su encabezado y su tabla. Solo aspecto. */
.plan-groups { display: grid; gap: 1rem; }
.plan-group { border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.plan-group.drop-here { background: #f3faf8; box-shadow: 0 0 0 2px var(--green); }
.plan-group .group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .4rem .7rem; margin: 0; padding: .7rem .9rem .7rem 1.15rem; border-bottom: 1px solid #e4eaf1; border-radius: 14px 14px 0 0; background: #fbfcfd; }
.plan-group .group-head h3 { margin: 0; color: #1b2430; font-size: .98rem; font-weight: 620; letter-spacing: -.012em; }
.plan-group .group-head .grow { flex: 1; }
.group-count { color: #667085; font-size: .8rem; font-weight: 450; }
.group-total { color: #1b2430; font-size: .98rem; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.plan-group .group-add-btn { height: 2.05rem; padding: 0 .75rem; border-color: #dce4ee; color: var(--brand-deep); font-size: .82rem; box-shadow: none; }
.plan-group .group-add-btn svg { width: .9rem; height: .9rem; color: #0f766e; }
.plan-group .group-add-btn:hover { background: #e6f4f0; border-color: #b9ddd5; color: #0f766e; }
.plan-group details.rename summary { gap: .35rem; }
.plan-group .edit-mark { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 7px; background: none; color: #94a3b8; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.plan-group .edit-mark svg { width: .9rem; height: .9rem; }
.plan-group details.rename summary:hover .edit-mark, .plan-group details.rename[open] .edit-mark { background: var(--brand-soft); color: var(--brand); }

.plan-group > table { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: visible; font-size: .875rem; }
.plan-group > table thead th { padding: .5rem .8rem; background: #fff; border-bottom: 1px solid #edf2f7; border-radius: 0 !important; color: #667085; font-size: .66rem; }
.plan-group > table td { padding: .7rem .8rem; border-bottom: 1px solid #edf2f7; vertical-align: middle; }
.plan-group > table th:first-child, .plan-group > table td:first-child { padding-left: 1.15rem; }
.plan-group > table th:last-child, .plan-group > table td:last-child { padding-right: .9rem; }
.plan-group > table tbody tr:last-child td { border-bottom: 0; }
.plan-group > table tbody tr:last-child > :first-child { border-bottom-left-radius: 14px; }
.plan-group > table tbody tr:last-child > :last-child { border-bottom-right-radius: 14px; }
.plan-group > table tbody tr:hover > td { background: #fafbfc; }
.plan-group > table td.hint { padding: 1.1rem 1.15rem; color: #667085; font-size: .84rem; text-align: left; }
.plan-group .num { text-align: right; font-variant-numeric: tabular-nums; }
.plan-group td.num strong { color: #1b2430; font-size: .92rem; font-weight: 620; }
.plan-group td.num small { color: #667085; font-size: .74rem; }
.item-name { display: block; color: #1b2430; font-size: .92rem; font-weight: 600; letter-spacing: -.008em; line-height: 1.3; }
tr.item-done .item-name { color: #1b2430; }
.plan table td small.item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .7rem; margin-top: .15rem; color: #667085; font-size: .78rem; font-weight: 450; }
.done-on { display: inline-flex; align-items: center; gap: .3rem; }
.done-on svg { width: .8rem; height: .8rem; color: #94a3b8; }
.item-place { color: #344054; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-place abbr { margin-left: .45rem; padding: .05rem .4rem; border: 1px solid #e4eaf1; border-radius: 6px; background: #f8fafc; color: #475569; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; cursor: help; }
.item-place abbr:focus-visible { outline: 2px solid rgba(79, 70, 229, .45); outline-offset: 1px; }
.plan table td.item-place small { display: inline; margin-left: .4rem; color: #667085; font-size: .76rem; }
.item-place .none { color: #98a2b3; }

/* Estado clínico y estado financiero: dos indicadores chicos, uno sobre otro */
.item-states { display: grid; gap: .3rem; justify-items: start; }
.plan-group .item-state, .plan-group details.menu.progress summary.item-state { display: inline-flex; align-items: center; gap: .4rem; margin: 0; padding: .12rem .6rem .12rem .5rem; border: 1px solid transparent; border-radius: 999px; font-size: .74rem; font-weight: 560; line-height: 1.5; white-space: nowrap; box-shadow: none; }
.plan-group .item-state::before { content: ''; flex: none; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.plan-group .item-state.wait { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.plan-group .item-state.wait::before { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.plan-group .item-state.run { background: #fff; border-color: #c9dbf5; color: var(--brand); }
.plan-group .item-state.run::before { background: conic-gradient(currentColor 50%, transparent 0); box-shadow: inset 0 0 0 1.5px currentColor; }
.plan-group .item-state.done { background: #eaf2ff; border-color: var(--brand-line); color: var(--brand); }
.plan-group .item-state.paid { background: #e6f4f0; border-color: #c4e3de; color: #0f766e; }
.plan-group .item-state.due { background: #fff7e8; border-color: #f3e2bd; color: #9a6700; }
.plan-group details.menu.progress summary.item-state { cursor: pointer; }
.plan-group details.menu.progress summary.item-state::after { content: ''; width: .5rem; height: .5rem; margin-left: .05rem; background: currentColor; opacity: .6; clip-path: polygon(50% 78%, 8% 30%, 92% 30%); }
.plan-group details.menu.progress summary.item-state:hover { filter: brightness(.97); }

/* Círculo para evolucionar y casilla de selección múltiple: se ven distintos */
.plan-group td.tick { width: 1%; padding-right: .1rem !important; }
.plan-group .tick-mark, .plan-group details.tick-menu summary { width: 1.75rem; height: 1.75rem; border: 1.5px solid #cbd5e1; background: #fff; color: #cbd5e1; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease); }
.plan-group .tick-mark svg { width: .9rem; height: .9rem; }
.plan-group summary.tick-mark:hover, .plan-group details.tick-menu[open] summary { border-color: var(--brand); background: #eaf2ff; color: var(--brand); }
.plan-group .tick-mark.done { border-color: var(--brand); background: var(--brand); color: #fff; }
.plan-group .tick-mark.part, .plan-group details.tick-menu summary.part { border-color: var(--brand); background: #fff; color: var(--brand); }
.plan-group .tick-mark.off { border-style: dashed; color: transparent; }
.plan-group input.bulk-only { width: 1.15rem; height: 1.15rem; margin: .3rem; border-radius: 5px; accent-color: var(--brand-deep); cursor: pointer; }

/* Acciones de la fila: tres puntos */
.plan-group details.menu summary.dots, .plan-group details.menu summary.dots:hover { display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid transparent; border-radius: 8px; background: none; box-shadow: none; color: #667085; }
.plan-group details.menu summary.dots::after { content: none; }
.plan-group details.menu summary.dots svg { width: 1.05rem; height: 1.05rem; }
.plan-group details.menu summary.dots:hover, .plan-group details.menu[open] summary.dots { border-color: #e4eaf1; background: #f8fafc; color: #1b2430; }
.plan-group td.row-actions .menu-pop { min-width: 12.5rem; gap: 1px; padding: .3rem; }
.plan-group td.row-actions .menu-pop button.link, .plan-group td.row-actions .menu-pop button.link:hover { width: 100%; justify-content: flex-start; padding: .45rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1b2430; font-size: .85rem; font-weight: 450; }
.plan-group td.row-actions .menu-pop button.link:hover { background: var(--brand-soft); color: var(--brand-deep); }
.plan-group td.row-actions .menu-pop button.link.danger { color: #c53a3a; }
.plan-group td.row-actions .menu-pop button.link.danger:hover { background: #fff1f2; color: #c53a3a; }
.plan-group td.row-actions .menu-pop .move-to { margin-top: .25rem; padding: .5rem .6rem .35rem; }
.plan-group td.row-actions > form button.link { border-color: #dce4ee; color: var(--brand-deep); }
.plan-group details.notes summary { color: var(--brand); font-weight: 540; }
.plan-group details.notes blockquote { border-left-color: var(--brand-line); background: #f8fafc; }
.plan-group .group-add { margin: 0; }
.plan-group .group-add-slot { margin: 0 .9rem .9rem; }

/* Historial de pagos */
table.pay-table { font-size: .875rem; }
.pay-table th, .pay-table td { padding: .65rem .8rem; vertical-align: middle; }
.pay-table th:first-child, .pay-table td:first-child { padding-left: 1.15rem; }
.pay-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-table .pay-num { color: #475569; font-weight: 560; font-variant-numeric: tabular-nums; }
.pay-table .pay-date, .pay-table .pay-method, .pay-table .pay-by { color: #475569; white-space: nowrap; }
.pay-table .pay-amount { color: #1b2430; font-weight: 620; }
.pay-table tr.refund .pay-amount { color: #c53a3a; }
.pay-table .pay-free span:not(.none) { padding: .1rem .5rem; border: 1px solid #f3e2bd; border-radius: 999px; background: #fff7e8; color: #9a6700; font-size: .78rem; font-weight: 560; }
.pay-table .none { color: #98a2b3; }
.pay-tag { display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .6rem .12rem .5rem; border: 1px solid #c4e3de; border-radius: 999px; background: #e6f4f0; color: #0f766e; font-size: .74rem; font-weight: 560; }
.pay-tag::before { content: ''; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.pay-tag.refund { border-color: #f6d0d4; background: #fff1f2; color: #c53a3a; }
.pay-table td.pay-kind small { display: inline; color: #667085; font-size: .78rem; }
.pay-table td.pay-kind small.ref { display: block; margin-top: .15rem; }

@media (max-width: 760px) {
  .plan-group .group-head { padding: .7rem .8rem; }
  .plan-group .group-head .grow { display: none; }
  .plan-group .group-total { margin-left: auto; }
  .plan-group .group-add-btn { flex: 1 1 100%; justify-content: center; }
}
@media print { .plan-group { box-shadow: none; } }
/* Mismas columnas en todas las secciones */
.plan-group > table td.item-place { width: 12.5rem; }
.plan-group > table td.num { width: 8.5rem; }
.plan-group > table td:has(> .item-states) { width: 12rem; }
.plan-group > table td.row-actions { width: 3.2rem; }
.plan-group .item-state.run { background: #f6f9ff; }
.plan-group > table td.item-status { width: 12rem; }
@media (max-width: 760px) {
  /* En teléfono cada prestación se lee en tres líneas, sin desplazarse hacia el lado. */
  .plan-group > table, .plan-group > table tbody { display: block; overflow: visible; }
  .plan-group > table thead { display: none; }
  .plan-group > table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .35rem .7rem; padding: .8rem .9rem; border-bottom: 1px solid #edf2f7; }
  .plan-group > table tbody tr:last-child { border-bottom: 0; }
  .plan-group > table td, .plan-group > table td:first-child, .plan-group > table td:last-child { display: block; width: auto !important; padding: 0 !important; border: 0; background: none !important; }
  .plan-group > table td.tick { grid-column: 1; grid-row: 1; align-self: start; }
  .plan-group > table td.item-what { grid-column: 2; grid-row: 1; }
  .plan-group > table td.row-actions { grid-column: 3; grid-row: 1; align-self: start; }
  .plan-group > table td.item-place { grid-column: 2; grid-row: 2; white-space: normal; font-size: .82rem; }
  .plan-group > table td.num { grid-column: 3; grid-row: 2; }
  .plan-group > table td.item-status { grid-column: 2 / -1; grid-row: 3; }
  .plan-group > table td.hint { grid-column: 1 / -1; padding: .3rem 0 !important; }
  .item-states { display: flex; flex-wrap: wrap; gap: .35rem; }
  main table.pay-table { font-size: .82rem; }
}
@media (max-width: 760px) {
  /* Los menús de una fila se abren como hoja inferior: no ensanchan la página ni quedan cortados. */
  .plan-group td .menu-pop, .plan-group td form.menu-pop { position: fixed; left: .75rem; right: .75rem; top: auto; bottom: .75rem; z-index: 70; width: auto; min-width: 0; max-width: none; max-height: 75vh; overflow-y: auto; box-shadow: 0 -8px 40px rgba(16, 24, 40, .28); }
  .plan-group .rename-pop { position: fixed; left: .75rem; right: .75rem; top: auto; bottom: .75rem; z-index: 70; width: auto; min-width: 0; }
}
table.pay-table, .plan-group > table, .bud-table { position: relative; }

/* 29. Plan: historial de una prestación (se abre desde su estado; solo lectura) --- */
.plan-group .history-pop { left: auto; right: 0; display: block; width: 22rem; max-width: calc(100vw - 2rem); max-height: min(28rem, 70vh); overflow-y: auto; padding: 1rem 1.1rem 1.1rem; text-align: left; white-space: normal; }
.history-pop .evolve-title { display: block; color: #1b2430; font-size: .92rem; font-weight: 620; line-height: 1.3; }
.history-pop .history-now { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; }
.history-pop h4 { margin: 1rem 0 .5rem; color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.history-list { margin: 0; padding: 0 0 0 1.05rem; list-style: none; border-left: 1.5px solid #e4eaf1; }
.history-list li { position: relative; padding: 0 0 .85rem; }
.history-list li:last-child { padding-bottom: 0; }
.history-list li::before { content: ''; position: absolute; left: calc(-1.05rem - 4.75px); top: .32rem; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #94a3b8; }
.history-list li.perform::before { background: var(--brand); box-shadow: 0 0 0 1.5px var(--brand); }
.history-list li.progress::before, .history-list li.note::before { box-shadow: 0 0 0 1.5px var(--brand); }
.history-list li.allocate::before { background: #0f766e; box-shadow: 0 0 0 1.5px #0f766e; }
.history-list li.unperform::before, .history-list li.deallocate::before { box-shadow: 0 0 0 1.5px #c28a2e; }
.history-list strong { display: block; color: #1b2430; font-size: .84rem; font-weight: 580; line-height: 1.35; }
.plan table td .history-list small { display: block; margin-top: .1rem; color: #667085; font-size: .74rem; font-weight: 400; }
.history-list blockquote { margin: .3rem 0 .2rem; padding: .4rem .6rem; border-left: 2px solid var(--brand-line); border-radius: 0 6px 6px 0; background: #f8fafc; color: #344054; font-size: .82rem; white-space: pre-wrap; }
.history-none { margin: 0; color: #98a2b3; font-size: .82rem; }
.history-money { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 .6rem; }
.history-money div { padding: .45rem .6rem; border: 1px solid #e4eaf1; border-radius: 8px; background: #fbfcfd; }
.history-money dt { color: #667085; font-size: .68rem; font-weight: 520; }
.history-money dd { margin: .05rem 0 0; color: #1b2430; font-size: .88rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.history-pays { margin: 0; padding: 0; list-style: none; }
.history-pays li { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-top: 1px solid #edf2f7; color: #475569; font-size: .8rem; }
.history-pays b { color: #1b2430; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-group > table tbody tr:nth-last-child(-n+2):not(:nth-child(-n+2)) .history-pop { top: auto; bottom: calc(100% + 4px); }
.plan-group details.menu.history[open] { z-index: 45; }

/* 30. Odontograma clínico: el estado de la boca -----------------------------------
   Colores propios, distintos de los del plan (rojo pendiente, azul realizado), para
   que no se confundan: aquí el color dice qué hay en la pieza, no qué falta hacer. */
:root { --c-caries: #d14343; --c-fracture: #b45309; --c-resin: #2563eb; --c-amalgam: #475569; --c-sealant: #0f766e; --c-crown: #c28a2e; --c-implant: #64748b; --c-endo: #7c3aed; --c-out: #94a3b8; --c-ext: #d14343; --c-prost: #0e7490; }
.odonto.clinical .od-set { max-width: 52rem; }
.odonto.editable .od-shape, .odonto.editable .od-face { cursor: pointer; }
.odonto.editable .od-shape:hover, .odonto.editable .od-face:hover { stroke: var(--brand); fill: var(--brand-soft); }
.od-face.f-sealant { fill: color-mix(in srgb, var(--c-sealant) 30%, #fff); stroke: var(--c-sealant); }
.od-face.f-restoration_resin { fill: color-mix(in srgb, var(--c-resin) 45%, #fff); stroke: var(--c-resin); }
.od-face.f-restoration_amalgam { fill: color-mix(in srgb, var(--c-amalgam) 62%, #fff); stroke: var(--c-amalgam); }
.od-face.f-fracture { fill: color-mix(in srgb, var(--c-fracture) 34%, #fff); stroke: var(--c-fracture); stroke-dasharray: 2.5 2; }
.od-face.f-caries { fill: color-mix(in srgb, var(--c-caries) 55%, #fff); stroke: var(--c-caries); }
.od-cross { fill: none; stroke: var(--c-out); stroke-width: 1.8; stroke-linecap: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.t-extraction .od-cross { stroke: var(--c-ext); }
.od-canal { fill: none; stroke: var(--c-endo); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; vector-effect: non-scaling-stroke; }
.od-code { font-size: 7px; font-weight: 700; letter-spacing: .04em; fill: #475569; text-anchor: middle; pointer-events: none; }
.od-tooth.t-absent .od-shape, .od-tooth.t-absent .od-frame, .od-tooth.t-absent .od-face, .od-tooth.t-absent .od-neck, .od-tooth.t-absent .od-groove, .od-tooth.t-absent .od-vol,
.od-tooth.t-unerupted .od-vol { opacity: .28; }
.od-tooth.t-absent .od-code { fill: var(--c-out); }
.od-tooth.t-unerupted .od-shape, .od-tooth.t-unerupted .od-frame { stroke-dasharray: 3 2.5; stroke: var(--c-out); fill: #f8fafc; }
.od-tooth.t-extraction .od-code { fill: var(--c-ext); }
.od-tooth.t-crown .od-frame { stroke: var(--c-crown); stroke-width: 2.6; }
.od-tooth.t-crown .od-shape { stroke: var(--c-crown); }
.od-tooth.t-implant .od-shape { fill: #e2e8f0; stroke: var(--c-implant); stroke-width: 1.8; }
.od-tooth.t-endo .od-code { fill: var(--c-endo); }
.od-tooth.t-root_remnant .od-frame, .od-tooth.t-root_remnant .od-face { opacity: .3; }
.od-tooth.t-root_remnant .od-shape { stroke: var(--c-fracture); stroke-dasharray: 1.5 2.5; }
.od-tooth.t-fixed_prosthesis .od-frame { stroke: var(--c-prost); stroke-width: 2.6; }
.od-tooth.t-removable_prosthesis .od-frame { stroke: var(--c-prost); stroke-width: 2.2; stroke-dasharray: 4 2.5; }
.od-tooth.t-fixed_prosthesis .od-code, .od-tooth.t-removable_prosthesis .od-code { fill: var(--c-prost); }
.od-tooth.t-crown .od-code { fill: #8a5a12; }

.clin.saving [data-clin-drawing] { opacity: .6; transition: opacity .1s; pointer-events: none; }
.clin-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1.2rem; margin-bottom: .9rem; }
.clin-when { margin: 0; }
.clin-when label { display: grid; gap: .25rem; color: #667085; font-size: .74rem; font-weight: 520; }
.clin-when select { height: 2.25rem; min-width: 13rem; font-size: .86rem; }
.clin-past { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .45rem .75rem; border: 1px solid #f3e2bd; border-radius: 10px; background: #fff7e8; color: #7c5a10; font-size: .84rem; }
.clin-past svg { width: 1rem; height: 1rem; flex: none; }
.clin-tools { display: grid; gap: .6rem; margin: 0 0 .5rem; padding: .8rem .9rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fbfcfd; }
.clin-tools > div { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.clin-label { width: 9.5rem; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.clin-tool { position: relative; margin: 0; cursor: pointer; }
.clin-tool input { position: absolute; opacity: 0; pointer-events: none; }
.clin-tool span { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem; border: 1px solid #dce4ee; border-radius: 999px; background: #fff; color: #475569; font-size: .8rem; font-weight: 500; white-space: nowrap; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.clin-tool span:hover { border-color: #c5d0de; color: #1b2430; }
.clin-tool b { color: #98a2b3; font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.clin-tool i, .clin-chip i { flex: none; width: .6rem; height: .6rem; border-radius: 3px; background: var(--k, #94a3b8); }
.clin-tool input:checked + span { border-color: var(--brand-deep); background: var(--brand-soft); color: var(--brand-deep); font-weight: 580; box-shadow: 0 0 0 1px var(--brand-deep); }
.clin-tool input:focus-visible + span { box-shadow: 0 0 0 3px rgba(79, 70, 229, .35); }
.t-absent, .t-unerupted { --k: var(--c-out); } .t-extraction { --k: var(--c-ext); } .t-crown { --k: var(--c-crown); } .t-implant { --k: var(--c-implant); }
.t-endo { --k: var(--c-endo); } .t-root_remnant { --k: var(--c-fracture); } .t-fixed_prosthesis, .t-removable_prosthesis { --k: var(--c-prost); }
.f-caries { --k: var(--c-caries); } .f-restoration_resin { --k: var(--c-resin); } .f-restoration_amalgam { --k: var(--c-amalgam); } .f-sealant { --k: var(--c-sealant); } .f-fracture { --k: var(--c-fracture); }
.clin-hint { margin: 0 0 .8rem; color: #667085; font-size: .82rem; }
.clin-hint.bad { color: #c53a3a; font-weight: 520; }
.clin-chip { display: inline-flex; align-items: center; gap: .45rem; color: #1b2430; font-weight: 520; }
.clin-table { margin-top: .4rem; }
.odonto-panel .panel-head > a:not(.button) { margin-left: auto; margin-right: .5rem; }
@media (max-width: 760px) { .clin-label { width: 100%; } }
@media print { .clin-tools, .clin-hint, .clin-when { display: none !important; } }

/* 31. Odontograma clínico: figuras de corona, implante y resto radicular -------- */
.od-cap, .od-capline, .od-abutment, .od-screw, .od-thread, .od-remnant, .od-remnant-edge { pointer-events: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.od-cap.crown { fill: #f3dfae; stroke: #b7862c; stroke-width: 1.7; }
.od-cap.bridge { fill: #c9e6ea; stroke: var(--c-prost); stroke-width: 1.7; }
.od-cap.implant { fill: #fdfdfb; stroke: #64748b; stroke-width: 1.35; }
.od-capline { fill: none; stroke: #b7862c; stroke-width: 1.3; }
.t-fixed_prosthesis .od-capline { stroke: var(--c-prost); }
.t-implant .od-capline { stroke: #64748b; }
.od-abutment { fill: #cbd5e1; stroke: #475569; stroke-width: 1.1; }
.od-screw { fill: #dbe2ea; stroke: #475569; stroke-width: 1.3; }
.od-thread { fill: none; stroke: #475569; stroke-width: 1.05; }
/* Con implante o resto radicular, el diente natural deja de dibujarse: queda solo su zona para hacer clic. */
.od-tooth.t-implant .od-shape, .od-tooth.t-root_remnant .od-shape { fill: transparent; stroke: transparent; stroke-dasharray: none; }
.od-tooth.t-implant .od-neck, .od-tooth.t-root_remnant .od-neck, .od-tooth.t-implant .od-vol, .od-tooth.t-root_remnant .od-vol { display: none; }
.odonto.editable .od-tooth.t-implant .od-shape:hover, .odonto.editable .od-tooth.t-root_remnant .od-shape:hover { fill: rgba(79, 70, 229, .1); stroke: var(--brand); }
.od-remnant { fill: #efe6d2; stroke: #8a6a3a; stroke-width: 1.35; }
.od-remnant-edge { fill: none; stroke: #8a6a3a; stroke-width: 1.35; }
.od-canal { stroke: #c2410c; stroke-width: 2; }
.od-tooth.t-endo .od-code { fill: #c2410c; }
:root { --c-endo: #c2410c; }
.od-tooth.t-crown .od-shape { stroke: var(--od-line); }

/* 32. Liquidaciones: pantalla general -------------------------------------------- */
.set-kpis { margin-bottom: 1.1rem; }
.set-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem 1.15rem; border-bottom: 1px solid #e4eaf1; }
.set-bar h2 { margin: 0; color: #1b2430; font-size: 1rem; font-weight: 620; letter-spacing: -.012em; }
.set-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; }
.set-tabs button, .set-tabs button:hover { display: inline-flex; align-items: center; gap: .4rem; height: 1.9rem; padding: 0 .7rem; border: 1px solid transparent; border-radius: 8px; background: none; box-shadow: none; color: #475569; font-size: .82rem; font-weight: 520; }
.set-tabs button:hover { color: #1b2430; }
.set-tabs button.current, .set-tabs button.current:hover { background: #fff; border-color: #d8e2ee; color: var(--brand-deep); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.set-tabs b { color: #667085; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.set-tabs button.current b { color: var(--brand); }
table.set-table { width: 100%; min-width: 42rem; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; position: relative; }
.set-table th, .set-table td { padding: .6rem .8rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; }
.set-table th:first-child, .set-table td:first-child { padding-left: 1.15rem; }
.set-table thead th { background: #f8fafc; white-space: nowrap; }
.set-table tbody tr:last-child td, .set-table tbody tr:has(+ .set-empty[hidden]) td { border-bottom: 0; }
.set-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.set-table td.set-who strong { color: #1b2430; font-size: .9rem; font-weight: 600; }
.set-table td.ready { width: 9.5rem; color: #1b2430; font-weight: 540; }
.set-table td.pay { width: 9rem; color: #1b2430; font-size: .92rem; font-weight: 640; }
.set-table tr.no-balance td.set-who strong { color: #475569; font-weight: 540; }
.set-table tr.no-balance td.ready, .set-table tr.no-balance td.pay { color: #98a2b3; font-weight: 450; }
.set-table td.issues { width: 13rem; }
.set-table .none { color: #98a2b3; font-size: .82rem; }
.set-issue { display: inline-flex; align-items: center; gap: .4rem; padding: .12rem .6rem .12rem .5rem; border: 1px solid #f3e2bd; border-radius: 999px; background: #fff7e8; color: #9a6700; font-size: .76rem; font-weight: 560; white-space: nowrap; cursor: help; }
.set-issue i { width: .42rem; height: .42rem; border-radius: 50%; background: #c28a2e; }
.set-table td.act { width: 1%; padding-right: 1rem; text-align: right; white-space: nowrap; }
.set-go, td.act > a.set-go { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .7rem; border: 1px solid #dce4ee; border-radius: 9px; background: #fff; color: #475569; font-size: .8rem; font-weight: 540; box-shadow: none; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.set-go svg { width: .95rem; height: .95rem; color: #94a3b8; }
.set-go:hover, td.act > a.set-go:hover { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); text-decoration: none; }
.set-go.primary, td.act > a.set-go.primary { border-color: #0f766e; background: #0f766e; color: #fff; }
.set-go.primary svg { color: #fff; opacity: .9; }
.set-go.primary:hover, td.act > a.set-go.primary:hover { background: #0d665f; border-color: #0d665f; color: #fff; }
.set-empty td { padding: 1.2rem 1.15rem; color: #667085; text-align: center; }
.set-card .bud-foot span { line-height: 1.45; }
.set-title { margin: 1.6rem 0 .7rem; font-size: 1.05rem; }
.set-issued tr.status-cancelled td { color: #98a2b3; }
@media (max-width: 760px) {
  .set-tabs { width: 100%; }
  .set-tabs button { flex: 1 1 auto; justify-content: center; }
  table.set-table { min-width: 0; }
  .set-table thead { display: none; }
  .set-table, .set-table tbody { display: block; }
  .set-table tbody tr:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; padding: .8rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .set-table td, .set-table td:first-child { display: block; width: auto !important; padding: 0; border: 0; text-align: left; }
  .set-table td.set-who { grid-column: 1; grid-row: 1; }
  .set-table td.pay { grid-column: 2; grid-row: 1; text-align: right; }
  .set-table td.ready { grid-column: 1; grid-row: 2; font-size: .8rem; }
  .set-table td.ready::after { content: ' prestaciones listas'; color: #667085; font-weight: 450; }
  .set-table td.issues { grid-column: 1 / -1; grid-row: 3; }
  .set-table td.act { grid-column: 1 / -1; grid-row: 4; padding: .3rem 0 0; }
  .set-table td.act .set-go { width: 100%; justify-content: center; }
}

/* Liquidaciones, ajustes finales: nombres en una línea, dos jerarquías de botón y filtros más cuidados */
table.set-table { table-layout: fixed; min-width: 46rem; }
.set-table th:nth-child(1) { width: auto; }
.set-table th:nth-child(2), .set-table td.ready { width: 8.5rem; }
.set-table th:nth-child(3), .set-table td.pay { width: 7.5rem; }
.set-table th:nth-child(4), .set-table td.issues { width: 11.5rem; }
.set-table th:nth-child(5), .set-table td.act { width: 12.2rem; }
.set-table thead th { white-space: normal; line-height: 1.25; }
.set-table td { height: 3.25rem; }
.set-table td.set-who strong, .set-table tr.no-balance td.set-who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1b2430; font-size: .875rem; font-weight: 600; border-radius: 4px; outline: none; }
.set-table td.set-who strong:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, .4); }
.set-table td.issues { white-space: nowrap; }
.set-go, td.act > a.set-go { height: 2.1rem; padding: 0 .75rem; border-color: #e4eaf1; border-radius: 9px; color: #667085; }
.set-go svg { color: #94a3b8; }
.set-go:hover, td.act > a.set-go:hover { background: #f8fafc; border-color: #d5deea; color: #475569; }
.set-go.primary, td.act > a.set-go.primary { border-color: #0f766e; background: #0f766e; color: #fff; font-weight: 580; }
.set-go.primary:hover, td.act > a.set-go.primary:hover { background: #0d665f; border-color: #0d665f; color: #fff; }
.set-go:focus-visible { outline: 2px solid rgba(79, 70, 229, .5); outline-offset: 2px; }
.set-tabs { gap: 3px; padding: 4px; border-color: #e4eaf1; border-radius: 12px; background: #f8fafc; }
.set-tabs button, .set-tabs button:hover { gap: .5rem; height: 2.05rem; padding: 0 .55rem 0 .8rem; border-radius: 8px; color: #667085; font-size: .82rem; font-weight: 500; transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.set-tabs button:hover { background: rgba(255, 255, 255, .7); color: #1b2430; }
.set-tabs button.current, .set-tabs button.current:hover { background: #fff; border-color: var(--brand-line); color: var(--brand-deep); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
.set-tabs b, .set-tabs button.current b { min-width: 1.5rem; padding: .08rem .38rem; border-radius: 6px; background: #eef2f7; color: #475569; font-size: .72rem; font-weight: 600; text-align: center; }
.set-tabs button.current b { background: var(--brand-soft); color: var(--brand-deep); }
.set-tabs button:focus-visible { outline: 2px solid rgba(79, 70, 229, .5); outline-offset: 1px; box-shadow: none; }
@media (max-width: 760px) {
  table.set-table { table-layout: auto; min-width: 0; }
  .set-table td { height: auto; }
  .set-table td.set-who strong { white-space: normal; }
}
table.set-table { min-width: 57rem; }
@media (max-width: 760px) { table.set-table { min-width: 0; } }

/* 33. Liquidaciones: prestaciones que entran (preparación de una liquidación) ----- */
.stl-card { margin-top: 1.1rem; }
.stl-head { padding: .95rem 1.15rem .85rem; border-bottom: 1px solid #e4eaf1; }
.stl-head h2 { margin: 0; color: #1b2430; font-size: 1.05rem; font-weight: 600; letter-spacing: -.012em; }
.stl-head h2 span { color: #667085; font-size: .86rem; font-weight: 450; letter-spacing: 0; }
.stl-head p { margin: .2rem 0 0; color: #667085; font-size: .82rem; }
.stl-none { margin: 0; padding: 1.4rem 1.15rem; color: #667085; font-size: .88rem; }
table.stl-table { position: relative; width: 100%; min-width: 60rem; table-layout: fixed; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; }
.stl-table th:nth-child(1) { width: 7rem; } .stl-table th:nth-child(2) { width: 22%; } .stl-table th:nth-child(3) { width: 6.2rem; } .stl-table th:nth-child(4) { width: auto; }
.stl-table th:nth-child(5) { width: 7.6rem; } .stl-table th:nth-child(6) { width: 6.8rem; } .stl-table th:nth-child(7) { width: 9.5rem; } .stl-table th:nth-child(8) { width: 7.6rem; }
.stl-table th, .stl-table td { padding: .6rem .8rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; }
.stl-table th:first-child, .stl-table td:first-child { padding-left: 1.15rem; }
.stl-table th:last-child, .stl-table td:last-child { padding-right: 1.15rem; }
.stl-table thead th { background: #f8fafc; white-space: normal; line-height: 1.25; }
.stl-table tbody tr:last-child td { border-bottom: 0; }
.stl-table tbody tr:hover > td { background: #f8fafc; }
.stl-table td { height: 3.9rem; }
.stl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stl-date { color: #475569; font-size: .8rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stl-patient span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1b2430; font-size: .875rem; font-weight: 600; border-radius: 4px; outline: none; }
.stl-patient span:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, .4); }
.stl-budget a { display: inline-block; padding: .2rem .1rem; color: var(--brand); font-size: .82rem; font-weight: 560; font-variant-numeric: tabular-nums; }
.stl-budget a:hover { text-decoration: underline; text-underline-offset: 3px; }
.stl-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1b2430; font-size: .875rem; font-weight: 600; }
.stl-table td.stl-item small, .stl-table td.stl-rule small { display: block; margin-top: .1rem; color: #667085; font-size: .74rem; font-weight: 450; line-height: 1.3; }
.stl-paid { color: #1b2430; font-weight: 560; }
.stl-fee { color: #667085; font-size: .8rem; }
.stl-rule strong { display: block; color: var(--brand-deep); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stl-pay { color: var(--brand-deep); font-size: .98rem; font-weight: 700; letter-spacing: -.01em; }
.stl-note { display: flex; align-items: flex-start; gap: .55rem; margin: .9rem 0 0; padding: .6rem .85rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; color: #667085; font-size: .82rem; line-height: 1.45; }
.stl-note svg { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; color: #94a3b8; }
@media (max-width: 760px) {
  /* En teléfono cada prestación es un bloque con todos sus datos, sin desplazarse hacia el lado. */
  table.stl-table { min-width: 0; table-layout: auto; }
  .stl-table thead { display: none; }
  .stl-table, .stl-table tbody { display: block; }
  .stl-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; padding: .85rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .stl-table tbody tr:last-child { border-bottom: 0; }
  .stl-table td, .stl-table td:first-child, .stl-table td:last-child { display: block; height: auto; width: auto; padding: 0; border: 0; background: none !important; }
  .stl-item { grid-column: 1; grid-row: 1; } .stl-item strong { white-space: normal; }
  .stl-pay { grid-column: 2; grid-row: 1; }
  .stl-patient { grid-column: 1; grid-row: 2; } .stl-patient span { font-weight: 500; color: #475569; white-space: normal; }
  .stl-budget { grid-column: 2; grid-row: 2; text-align: right; }
  .stl-date { grid-column: 1 / -1; grid-row: 3; }
  .stl-paid, .stl-fee, .stl-rule { grid-column: 1 / -1; display: flex !important; justify-content: space-between; gap: 1rem; text-align: left; font-size: .82rem; }
  .stl-paid::before, .stl-fee::before, .stl-rule::before { content: attr(data-label); color: #667085; font-weight: 450; }
  .stl-rule strong, .stl-table td.stl-rule small { display: inline; margin: 0; }
  .stl-rule { align-items: baseline; }
}
/* Anchos que caben en un notebook con el menú abierto; paciente y prestación pueden usar dos líneas, cortando entre palabras. */
table.stl-table { min-width: 56rem; }
.stl-table th, .stl-table td { padding-left: .6rem; padding-right: .6rem; }
.stl-table th:nth-child(1) { width: 6.6rem; } .stl-table th:nth-child(2) { width: 21%; } .stl-table th:nth-child(3) { width: 6.3rem; } .stl-table th:nth-child(4) { width: auto; }
.stl-table th:nth-child(5) { width: 6.3rem; } .stl-table th:nth-child(6) { width: 5.9rem; } .stl-table th:nth-child(7) { width: 7.4rem; } .stl-table th:nth-child(8) { width: 6.9rem; }
.stl-table td { height: 3.7rem; }
.stl-patient span, .stl-item strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; line-height: 1.3; }
@media (max-width: 760px) { table.stl-table { min-width: 0; } .stl-table td { height: auto; } .stl-table th, .stl-table td { padding: 0; } }
.stl-table thead th.num { white-space: normal; }
.stl-table th:nth-child(2) { width: 18.5%; }
.stl-table th:nth-child(1) { width: 6.3rem; } .stl-table th:nth-child(2) { width: 17%; } .stl-table th:nth-child(3) { width: 6.1rem; }
.stl-table th:nth-child(5) { width: 5.8rem; } .stl-table th:nth-child(6) { width: 5.6rem; } .stl-table th:nth-child(7) { width: 6.6rem; } .stl-table th:nth-child(8) { width: 6.3rem; }
.stl-table th:nth-child(2) { width: 19.5%; }

/* Liquidaciones, etapa 2.1: importes alineados como en una tabla financiera y nombres largos bajo control */
.stl-table th.num, .stl-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'cv11', 'ss03'; }
.stl-table td.num { vertical-align: middle; white-space: nowrap; letter-spacing: 0; }
.stl-table th.num { padding-right: .6rem; }
.stl-table th:last-child, .stl-table td:last-child { padding-right: 1.15rem; }
.stl-table td.stl-paid { color: #1b2430; font-size: .875rem; font-weight: 560; }
.stl-table td.stl-fee { color: #667085; font-size: .8125rem; font-weight: 500; }
.stl-table td.stl-pay { color: var(--brand-deep); font-size: .97rem; font-weight: 700; letter-spacing: -.005em; }
/* Sin alto rígido: la fila crece solo lo que pide su contenido, y solo esa fila. */
.stl-table td { height: auto; padding-top: .62rem; padding-bottom: .62rem; }
.stl-table tbody tr { height: 3.6rem; }
.stl-table td.stl-item { overflow: hidden; }
.stl-item strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: none; color: #1b2430; font-size: .875rem; font-weight: 600; line-height: 1.36; border-radius: 4px; outline: none; }
.stl-item strong:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, .4); }
.stl-table td.stl-item small { margin-top: .12rem; color: #667085; font-size: .72rem; font-weight: 450; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stl-patient span { line-height: 1.36; overflow-wrap: break-word; }
/* En pantallas anchas la prestación se queda con el espacio que sobra; los importes no se achican en ningún tamaño. */
@media (min-width: 1500px) { .stl-table th:nth-child(2) { width: 16%; } }
@media (max-width: 760px) { .stl-table tbody tr { height: auto; } .stl-table td { padding: 0; } .stl-item strong { -webkit-line-clamp: 3; line-clamp: 3; } }
/* Las columnas de dinero dan cabida a montos de siete cifras sin moverse. */
.stl-table th:nth-child(5) { width: 6.9rem; } .stl-table th:nth-child(6) { width: 5.9rem; } .stl-table th:nth-child(8) { width: 7.2rem; }
.stl-table th:nth-child(2) { width: 18%; } .stl-table th:nth-child(7) { width: 6.3rem; }
table.stl-table { min-width: 58rem; }
@media (max-width: 760px) { table.stl-table { min-width: 0; } }

/* 34. Liquidaciones: panel de cierre "Emitir liquidación" ------------------------- */
.emit { margin-top: 1.6rem; }
.emit-head { margin-bottom: .9rem; }
.emit-head h2 { margin: 0; color: #1b2430; font-size: 1.2rem; font-weight: 640; letter-spacing: -.016em; }
.emit-head p { margin: .2rem 0 0; color: #667085; font-size: .86rem; }
.emit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 24rem); gap: 1rem; align-items: start; margin: 0; max-width: none; }
.emit-fields { display: grid; gap: .9rem; padding: 1.25rem 1.35rem 1.4rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.emit-fields label { display: grid; gap: .4rem; margin: 0; color: #1b2430; font-size: .84rem; font-weight: 560; }
.emit-fields input { width: 100%; max-width: none; height: 2.75rem !important; padding: 0 .85rem; border: 1px solid #d9e2ec; border-radius: 11px; background: #fff; box-shadow: none; color: #1b2430; font-size: .95rem; font-weight: 450; }
.emit-fields input[name="base_amount"] { max-width: 16rem; font-variant-numeric: tabular-nums; font-weight: 560; }
.emit-fields input:hover { border-color: #c5d0de; }
.emit-fields input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); outline: none; }
.emit-fields input::placeholder { color: #98a2b3; font-weight: 400; }
.emit-help { display: flex; align-items: flex-start; gap: .5rem; margin: -.35rem 0 .2rem; max-width: 36rem; color: #667085; font-size: .8rem; line-height: 1.5; }
.emit-help svg { flex: none; width: .95rem; height: .95rem; margin-top: .14rem; color: #94a3b8; }
.emit-summary { display: grid; gap: 0; padding: 1.35rem 1.45rem 1.25rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -16px rgba(16, 24, 40, .18); }
.emit-summary dl { display: grid; gap: .85rem; margin: 0; padding-bottom: 1rem; border-bottom: 1px solid #e4eaf1; }
.emit-summary dl > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.emit-summary dt { padding-top: .15rem; color: #667085; font-size: .8rem; font-weight: 500; }
.emit-summary dd { display: grid; justify-items: end; margin: 0; text-align: right; }
.emit-summary dd strong { color: #1b2430; font-size: 1.06rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.emit-summary dd small { color: #667085; font-size: .76rem; }
.emit-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 0 1.15rem; }
.emit-total span { color: #1b2430; font-size: .88rem; font-weight: 600; }
.emit-total output { color: var(--brand-deep); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.emit-go, .emit-go:hover { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; height: 2.9rem; padding: 0 1.25rem; border: 0; border-radius: 11px; background: #0f766e; color: #fff; font-size: .95rem; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.emit-go:hover { background: #0d665f; }
.emit-go:focus-visible { outline: 2px solid rgba(15, 118, 110, .5); outline-offset: 2px; box-shadow: none; }
.emit-go svg { width: 1.05rem; height: 1.05rem; }
.emit-back { justify-self: center; margin-top: .85rem; color: var(--brand); font-size: .84rem; font-weight: 500; }
.emit-back:hover { text-decoration: underline; text-underline-offset: 3px; }
form.bad-base .emit-fields input[name="base_amount"] { border-color: #d14343; }
@media (max-width: 900px) {
  /* Apilado: primero el resumen con el total, después lo que se completa. El botón queda al final. */
  .emit-grid { grid-template-columns: minmax(0, 1fr); }
  .emit-summary { display: contents; }
  .emit-summary dl, .emit-total { grid-row: auto; }
  .emit-summary dl { order: 1; padding: 1.2rem 1.25rem 1rem; border: 1px solid #e4eaf1; border-bottom: 1px solid #e4eaf1; border-radius: 14px 14px 0 0; background: #fff; margin-bottom: -1rem; }
  .emit-total { order: 2; padding: 1rem 1.25rem 1.1rem; border: 1px solid #e4eaf1; border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
  .emit-fields { order: 3; }
  .emit-go { order: 4; }
  .emit-back { order: 5; margin-top: 0; }
  .emit-fields input[name="base_amount"] { max-width: none; }
}

/* Emitir liquidación, etapa 3.1: base fija contractual (informativa, no se escribe) */
.emit-base { display: grid; gap: .6rem; padding: .95rem 1.05rem 1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #f8fafc; }
.emit-base-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.emit-base-top span { display: grid; gap: .1rem; }
.emit-base-top strong { color: #1b2430; font-size: .9rem; font-weight: 600; }
.emit-base-top small { color: #667085; font-size: .78rem; }
.emit-base-top small::first-letter { text-transform: uppercase; }
.emit-base-top b { color: #1b2430; font-size: 1.1rem; font-weight: 640; font-variant-numeric: tabular-nums; letter-spacing: -.012em; white-space: nowrap; }
.emit-base.included .emit-base-top b { color: #98a2b3; text-decoration: line-through; text-decoration-thickness: 1px; }
.emit-base-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: #667085; font-size: .8rem; line-height: 1.5; }
.emit-base-note svg { flex: none; width: .95rem; height: .95rem; margin-top: .14rem; color: #94a3b8; }
.emit-base.included .emit-base-note { color: #475569; }
.emit-base.included .emit-base-note svg { color: #0f766e; }
.emit-base-note a { color: var(--brand); font-weight: 540; }
.emit-fields label.emit-skip { display: flex; align-items: center; gap: .5rem; padding-top: .55rem; border-top: 1px solid #e4eaf1; color: #475569; font-size: .82rem; font-weight: 500; cursor: pointer; }
.emit-fields label.emit-skip input { width: 1rem; height: 1rem !important; padding: 0; flex: none; accent-color: var(--brand-deep); }
.emit-summary dd small::first-letter { text-transform: none; }

/* Emitir liquidación, etapa 3.2: columnas equilibradas, observaciones de varias líneas y casilla "incluir" */
.emit-grid { align-items: stretch; }
.emit-fields, .emit-summary { border-radius: 14px; border: 1px solid #e4eaf1; padding: 1.35rem 1.45rem 1.4rem; }
.emit-fields { display: flex; flex-direction: column; gap: 1rem; align-content: start; }
.emit-fields label.emit-notes { display: flex; flex-direction: column; gap: .45rem; }
/* Sin base fija, las observaciones ocupan el alto que deja el resumen de al lado. */
.emit-fields.plain label.emit-notes { flex: 1; }
.emit-fields.plain label.emit-notes textarea { flex: 1; min-height: 6.4rem; }
.emit-fields textarea { width: 100%; max-width: none; min-height: 5rem; padding: .8rem .85rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #fff; box-shadow: none; color: #1b2430; font: 400 .875rem/1.5 'Inter', sans-serif; resize: vertical; field-sizing: content; }
.emit-fields textarea:hover { border-color: #cfd9e6; }
.emit-fields textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); outline: none; }
.emit-fields textarea::placeholder { color: #98a2b3; }
.emit-fields label.emit-skip { align-items: flex-start; gap: .65rem; padding-top: .7rem; cursor: pointer; }
.emit-fields label.emit-skip input { width: 1.1rem; height: 1.1rem !important; margin-top: .12rem; accent-color: #0f766e; cursor: pointer; }
.emit-fields label.emit-skip span { display: grid; gap: .1rem; }
.emit-fields label.emit-skip strong { color: #1b2430; font-size: .86rem; font-weight: 580; }
.emit-fields label.emit-skip small { color: #667085; font-size: .78rem; font-weight: 400; }
.emit-base.left-out .emit-base-top b { color: #98a2b3; }
.emit-summary { display: flex; flex-direction: column; }
.emit-summary dl > div { align-items: baseline; }
.emit-summary dt { padding-top: 0; }
.emit-total { flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-top: auto; }
.emit-total output { margin-left: auto; max-width: 100%; font-size: clamp(1.45rem, 1rem + 1.6vw, 1.9rem); overflow-wrap: anywhere; text-align: right; }
.emit-go { flex: none; }
.emit-back { align-self: center; margin-top: .9rem; }
@media (max-width: 900px) {
  .emit-fields.plain label.emit-notes textarea { min-height: 5.5rem; }
  .emit-total { margin-top: 0; }
  .emit-back { margin-top: 0; }
}
@media (max-width: 900px) { .emit-summary { display: contents; } .emit-fields { order: 3; } }

/* Emitir liquidación, etapa 3.3: el espacio que sobra en el resumen ya no se acumula entre la base y el total */
.emit-summary dl { padding-bottom: .9rem; }
/* Antes el total se iba al fondo del panel y dejaba un hueco arriba; ahora lo que sobre se reparte por igual arriba y abajo del total. */
.emit-total { margin-top: auto; margin-bottom: auto; padding: .85rem 0 .95rem; }
.emit-go { margin-top: .15rem; }
@media (max-width: 900px) { .emit-total { margin-top: 0; margin-bottom: 0; padding: 1rem 1.25rem 1.1rem; } .emit-go { margin-top: 0; } }

/* 35. Liquidaciones emitidas: historial y detalle --------------------------------- */
.hist { margin-top: 1.6rem; }
.hist-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .7rem 1rem; padding: .95rem 1.15rem .85rem; border-bottom: 1px solid #e4eaf1; }
.hist-head h2 { display: flex; align-items: center; gap: .55rem; margin: 0; color: #1b2430; font-size: 1.1rem; font-weight: 600; letter-spacing: -.014em; }
.hist-count { padding: .05rem .5rem; border: 1px solid #e4eaf1; border-radius: 999px; background: #f8fafc; color: #475569; font-size: .74rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.hist-head p { margin: .2rem 0 0; color: #667085; font-size: .82rem; }
.hist-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .7rem; padding: .8rem 1.15rem; border-bottom: 1px solid #e4eaf1; }
.hist-filters label { display: grid; gap: .25rem; margin: 0; }
.hist-filters label > span:not(.sr-only) { color: #667085; font-size: .7rem; font-weight: 520; }
.hist-filters input, .hist-filters select { height: 2.25rem !important; border-color: #e4eaf1; box-shadow: none; font-size: .85rem; }
.hist-filters select { min-width: 10rem; max-width: 15rem; }
.hist-filters input[type="date"] { width: 8.6rem; }
.hist-filters .bud-search { flex: 1 1 12rem; max-width: 20rem; }
.hist-filters button.link { height: 2.25rem; }
table.hist-table { position: relative; width: 100%; min-width: 52rem; table-layout: fixed; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; }
.hist-table th:nth-child(1) { width: 5.2rem; } .hist-table th:nth-child(2) { width: auto; } .hist-table th:nth-child(3), .hist-table th:nth-child(4) { width: 7.2rem; }
.hist-table th:nth-child(5) { width: 8.4rem; } .hist-table th:nth-child(6) { width: 8rem; } .hist-table th:nth-child(7) { width: 7.4rem; } .hist-table th:nth-child(8) { width: 3.6rem; }
.hist-table th, .hist-table td { padding: .55rem .8rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; }
.hist-table th:first-child, .hist-table td:first-child { padding-left: 1.15rem; }
.hist-table thead th { background: #f8fafc; white-space: nowrap; }
.hist-table tbody tr { height: 3.6rem; }
.hist-table tbody tr:hover > td { background: #f8fafc; }
.hist-table tbody tr:last-child td { border-bottom: 0; }
.hist-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-num a { color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.hist-num a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hist-pro strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1b2430; font-size: .875rem; font-weight: 600; border-radius: 4px; outline: none; }
.hist-pro strong:focus-visible { box-shadow: 0 0 0 2px rgba(79, 70, 229, .4); }
.hist-date { color: #475569; font-size: .82rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-items { color: #1b2430; font-weight: 540; }
.hist-table td.hist-items small { display: block; color: #667085; font-size: .72rem; font-weight: 450; cursor: help; }
.hist-total { color: var(--brand-deep); font-size: .95rem; font-weight: 700; letter-spacing: -.005em; }
.hist-table td.act { padding-right: .7rem; text-align: right; }
.hist-table tr.status-cancelled td { color: #98a2b3; }
.hist-table tr.status-cancelled .hist-pro strong, .hist-table tr.status-cancelled .hist-total { color: #98a2b3; }
.hist-table tr.status-cancelled .hist-total { text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 600; }
.hist-state { display: inline-flex; align-items: center; gap: .4rem; padding: .14rem .6rem .14rem .5rem; border: 1px solid var(--brand-line); border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: .76rem; font-weight: 560; white-space: nowrap; letter-spacing: 0; vertical-align: middle; }
.hist-state i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--brand); }
.hist-state.paid { border-color: #c4e3de; background: #e6f4f0; color: #0f766e; }
.hist-state.paid i { background: #0f766e; }
.hist-state.void { border-color: #e2e8f0; background: #f1f5f9; color: #64748b; }
.hist-state.void i { background: none; box-shadow: inset 0 0 0 1.5px currentColor; }
.hist-foot nav button.link { padding: .3rem .7rem; border: 1px solid #dce4ee; border-radius: 8px; background: #fff; color: #475569; font-size: .8rem; }
.hist-foot nav button.link:disabled { opacity: .45; }
.hist .empty { border: 0; box-shadow: none; }
.hist-table tbody tr:nth-last-child(-n+3):not(:nth-child(-n+3)) .menu-pop { top: auto; bottom: calc(100% + 4px); }

/* Detalle de una liquidación emitida */
.std-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1rem; padding: 1.2rem 1.35rem 1.25rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.std-back { display: inline-block; margin-bottom: .35rem; color: var(--brand); font-size: .8rem; font-weight: 500; }
.std-head h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0; color: #1b2430; font-size: 1.35rem; font-weight: 640; letter-spacing: -.02em; }
.std-pro { margin: .2rem 0 0; color: var(--brand-deep); font-size: 1rem; font-weight: 600; }
.std-facts { display: flex; flex-wrap: wrap; gap: .5rem 1.8rem; margin: .8rem 0 0; }
.std-facts dt { color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.std-facts dd { margin: .1rem 0 0; color: #1b2430; font-size: .86rem; font-weight: 520; }
.std-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.std-actions form { margin: 0; }
.std-actions button { height: 2.35rem; font-size: .85rem; }
.std-actions button.outline { border-color: #dce4ee; color: var(--brand-deep); box-shadow: none; }
.std-actions button.outline svg { color: #94a3b8; }
.std-actions button.std-void, .std-actions button.std-void:hover { color: #c53a3a; }
.std-actions button.std-void:hover { background: #fff1f2; border-color: #f6d0d4; }
.std-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem); gap: 1rem; align-items: start; margin-top: 1rem; }
.std-grid .stl-card { margin-top: 0; }
.std-items table.stl-table { min-width: 50rem; }
.std-items .stl-table th:nth-child(2) { width: 17%; }
.stl-table td.stl-rule small.std-contract { color: #98a2b3; font-size: .7rem; }
.std-summary { position: sticky; top: 4.75rem; }
.std-summary .emit-total { margin: 0; padding: .95rem 0 .2rem; }
.std-notes { display: grid; gap: .2rem; margin: .9rem 0 0; padding-top: .85rem; border-top: 1px solid #e4eaf1; color: #475569; font-size: .84rem; line-height: 1.5; white-space: pre-line; }
.std-notes strong { color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 1100px) { .std-grid { grid-template-columns: minmax(0, 1fr); } .std-summary { position: static; order: -1; } }
@media (max-width: 760px) {
  .hist-head .set-tabs { width: 100%; }
  .hist-filters label, .hist-filters .bud-search, .hist-filters select, .hist-filters input[type="date"] { flex: 1 1 100%; max-width: none; width: 100%; }
  table.hist-table { min-width: 0; table-layout: auto; }
  .hist-table thead { display: none; }
  .hist-table, .hist-table tbody { display: block; }
  .hist-table tbody tr:not([hidden]) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; height: auto; padding: .85rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .hist-table td, .hist-table td:first-child { display: block; padding: 0; border: 0; background: none !important; text-align: left; }
  .hist-pro { grid-column: 1; grid-row: 1; } .hist-pro strong { white-space: normal; }
  .hist-total { grid-column: 2; grid-row: 1; padding-right: 2.2rem !important; }
  .hist-num { grid-column: 1; grid-row: 2; font-size: .82rem; }
  .hist-table td[data-label="Estado"] { grid-column: 2; grid-row: 2; text-align: right; }
  .hist-date, .hist-items { grid-column: 1 / -1; font-size: .8rem; }
  .hist-date::before, .hist-items::before { content: attr(data-label) ': '; color: #667085; font-weight: 450; }
  .hist-table td.hist-items small { display: inline; margin-left: .3rem; }
  .hist-table td.act { position: absolute; top: .6rem; right: .6rem; }
  .std-actions { width: 100%; justify-content: stretch; }
  .std-actions form, .std-actions > button { flex: 1 1 auto; }
  .std-actions button { width: 100%; justify-content: center; }
  .std-items table.stl-table { min-width: 0; }
}
@media print {
  .std-head, .std-summary, .std-items { box-shadow: none; }
  .std-grid { display: block; }
  .std-summary { position: static; margin-top: 1rem; break-inside: avoid; }
  .std-items table.stl-table, table.stl-table { min-width: 0; font-size: 9pt; }
  .std-items .pat-scroll { overflow: visible; }
  .stl-patient span, .stl-item strong { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
  .hist-state { border: 1px solid #999; background: none; color: #000; }
}

/* Historial: una anulada se lee apagada, sin tachar toda la fila */
.hist-table tr.status-cancelled td { text-decoration: none; border-left: 0; }
.hist-table tr.status-cancelled td:first-child { border-left: 0; padding-left: 1.15rem; }
.hist-table tr.status-cancelled .hist-num a { color: #94a3b8; text-decoration: none; }
.hist-table tr.status-cancelled .hist-total { text-decoration: line-through; }
.hist-table th:nth-child(1) { width: 4.6rem; } .hist-table th:nth-child(3), .hist-table th:nth-child(4) { width: 6.7rem; }
.hist-table th:nth-child(5) { width: 7.6rem; } .hist-table th:nth-child(6) { width: 7.4rem; } .hist-table th:nth-child(7) { width: 6.9rem; } .hist-table th:nth-child(8) { width: 3.2rem; }

/* Detalle: el resumen va en una franja sobre la tabla, que necesita todo el ancho */
.std-grid { grid-template-columns: minmax(0, 1fr); }
.std-summary, .emit-summary.std-summary { position: static; order: -1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .9rem 2.2rem; padding: 1.05rem 1.35rem; }
.std-summary dl { display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; padding: 0; border: 0; }
.std-summary dl > div { display: grid; gap: .1rem; justify-content: start; }
.std-summary dd { justify-items: start; text-align: left; }
.std-summary .emit-total { display: grid; justify-items: end; gap: .05rem; margin: 0 0 0 auto; padding: 0 0 0 2.2rem; border-left: 1px solid #e4eaf1; }
.std-summary .emit-total span { color: #667085; font-size: .8rem; font-weight: 500; }
.std-notes { flex: 1 1 100%; margin: 0; }
.std-items table.stl-table { min-width: 58rem; }
.std-items .stl-table th:nth-child(2) { width: 18%; }
@media (max-width: 760px) {
  .std-summary .emit-total { margin-left: 0; padding-left: 0; border-left: 0; justify-items: start; flex: 1 1 100%; padding-top: .8rem; border-top: 1px solid #e4eaf1; }
  .std-items table.stl-table { min-width: 0; }
}
@media print { .std-summary .emit-total { border-left: 0; } }
.stl-table td.stl-rule small.std-contract { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-date { vertical-align: middle; }
.std-actions a.button { height: 2.35rem; font-size: .85rem; }
.std-actions a.button.outline { border-color: #dce4ee; color: var(--brand-deep); box-shadow: none; }
.std-actions a.button.outline svg { color: #94a3b8; }

/* 36. Convenios: listado y datos generales ---------------------------------------- */
.agr-card { margin-bottom: .9rem; }
table.agr-table { position: relative; width: 100%; min-width: 54rem; table-layout: fixed; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; }
.agr-table th:nth-child(1) { width: 22%; } .agr-table th:nth-child(2) { width: 22%; } .agr-table th:nth-child(3) { width: auto; } .agr-table th:nth-child(4) { width: 10.5rem; }
.agr-table th:nth-child(5) { width: 5.6rem; } .agr-table th:nth-child(6) { width: 8.2rem; } .agr-table th:nth-child(7) { width: 3.4rem; }
.agr-table th, .agr-table td { padding: .6rem .8rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; }
.agr-table th:first-child, .agr-table td:first-child { padding-left: 1.15rem; }
.agr-table thead th { background: #f8fafc; white-space: nowrap; }
.agr-table tbody tr { height: 3.5rem; }
.agr-table tbody tr:hover > td { background: #f8fafc; }
.agr-table tbody tr:last-child td { border-bottom: 0; }
.agr-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #344054; }
.agr-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.agr-table td small { display: block; color: #667085; font-size: .74rem; }
.agr-table td small.warn { color: #9a6700; }
.agr-table .none { color: #98a2b3; }
.agr-name a { color: #1b2430; font-weight: 600; }
.agr-name a:hover { color: var(--brand); text-decoration: none; }
.agr-company span { display: block; overflow: hidden; text-overflow: ellipsis; }
.agr-table tr.off .agr-name a, .agr-table tr.off td { color: #98a2b3; }
.agr-table td.act { overflow: visible; padding-right: .7rem; text-align: right; }
.agr-table .bud-menu .menu-pop form { margin: 0; }
.agr-table .bud-menu .menu-pop button.link, .agr-table .bud-menu .menu-pop button.link:hover { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1b2430; font-size: .85rem; font-weight: 450; }
.agr-table .bud-menu .menu-pop button.link:hover { background: var(--blue-soft); color: var(--blue-deep); }
.agr-table tbody tr:nth-last-child(-n+2):not(:nth-child(-n+3)) .menu-pop { top: auto; bottom: calc(100% + 4px); }

.bud-head h1 .hist-state { margin-left: .4rem; vertical-align: .2rem; }
.agr-form { margin: 0; max-width: none; }
.agr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.agr-block { margin: 0; padding: 1.2rem 1.35rem 1.35rem; }
.agr-block h2 { margin: 0 0 .9rem; color: #1b2430; font-size: 1rem; font-weight: 620; letter-spacing: -.012em; }
.agr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; }
.agr-fields label { display: grid; gap: .35rem; margin: 0; align-content: start; }
.agr-fields label.wide, .agr-fields .wide { grid-column: 1 / -1; }
.agr-fields label > span { color: #475569; font-size: .8rem; font-weight: 540; }
.agr-fields .req { color: #c53a3a; font-weight: 600; }
.agr-fields input, .agr-fields select, .agr-fields textarea { width: 100%; max-width: none; border-color: #dce4ee; box-shadow: none; }
.agr-fields textarea { min-height: 4.6rem; resize: vertical; }
.agr-help { display: flex; align-items: flex-start; gap: .5rem; margin: -.25rem 0 0; color: #667085; font-size: .78rem; line-height: 1.5; }
.agr-help svg { flex: none; width: .95rem; height: .95rem; margin-top: .13rem; color: #94a3b8; }
.agr-help strong { color: #475569; font-weight: 600; }
.agr-save { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 1rem; padding: .8rem 0; background: linear-gradient(180deg, rgba(245, 247, 255, 0) 0%, var(--bg) 35%); }
.agr-save a { color: #667085; font-size: .86rem; font-weight: 500; }
.agr-save button { height: 2.6rem; padding: 0 1.2rem; }
@media (max-width: 1000px) { .agr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .brn-form .agr-fields { grid-template-columns: minmax(0, 1fr); }
  table.agr-table { min-width: 0; table-layout: auto; }
  .agr-table thead { display: none; }
  .agr-table, .agr-table tbody { display: block; }
  .agr-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; height: auto; padding: .85rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .agr-table td, .agr-table td:first-child { display: block; padding: 0; border: 0; background: none !important; white-space: normal; text-align: left; }
  .agr-name { grid-column: 1; grid-row: 1; padding-right: 2rem !important; }
  .agr-company, .agr-schedule, .agr-dates { grid-column: 1 / -1; font-size: .82rem; }
  .agr-table td.num { grid-column: 1; font-size: .8rem; }
  .agr-table td.num::after { content: ' pacientes'; color: #667085; }
  .agr-table td.act { position: absolute; top: .6rem; right: .6rem; }
}
.agr-table th:nth-child(1) { width: 22%; } .agr-table th:nth-child(2) { width: 18%; } .agr-table th:nth-child(4) { width: 8.6rem; }
.agr-table th:nth-child(5) { width: 5rem; } .agr-table th:nth-child(6) { width: 7.8rem; } .agr-table th:nth-child(7) { width: 3rem; }
.agr-table td.agr-dates { white-space: normal; font-size: .8rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.agr-table td.agr-schedule { white-space: normal; line-height: 1.3; }

/* Convenios, etapa A.1: pestañas de la ficha, vigencia y tarjeta de arancel más compacta */
.agr-tabs { display: flex; gap: .2rem 1.5rem; margin: 0 0 1rem; padding: 0 .2rem; border-bottom: 1px solid #e4eaf1; overflow-x: auto; scrollbar-width: none; }
.agr-tabs a { flex: none; padding: .7rem .1rem .65rem; margin-bottom: -1px; border-bottom: 2px solid transparent; color: #667085; font-size: .875rem; font-weight: 520; white-space: nowrap; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.agr-tabs a:hover { color: #1b2430; text-decoration: none; }
.agr-tabs a.current { color: var(--brand-deep); border-bottom-color: var(--brand-deep); font-weight: 600; }
.agr-tabs a:focus-visible { outline: 2px solid rgba(79, 70, 229, .45); outline-offset: 2px; border-radius: 4px; box-shadow: none; }
.agr-block { padding: 1.25rem 1.4rem 1.35rem; }
/* La tarjeta de arancel mide lo que pide su contenido: no se estira para igualar a la de al lado. */
.agr-grid { align-items: start; }
.agr-block:has(select[name="fee_schedule_id"]) { padding-bottom: 1.15rem; }
.agr-block:has(select[name="fee_schedule_id"]) h2 { margin-bottom: .7rem; }
.agr-block:has(select[name="fee_schedule_id"]) .agr-fields { gap: .6rem 1rem; }
.agr-help { margin-top: -.1rem; font-size: .78rem; line-height: 1.5; }
.agr-validity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1rem; }
.agr-validity label > span em { color: #98a2b3; font-style: normal; font-weight: 450; }
.agr-field-error { grid-column: 1 / -1; color: #c53a3a; font-size: .78rem; font-weight: 520; }
.agr-fields input[type="date"] { height: 2.5rem; padding: 0 .7rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #fff; color: #1b2430; font: 450 .9rem 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.agr-fields input[type="date"]:hover { border-color: #cfd9e6; }
.agr-fields input[type="date"]:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(79, 70, 229, .12); outline: none; }
.agr-fields input[type="date"]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
.agr-fields input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: .8; }
.agr-fields input[aria-invalid="true"] { border-color: #d14343; }
.agr-fields input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(209, 67, 67, .14); }
.agr-due { display: inline-flex; align-items: center; gap: .4rem; margin-left: .3rem; padding: .14rem .6rem .14rem .5rem; border: 1px solid #f3e2bd; border-radius: 999px; background: #fff7e8; color: #9a6700; font-size: .76rem; font-weight: 560; letter-spacing: 0; white-space: nowrap; vertical-align: .2rem; }
.agr-due i { width: .42rem; height: .42rem; border-radius: 50%; background: #c28a2e; }
.agr-due.strict { border-color: #f6d0d4; background: #fff1f2; color: #c53a3a; }
.agr-due.strict i { background: #d14343; }
.agr-table td small.bad { color: #c53a3a; }
@media (max-width: 760px) { .agr-validity { grid-template-columns: minmax(0, 1fr); } }

/* Convenios · Aranceles y descuentos (etapa B) */
.agr-ref { display: grid; gap: .3rem; }
.agr-ref > span { color: #475569; font-size: .8rem; font-weight: 540; }
.agr-ref strong { color: #1b2430; font-size: .98rem; font-weight: 600; }
.agr-ref a { justify-self: start; font-size: .82rem; font-weight: 540; }
.agr-lead { margin: -.45rem 0 .75rem; color: #667085; font-size: .8rem; line-height: 1.5; }
.agr-switch { position: relative; display: flex; align-items: center; gap: .8rem; margin: 0; padding: .7rem 0; border-top: 1px solid #edf2f7; cursor: pointer; }
.agr-block > h2 + .agr-switch { padding-top: .1rem; border-top: 0; }
.agr-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.agr-switch i { flex: none; position: relative; width: 2.5rem; height: 1.45rem; border-radius: 999px; background: #cfd8e3; transition: background var(--fast) var(--ease); }
.agr-switch i::after { content: ''; position: absolute; top: .15rem; left: .15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .25); transition: transform var(--fast) var(--ease); }
.agr-switch input:checked + i { background: #0f766e; }
.agr-switch input:checked + i::after { transform: translateX(1.05rem); }
.agr-switch input:focus-visible + i { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
.agr-switch input:disabled + i { opacity: .55; }
.agr-switch:has(input:disabled) { cursor: default; }
.agr-switch > span { display: grid; gap: .1rem; min-width: 0; }
.agr-switch strong { color: #1b2430; font-size: .9rem; font-weight: 560; }
.agr-switch small { color: #667085; font-size: .76rem; }
[data-agr-scope].muted .agr-switch strong { color: #667085; }
[data-agr-scope].muted .agr-switch input:checked + i { background: #94a3b8; }
[data-agr-scope] > .agr-help { margin-top: .5rem; }
.agr-percent { display: grid; gap: .35rem; margin-top: .6rem; padding-top: .9rem; border-top: 1px solid #edf2f7; }
.agr-percent > label { margin: 0; color: #475569; font-size: .8rem; font-weight: 540; }
.agr-percent > small { color: #667085; font-size: .76rem; }
.agr-percent-field { position: relative; display: block; width: 8.5rem; }
.agr-percent-field input { width: 100%; height: 2.7rem; padding: 0 2.1rem 0 .8rem; border: 1px solid #dce4ee; border-radius: 10px; box-shadow: none; color: #1b2430; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.agr-percent-field input[aria-invalid="true"] { border-color: #d14343; }
.agr-percent-field b { position: absolute; top: 50%; right: .8rem; transform: translateY(-50%); color: #667085; font-weight: 560; pointer-events: none; }
.agr-off { margin-top: .7rem; padding: .7rem .8rem; border-radius: 10px; background: #f8fafc; }
.agr-preview h2 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.agr-draft { padding: .12rem .55rem; border: 1px solid #f3e2bd; border-radius: 999px; background: #fff7e8; color: #9a6700; font-size: .72rem; font-weight: 560; letter-spacing: 0; }
.agr-find { position: relative; }
.agr-find label { position: relative; display: block; margin: 0; }
.agr-find label svg { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: #94a3b8; }
.agr-find input { width: 100%; max-width: none; height: 2.6rem; padding-left: 2.3rem; border-color: #dce4ee; box-shadow: none; }
.agr-find .results:not(:empty) { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; display: grid; max-height: 15rem; overflow-y: auto; padding: .3rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; box-shadow: 0 12px 32px rgba(16, 24, 40, .12); color: #667085; font-size: .84rem; }
.agr-find .results button { display: block; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1b2430; font-size: .85rem; font-weight: 450; text-align: left; white-space: normal; }
.agr-find .results button:hover, .agr-find .results button:focus { background: var(--blue-soft); color: var(--blue-deep); }
.agr-result { margin-top: .9rem; }
.agr-empty { margin: 0; padding: 1.1rem; border: 1px dashed #dce4ee; border-radius: 12px; color: #667085; font-size: .84rem; text-align: center; }
.agr-result h3 { margin: 0; color: #1b2430; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.agr-result .agr-meta { margin: .15rem 0 .8rem; color: #667085; font-size: .78rem; }
.agr-result dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; }
.agr-result dt, .agr-result dd { margin: 0; padding: .5rem 0; border-top: 1px solid #edf2f7; font-size: .86rem; }
.agr-result dt { color: #667085; }
.agr-result dt small { display: block; color: #98a2b3; font-size: .74rem; }
.agr-result dd { color: #1b2430; font-weight: 540; font-variant-numeric: tabular-nums; text-align: right; }
.agr-result dt.final, .agr-result dd.final { padding-top: .7rem; border-top-color: #cfd9e6; color: #1b2430; font-weight: 620; }
.agr-result dd.final { color: #0f766e; font-size: 1.3rem; letter-spacing: -.015em; }
.agr-result dd.same { color: #1b2430; }
.agr-reason { display: flex; align-items: flex-start; gap: .5rem; margin: .6rem 0 0; padding: .65rem .8rem; border-radius: 10px; background: #f8fafc; color: #475569; font-size: .8rem; line-height: 1.45; }
.agr-reason.applied { background: #ecf7f5; color: #0d665f; }
.agr-result.loading { opacity: .55; }
@media (max-width: 640px) { .agr-percent-field { width: 100%; } }
.agr-table td small.agr-disc { color: #0f766e; font-weight: 540; }

/* Convenios · Condiciones de pago y liquidación (etapa B.1) */
.agr-policy { max-width: 46rem; }
.agr-options { display: grid; gap: .6rem; }
.agr-option { position: relative; display: flex; align-items: flex-start; gap: .8rem; margin: 0; padding: .9rem 1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.agr-option:hover { border-color: #cfd9e6; }
.agr-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.agr-option i { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; border: 1.5px solid #b8c4d3; border-radius: 50%; background: #fff; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.agr-option:has(input:checked) { border-color: var(--brand-deep); background: #f7f8ff; }
.agr-option input:checked + i { border-color: var(--brand-deep); box-shadow: inset 0 0 0 .22rem #fff, inset 0 0 0 1rem var(--brand-deep); }
.agr-option input:focus-visible + i { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
.agr-option:has(input:disabled) { cursor: default; opacity: .8; }
.agr-option > span { display: grid; gap: .2rem; min-width: 0; }
.agr-option strong { color: #1b2430; font-size: .92rem; font-weight: 580; }
.agr-option strong em { margin-left: .35rem; padding: .08rem .45rem; border-radius: 999px; background: #eef2f7; color: #667085; font-size: .7rem; font-style: normal; font-weight: 560; vertical-align: .08rem; }
.agr-option small { color: #667085; font-size: .82rem; line-height: 1.5; }
.agr-policy-note { display: none; margin-top: .8rem; padding: .7rem .8rem; border-radius: 10px; background: #ecf7f5; color: #0d665f; }
.agr-policy-note svg { color: #0f766e; }
.agr-policy:has(input[value="performed"]:checked) .agr-policy-note { display: flex; }
.agr-policy-facts { margin: 1rem 0 0; padding: .9rem 0 0 1.1rem; border-top: 1px solid #edf2f7; color: #667085; font-size: .8rem; line-height: 1.55; }
.agr-policy-facts li + li { margin-top: .3rem; }
/* Liquidaciones: prestación que entra por la política del convenio */
.stl-origin { display: inline-block; margin-top: .2rem; padding: .05rem .45rem; border: 1px solid var(--brand-line); border-radius: 999px; background: #f2f7fd; color: var(--brand-deep); font-size: .7rem; font-weight: 560; white-space: nowrap; cursor: help; }
.stl-table td.stl-paid small { display: block; color: #667085; font-size: .72rem; font-weight: 450; }

/* Convenios · confirmación del cambio de política y su historial (etapa B.2) */
dialog.agr-impact { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.5rem 1.6rem; overflow-y: auto; border: 1px solid #e4eaf1; background: #fff; }
dialog.agr-impact:not([open]) { display: none; }
dialog.agr-impact form { margin: 0; max-width: none; }
dialog.agr-impact h2 { margin: 0 0 1rem; color: #1b2430; font-size: 1.1rem; font-weight: 620; letter-spacing: -.012em; }
dialog.agr-impact div { display: block; }
.agr-impact-facts, .agr-impact-numbers { margin: 0; }
.agr-impact-facts > div { display: grid !important; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; padding: .3rem 0; font-size: .86rem; }
.agr-impact-facts dt { color: #667085; } .agr-impact-facts dd { margin: 0; color: #1b2430; font-weight: 540; }
dialog.agr-impact p.agr-impact-lead { margin: .9rem 0 .7rem; color: #1b2430; font-size: .92rem; line-height: 1.5; }
.agr-impact-numbers { border: 1px solid #e4eaf1; border-radius: 12px; }
.agr-impact-numbers > div { display: flex !important; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; font-size: .86rem; }
.agr-impact-numbers > div + div { border-top: 1px solid #edf2f7; }
.agr-impact-numbers dt { color: #475569; } .agr-impact-numbers dt small { display: block; color: #98a2b3; font-size: .74rem; line-height: 1.4; }
.agr-impact-numbers dd { margin: 0; color: #1b2430; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.agr-impact-numbers .review dd { color: #9a6700; }
.agr-impact-scope { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; border: 0; }
.agr-impact-scope legend { margin-bottom: .5rem; padding: 0; color: #475569; font-size: .8rem; font-weight: 560; }
.agr-impact-scope .agr-option { padding: .7rem .85rem; }
.agr-impact-scope .agr-option > span { display: grid !important; }
.agr-impact-actions { display: flex !important; justify-content: flex-end; align-items: center; gap: .6rem; margin-top: 1.2rem; }
dialog.agr-impact p.agr-field-error { margin: 0 0 .8rem; font-size: .84rem; }
.agr-policy-history { margin-top: 1rem; }
.agr-policy-history ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.agr-policy-history li { display: grid; gap: .15rem; padding: .6rem 0; border-top: 1px solid #edf2f7; }
.agr-policy-history li:first-child { padding-top: 0; border-top: 0; }
.agr-policy-history strong { color: #1b2430; font-size: .86rem; font-weight: 560; }
.agr-policy-history span { color: #667085; font-size: .78rem; }
.agr-impact-numbers dt { flex: 1; text-align: left; }
fieldset.agr-impact-scope { min-width: 0; border: 0 !important; background: none; box-shadow: none; padding: 0 !important; }
.stl-table td.stl-rule small.stl-origin-name { display: block; margin-top: .15rem; color: var(--brand-deep); font-size: .72rem; font-weight: 540; line-height: 1.3; white-space: normal; }

/* Liquidaciones · columna Cálculo compacta y detalle "Por convenio" (etapa B.3) */
.stl-table td.stl-rule strong { font-size: .875rem; font-weight: 700; color: var(--brand-deep); line-height: 1.25; }
.stl-table td.stl-rule small { margin-top: .05rem; color: #667085; font-size: .72rem; line-height: 1.3; white-space: normal; }
button.stl-origin, button.stl-origin:hover { display: inline-flex; align-items: center; height: auto; min-height: 0; margin-top: .25rem; padding: .1rem .5rem; border: 0; border-radius: 6px; background: var(--brand-soft); box-shadow: none; color: var(--brand-deep); font-size: .68rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
button.stl-origin:hover { background: #dfeaff; }
button.stl-origin:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
.stl-table tbody td { padding-top: .6rem; padding-bottom: .6rem; }
dialog.stl-detail { width: min(30rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.4rem 1.5rem; overflow-y: auto; border: 1px solid #e4eaf1; background: #fff; }
dialog.stl-detail:not([open]) { display: none; }
dialog.stl-detail h2 { margin: 0 0 .3rem; color: #1b2430; font-size: 1.05rem; font-weight: 620; }
dialog.stl-detail p.stl-detail-lead, dialog.stl-detail p.stl-detail-note { margin: 0 0 .9rem; color: #667085; font-size: .8rem; line-height: 1.5; }
dialog.stl-detail p.stl-detail-note { margin: .9rem 0 0; }
dialog.stl-detail dl { margin: 0; }
dialog.stl-detail dl > div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: .8rem; padding: .38rem 0; font-size: .84rem; }
dialog.stl-detail dl > div.sep { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid #edf2f7; }
dialog.stl-detail dl > div[hidden] { display: none; }
dialog.stl-detail dt { color: #667085; }
dialog.stl-detail dd { margin: 0; color: #1b2430; font-weight: 540; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
dialog.stl-detail dl > div.total { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid #cfd9e6; }
dialog.stl-detail dl > div.total dt { color: #1b2430; font-weight: 600; }
dialog.stl-detail dl > div.total dd { color: var(--brand-deep); font-size: 1.1rem; font-weight: 700; }
dialog.stl-detail .stl-detail-actions { display: flex; justify-content: flex-end; margin-top: 1.1rem; }
@media (max-width: 760px) { .stl-rule button.stl-origin { margin: 0 0 0 .4rem; } }
.stl-table th:nth-child(7) { width: 8.6rem; } .stl-table th:nth-child(6) { width: 5.2rem; } .stl-table th:nth-child(2) { width: 16.5%; }
.std-items .stl-table th:nth-child(2) { width: 16.5%; }
@media (min-width: 761px) { .stl-table td.stl-rule small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.stl-table th:nth-child(7) { width: 8rem; } .stl-table th:nth-child(2), .std-items .stl-table th:nth-child(2) { width: 15%; } .stl-table th:nth-child(1) { width: 6rem; } .stl-table th:nth-child(3) { width: 5.6rem; }
.stl-table th:nth-child(7) { width: 8.5rem; } .stl-table th:nth-child(3) { width: 6.3rem; } .stl-table th:nth-child(2), .std-items .stl-table th:nth-child(2) { width: 14.5%; }

/* Liquidaciones · resumen agrupado de prestaciones (etapa 5.1) */
.stl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.grp-switch { display: inline-flex; flex: none; gap: .15rem; padding: .2rem; border: 1px solid #e4eaf1; border-radius: 11px; background: var(--bg); }
.grp-switch button, .grp-switch button:hover { height: 2rem; padding: 0 .8rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #667085; font-size: .82rem; font-weight: 540; white-space: nowrap; }
.grp-switch button:hover { color: #1b2430; }
.grp-switch button.current, .grp-switch button.current:hover { background: #fff; color: var(--brand-deep); font-weight: 600; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }
.grp-switch button:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 1px; }
.grp-search { position: relative; display: block; margin: .9rem 1.15rem .2rem; max-width: 22rem; }
.grp-search svg { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: #94a3b8; }
.grp-search input { width: 100%; max-width: none; height: 2.4rem; padding-left: 2.3rem; border-color: #dce4ee; box-shadow: none; }
table.grp-table { position: relative; width: 100%; min-width: 44rem; table-layout: fixed; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .875rem; }
.grp-table th:nth-child(1) { width: auto; } .grp-table th:nth-child(2) { width: 6.5rem; } .grp-table th:nth-child(3) { width: 11rem; } .grp-table th:nth-child(4) { width: 9rem; } .grp-table th:nth-child(5) { width: 9rem; }
.grp-table th, .grp-table td { padding: .6rem .8rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; }
.grp-table th:first-child, .grp-table td:first-child { padding-left: 1.15rem; } .grp-table th:last-child, .grp-table td:last-child { padding-right: 1.15rem; }
.grp-table thead th { background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.grp-table thead th button, .grp-table thead th button:hover { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.grp-table thead th button::after { content: '↕'; margin-left: .3rem; opacity: .35; font-size: .75rem; }
.grp-table thead th[aria-sort="ascending"] button::after { content: '↑'; opacity: 1; color: var(--brand-deep); }
.grp-table thead th[aria-sort="descending"] button::after { content: '↓'; opacity: 1; color: var(--brand-deep); }
.grp-table thead th[aria-sort] button { color: var(--brand-deep); }
.grp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.grp-table tbody tr:hover > td { background: #f8fafc; }
.grp-table td { color: #1b2430; }
.grp-name strong { display: block; overflow: hidden; color: #1b2430; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.grp-table td small { display: block; margin-top: .1rem; overflow: hidden; color: #667085; font-size: .72rem; font-weight: 450; text-overflow: ellipsis; white-space: nowrap; }
.grp-count { font-weight: 600; }
.grp-base, .grp-unit { color: #475569; }
.grp-table .none { color: #98a2b3; } .grp-table .var { color: #667085; font-size: .8rem; }
.grp-table td.grp-fees { color: var(--brand-deep); font-weight: 700; }
.grp-table tfoot td { border-bottom: 0; border-top: 1px solid #cfd9e6; background: #f8fafc; font-weight: 600; }
.grp-table tfoot td small { display: flex; align-items: center; gap: .3rem; color: #0f766e; font-weight: 500; }
.grp-table tfoot td small svg { width: .8rem; height: .8rem; }
.grp-table tfoot td.grp-fees { font-size: 1rem; }
.grp-warn { display: flex; align-items: flex-start; gap: .6rem; margin: .9rem 1.15rem; padding: .75rem .9rem; border: 1px solid #f3e2bd; border-radius: 10px; background: #fff7e8; color: #7a5200; font-size: .84rem; line-height: 1.5; }
.grp-warn svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; }
.grp-empty { margin: 0; padding: 1.2rem; color: #667085; font-size: .86rem; text-align: center; }
@media (max-width: 760px) {
  table.grp-table { min-width: 0; table-layout: auto; }
  .grp-table thead { display: none; }
  .grp-table, .grp-table tbody, .grp-table tfoot { display: block; }
  .grp-table tbody tr, .grp-table tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .8rem; padding: .75rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .grp-table td, .grp-table td:first-child, .grp-table td:last-child { display: block; padding: 0; border: 0; background: none !important; text-align: left; }
  .grp-table tbody td.grp-name { grid-column: 1 / -1; } .grp-name strong { white-space: normal; }
  .grp-table tbody td.num { display: flex; justify-content: space-between; grid-column: 1 / -1; font-size: .82rem; }
  .grp-table tbody td.num::before { content: attr(data-label); color: #667085; font-weight: 450; }
  .grp-table tbody td.num small { display: inline; margin-left: .4rem; }
  .grp-table tfoot td:empty { display: none; } .grp-table tfoot td.num { text-align: right; }
  .grp-switch { width: 100%; } .grp-switch button { flex: 1; padding: 0 .4rem; }
}
.grp-table th:nth-child(4) { width: 10.5rem; } .grp-table th:nth-child(2) { width: 7rem; }

/* Usuarios · directorio del personal (rediseño del listado) */
.usr-card { margin-bottom: .9rem; }
.usr-bar { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; padding: .85rem 1.15rem; border-bottom: 1px solid #edf2f7; }
.usr-filter { display: inline-flex; gap: .15rem; padding: .2rem; border: 1px solid #e4eaf1; border-radius: 11px; background: var(--bg); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.usr-filter a { display: inline-flex; align-items: center; gap: .45rem; flex: none; height: 2.1rem; padding: 0 .8rem; border-radius: 8px; color: #667085; font-size: .84rem; font-weight: 540; white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.usr-filter a:hover { color: #1b2430; text-decoration: none; }
.usr-filter a b { min-width: 1.35rem; padding: 0 .35rem; border-radius: 999px; background: #e9eef5; color: #667085; font-size: .72rem; font-weight: 600; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums; }
.usr-filter a.current { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.usr-filter a.current b { background: #fff; color: var(--brand-deep); }
.usr-filter a:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 1px; box-shadow: none; }
.usr-search { position: relative; display: block; flex: 1 1 15rem; max-width: 20rem; margin: 0; }
.usr-search svg { position: absolute; top: 50%; left: .75rem; width: 1rem; height: 1rem; transform: translateY(-50%); color: #94a3b8; }
.usr-search input { width: 100%; max-width: none; height: 2.4rem; padding-left: 2.3rem; border-color: #dce4ee; box-shadow: none; }
table.usr-table { position: relative; width: 100%; min-width: 60rem; table-layout: fixed; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .84rem; }
.usr-table th:nth-child(1) { width: 23%; } .usr-table th:nth-child(2) { width: 21%; } .usr-table th:nth-child(3) { width: 9%; } .usr-table th:nth-child(4) { width: 14%; }
.usr-table th:nth-child(5) { width: 9.5rem; } .usr-table th:nth-child(6) { width: 8.4rem; } .usr-table th:nth-child(7) { width: 14.4rem; }
.usr-table th, .usr-table td { padding: .75rem .7rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; text-align: left; }
.usr-table th:first-child, .usr-table td:first-child { padding-left: 1.15rem; } .usr-table th:last-child, .usr-table td:last-child { padding-right: 1.15rem; }
.usr-table thead th { padding-top: .6rem; padding-bottom: .6rem; background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.usr-table thead th button, .usr-table thead th button:hover { height: auto; padding: 0; border: 0; background: none; box-shadow: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.usr-table thead th button::after { content: '↕'; margin-left: .3rem; opacity: .4; font-size: .75rem; }
.usr-table thead th[aria-sort="ascending"] button::after { content: '↑'; opacity: 1; color: var(--brand-deep); }
.usr-table thead th[aria-sort="descending"] button::after { content: '↓'; opacity: 1; color: var(--brand-deep); }
.usr-table tbody tr { height: 3.75rem; }
.usr-table tbody tr:hover > td { background: #f8fafc; }
.usr-table tbody tr:last-child td { border-bottom: 0; }
.usr-table td { color: #344054; }
.usr-table .none { color: #98a2b3; }
.usr-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.usr-avatar { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: #e8eef7; color: var(--brand-deep); font-size: .7rem; font-weight: 650; letter-spacing: .02em; }
.usr-who { display: flex; flex-direction: column; justify-content: center; min-height: 2rem; min-width: 0; }
.usr-who a { display: -webkit-box; overflow: hidden; color: #1b2430; font-size: .875rem; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.usr-who a:hover { color: var(--brand); text-decoration: none; }
.usr-who small { color: #9a6700; font-size: .72rem; }
.usr-mail span, .usr-detail span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-mail { color: #667085 !important; font-size: .8rem; }
.usr-detail span { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35; }
.usr-phone { white-space: nowrap; font-variant-numeric: tabular-nums; }
.usr-table tr.off .usr-who a, .usr-table tr.off td { color: #98a2b3; }
.usr-table tr.off .usr-avatar { background: #f0f2f5; color: #98a2b3; }
.usr-table td.usr-act { overflow: visible; text-align: right; white-space: nowrap; }
.usr-act > * { vertical-align: middle; }
a.button.usr-main, a.button.usr-main:hover { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; padding: 0 .7rem; border: 1px solid #dce4ee; border-radius: 9px; background: #fff; box-shadow: none; color: var(--brand-deep); font-size: .8rem; font-weight: 560; }
a.button.usr-main:hover { border-color: #bcc2f0; background: #f7f8ff; text-decoration: none; }
a.button.usr-main svg { width: .95rem; height: .95rem; }
.usr-act details.bud-menu { display: inline-block; margin-left: .25rem; text-align: left; }
.usr-table .bud-menu .menu-pop form { margin: 0; }
.usr-table .bud-menu .menu-pop button.link, .usr-table .bud-menu .menu-pop button.link:hover { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1b2430; font-size: .85rem; font-weight: 450; }
.usr-table .bud-menu .menu-pop button.link:hover { background: var(--blue-soft); color: var(--blue-deep); }
.usr-table tbody tr:nth-last-child(-n+2):not(:nth-child(-n+3)) .menu-pop { top: auto; bottom: calc(100% + 4px); }
.usr-none { margin: 0; padding: 1.4rem; color: #667085; font-size: .86rem; text-align: center; }
.usr-hint { display: flex; align-items: flex-start; gap: .5rem; color: #667085; font-size: .82rem; }
.usr-hint svg { flex: none; width: .95rem; height: .95rem; margin-top: .15rem; color: #94a3b8; }
@media (max-width: 760px) {
  .usr-search { max-width: none; flex-basis: 100%; }
  table.usr-table { min-width: 0; table-layout: auto; }
  .usr-table thead { display: none; }
  .usr-table, .usr-table tbody { display: block; }
  .usr-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; height: auto; padding: .9rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .usr-table td, .usr-table td:first-child, .usr-table td:last-child { display: block; padding: 0; border: 0; background: none !important; }
  td.usr-name { padding-right: 6.5rem !important; }
  .usr-table td.usr-role, .usr-table td.usr-detail, .usr-table td.usr-phone, .usr-table td.usr-mail { display: flex; gap: .5rem; font-size: .8rem; }
  .usr-table td.usr-role::before, .usr-table td.usr-detail::before, .usr-table td.usr-phone::before { content: attr(data-label); flex: none; width: 6.2rem; color: #98a2b3; }
  .usr-table td.usr-mail { padding-left: 2.7rem; }
  .usr-mail span { white-space: normal; overflow-wrap: anywhere; }
  .usr-table td.usr-state { position: absolute; top: .95rem; right: 1.15rem; }
  .usr-table td.usr-act { display: flex; align-items: center; justify-content: space-between; margin-top: .35rem; text-align: left; }
  .usr-table .bud-menu .menu-pop { right: 0; left: auto; }
}

/* Usuarios: el correo va bajo el nombre, para que ambos se lean completos en un notebook */
table.usr-table { min-width: 56rem; }
.usr-table th:nth-child(1) { width: auto; } .usr-table th:nth-child(2) { width: 6.2rem; } .usr-table th:nth-child(3) { width: 21%; } .usr-table th:nth-child(4) { width: 8.6rem; }
.usr-table th:nth-child(5) { width: 7.6rem; } .usr-table th:nth-child(6) { width: 13.6rem; } .usr-table th:nth-child(7) { width: auto; }
.usr-who a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: unset; }
.usr-who .usr-mail { display: block; overflow: hidden; margin-top: .1rem; color: #667085; font-size: .78rem; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.usr-table tr.off .usr-who .usr-mail { color: #98a2b3; }
.usr-table tbody tr { height: 3.9rem; }
@media (max-width: 760px) {
  .usr-who a, .usr-who .usr-mail { white-space: normal; overflow-wrap: anywhere; }
  td.usr-name { padding-right: 0 !important; } .usr-id { padding-right: 6.8rem; }
  .usr-table td.usr-role, .usr-table td.usr-detail, .usr-table td.usr-phone { padding-left: 2.7rem; }
  .usr-table tbody tr { height: auto; }
}
.usr-table th:nth-child(2) { width: 5.6rem; } .usr-table th:nth-child(3) { width: 8.4rem; } .usr-table th:nth-child(4) { width: 8.6rem; } .usr-table th:nth-child(5) { width: 7.3rem; } .usr-table th:nth-child(6) { width: 12.9rem; }
.usr-table th, .usr-table td { padding-left: .55rem; padding-right: .55rem; }
.usr-table th:first-child, .usr-table td:first-child { padding-left: 1.15rem; } .usr-table th:last-child, .usr-table td:last-child { padding-right: .9rem; }
a.button.usr-main, a.button.usr-main:hover { padding: 0 .6rem; }
.usr-act details.bud-menu { margin-left: .1rem; }
.usr-who a { display: -webkit-box; white-space: normal; text-overflow: clip; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 761px) { table.usr-table { min-width: 59rem; } }
.usr-table thead th:nth-child(3) { white-space: normal; line-height: 1.25; }
@media (max-width: 760px) { table.usr-table { min-width: 0 !important; width: 100%; table-layout: auto; } .usr-card .pat-scroll { overflow: visible; } }
@media (max-width: 760px) { .usr-id { align-items: flex-start; padding-right: 0; } .usr-who { flex: 1; } .usr-who a { padding-right: 6.6rem; } }

/* Usuarios · refinamiento final: columnas adaptables y menú de acciones */
@media (min-width: 761px) {
  /* El ancho de cada columna sale de su contenido: Perfil y Celular ocupan lo justo y lo que sobra va al nombre y a la especialidad. */
  table.usr-table { table-layout: auto; }
  .usr-table th:nth-child(n) { width: auto; }
  .usr-table th:nth-child(1) { width: 34%; }
  .usr-table td.usr-role, .usr-table td.usr-phone, .usr-table td.usr-state { white-space: nowrap; }
  .usr-table td.usr-name { min-width: 15rem; }
  .usr-table td.usr-detail { min-width: 9.5rem; max-width: 18rem; }
  .usr-detail span { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .usr-table td.usr-act { width: 1%; padding-left: .9rem; padding-right: 1.6rem; }
  .usr-table thead th:nth-child(3) { white-space: nowrap; }
}
.usr-act details.bud-menu { margin-left: .35rem; vertical-align: middle; }
.usr-act details.bud-menu summary, .usr-act details.bud-menu summary:hover { width: 2.25rem; height: 2.25rem; border-radius: 9px; color: #667085; }
.usr-act details.bud-menu summary:hover, .usr-act details.bud-menu[open] summary { border-color: transparent; background: #eaf0f7; color: var(--brand-deep); }
.usr-act details.bud-menu summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .6); outline-offset: 2px; background: #eaf0f7; box-shadow: none; }
@media (min-width: 761px) {
  .usr-table thead th:nth-child(3) { white-space: normal; line-height: 1.25; }
  .usr-table td.usr-detail { min-width: 8.6rem; }
  .usr-detail span { white-space: nowrap; }
  .usr-detail span[title*=","] { white-space: normal; }
  table.usr-table { min-width: 57rem; }
}
@media (min-width: 761px) and (max-width: 1199px) { .usr-table td.usr-name { min-width: 18.6rem; } }

/* Ficha del usuario · cabecera y menú interno más compactos */
.usr-hero { gap: .8rem 1.5rem; padding: 1rem 1.35rem; margin-bottom: 1rem; border-radius: 14px; }
.usr-hero .hero-main { gap: .9rem; }
.usr-hero .hero-avatar { width: 3.1rem; height: 3.1rem; border-width: 1px; font-size: 1.05rem; font-weight: 650; }
.usr-hero h1 { margin: .05rem 0 .15rem; font-size: 1.3rem; line-height: 1.2; }
.usr-hero small { font-size: .74rem; font-weight: 540; letter-spacing: .02em; }
.usr-hero p { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; font-size: .86rem; }
.usr-hero .pill { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .1rem .6rem; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; font-size: .72rem; font-weight: 560; }
.usr-hero .pill::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: #5eead4; }
.usr-hero .pill.rejected { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; }
.usr-hero .pill.rejected::before { background: #fca5a5; }
.usr-hero .inline { gap: .5rem; }
.usr-hero button.ghost, .usr-hero button.ghost:hover { height: 2.2rem; padding: 0 .8rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: 9px; background: rgba(255, 255, 255, .08); box-shadow: none; color: #fff; font-size: .82rem; font-weight: 540; }
.usr-hero button.ghost:hover { background: rgba(255, 255, 255, .18); }
.ficha:has(.usr-side) { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.4rem; }
.usr-side { display: grid; gap: .1rem; padding: .45rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; }
.usr-side a { position: relative; padding: .5rem .7rem .5rem .85rem; border-radius: 9px; color: #475569; font-size: .86rem; font-weight: 500; }
.usr-side a:hover { background: var(--bg); color: #1b2430; text-decoration: none; }
.usr-side a.current { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.usr-side a.current::before { content: ''; position: absolute; left: .25rem; top: .5rem; bottom: .5rem; width: 3px; border-radius: 2px; background: var(--brand-deep); }
.usr-side a.usr-side-back { margin-top: .35rem; padding-top: .65rem; border-top: 1px solid #edf2f7; border-radius: 0 0 9px 9px; color: #667085; font-size: .82rem; }
@media (max-width: 900px) { .ficha:has(.usr-side) { grid-template-columns: minmax(0, 1fr); } .usr-side { display: flex; flex-wrap: wrap; } .usr-side a.usr-side-back { margin: 0; padding-top: .5rem; border-top: 0; } }

/* Contratos del profesional */
.ctr-title { margin: 0 0 .9rem; }
.ctr-title h2 { margin: 0; color: #1b2430; font-size: 1.2rem; font-weight: 620; letter-spacing: -.015em; }
.ctr-title p { margin: .2rem 0 0; color: #667085; font-size: .86rem; }
.ctr-card { margin: 0 0 1rem; padding: 1.2rem 1.35rem 1.25rem; max-width: 62rem; }
.ctr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 1px solid #edf2f7; }
.ctr-head h3 { margin: .45rem 0 .1rem; color: #1b2430; font-size: 1.05rem; font-weight: 620; letter-spacing: -.012em; }
.ctr-range { margin: 0; color: #667085; font-size: .84rem; font-variant-numeric: tabular-nums; }
.hist-state.warn { border-color: #f3e2bd; background: #fff7e8; color: #9a6700; } .hist-state.warn i { background: #c28a2e; }
.ctr-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ctr-actions form { margin: 0; }
.ctr-actions a.button, .ctr-actions a.button:hover { display: inline-flex; align-items: center; gap: .4rem; height: 2.3rem; padding: 0 .85rem; border: 1px solid #bcc2f0; border-radius: 9px; background: #fff; box-shadow: none; color: var(--brand-deep); font-size: .84rem; font-weight: 560; }
.ctr-actions a.button:hover { background: #f7f8ff; text-decoration: none; }
.ctr-actions a.button svg { width: .95rem; height: .95rem; }
.ctr-actions a.button.ctr-plain, .ctr-actions a.button.ctr-plain:hover { border-color: #dce4ee; color: #475569; }
.ctr-actions button.ctr-end, .ctr-actions button.ctr-end:hover { height: 2.3rem; padding: 0 .6rem; border: 0; background: none; box-shadow: none; color: #c53a3a; font-size: .84rem; font-weight: 540; }
.ctr-actions button.ctr-end:hover { text-decoration: underline; }
.ctr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 1rem 0 0; }
.ctr-facts > div.wide { grid-column: 1 / -1; }
.ctr-facts dt { margin-bottom: .25rem; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ctr-facts dd { display: grid; gap: .1rem; margin: 0; color: #1b2430; font-size: .9rem; font-weight: 540; line-height: 1.4; }
.ctr-facts dd small { color: #667085; font-size: .78rem; font-weight: 400; }
.ctr-facts dd a { justify-self: start; font-size: .82rem; font-weight: 540; }
.ctr-empty { display: flex; align-items: center; gap: .9rem; color: #667085; }
.ctr-empty svg { flex: none; width: 1.6rem; height: 1.6rem; color: #94a3b8; }
.ctr-empty div { display: grid; gap: .1rem; } .ctr-empty strong { color: #1b2430; font-size: .95rem; } .ctr-empty span { font-size: .84rem; }
.ctr-past { margin: 0 0 1rem; padding: 0; max-width: 62rem; }
.ctr-past summary { display: flex; align-items: center; gap: .5rem; padding: .8rem 1.35rem; color: #475569; font-size: .88rem; font-weight: 560; cursor: pointer; list-style: none; }
.ctr-past summary::-webkit-details-marker { display: none; }
.ctr-past summary::after { content: '›'; margin-left: auto; color: #94a3b8; font-size: 1.1rem; transition: transform var(--fast) var(--ease); }
.ctr-past[open] summary::after { transform: rotate(90deg); }
.ctr-past summary b { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #eef2f7; color: #667085; font-size: .72rem; line-height: 1.4rem; text-align: center; }
.ctr-past ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #edf2f7; }
.ctr-past li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.35rem; border-bottom: 1px solid #edf2f7; }
.ctr-past li:last-child { border-bottom: 0; }
.ctr-past li > div:first-child { display: grid; gap: .1rem; min-width: 0; }
.ctr-past li strong { color: #475569; font-size: .86rem; font-weight: 560; }
.ctr-past li span { color: #667085; font-size: .78rem; line-height: 1.45; }
.ctr-past-actions { display: flex; gap: .9rem; flex: none; font-size: .82rem; }
.ctr-form { margin: 0 0 1rem; padding: 0; max-width: 62rem; }
.ctr-form-head { padding: 1.15rem 1.35rem .2rem; }
.ctr-form-head h3 { margin: 0; color: #1b2430; font-size: 1.05rem; font-weight: 620; }
.ctr-form-head p { margin: .2rem 0 0; color: #667085; font-size: .84rem; }
.ctr-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; padding: 1rem 1.35rem 1.2rem; }
.ctr-block { min-width: 0; margin: 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; box-shadow: none; }
.ctr-block.wide { grid-column: 1 / -1; }
.ctr-block legend { float: left; width: 100%; margin: 0 0 .8rem; padding: 0; color: #1b2430; font-size: .92rem; font-weight: 620; }
.ctr-block legend + * { clear: both; }
.ctr-block.ctr-key { border-color: var(--brand-line); background: #f9fbfe; }
.ctr-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; }
.ctr-fields label { display: grid; gap: .35rem; margin: 0; align-content: start; }
.ctr-fields label[hidden], .ctr-fields p[hidden] { display: none; }
.ctr-fields .wide { grid-column: 1 / -1; }
.ctr-fields label > span, .ctr-static > span { color: #475569; font-size: .8rem; font-weight: 540; }
.ctr-fields input, .ctr-fields select { width: 100%; max-width: none; height: 2.5rem; border-color: #dce4ee; box-shadow: none; }
.ctr-fields input[type="date"] { padding: 0 .7rem; border: 1px solid #dce4ee; border-radius: 10px; background: #fff; font: 450 .9rem 'Inter', sans-serif; font-variant-numeric: tabular-nums; }
.ctr-static { display: grid; gap: .2rem; align-content: start; }
.ctr-static strong { display: flex; align-items: center; height: 2.5rem; padding: 0 .8rem; border: 1px dashed #dce4ee; border-radius: 10px; color: #475569; font-size: .9rem; font-weight: 540; }
.ctr-static small { color: #667085; font-size: .76rem; }
.ctr-help { display: flex; align-items: flex-start; gap: .5rem; margin: .1rem 0 0; color: #667085; font-size: .78rem; line-height: 1.5; }
.ctr-help svg { flex: none; width: .95rem; height: .95rem; margin-top: .13rem; color: #94a3b8; }
.ctr-block > .ctr-help { margin-top: .8rem; }
table.ctr-branches { width: 100%; min-width: 34rem; margin: 0; border: 1px solid #e4eaf1; border-radius: 10px; border-collapse: separate; border-spacing: 0; box-shadow: none; overflow: hidden; font-size: .88rem; }
.ctr-branches th, .ctr-branches td { padding: .55rem .9rem; border-bottom: 1px solid #edf2f7; text-align: left; vertical-align: middle; }
.ctr-branches thead th { background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ctr-branches tbody tr:last-child td { border-bottom: 0; }
.ctr-branches th:nth-child(2), .ctr-branches td:nth-child(2), .ctr-branches th:nth-child(4), .ctr-branches td:nth-child(4) { width: 9.5rem; text-align: center; }
.ctr-branch-name { color: #1b2430; font-weight: 560; }
.ctr-branches select { width: 100%; max-width: 16rem; height: 2.3rem; border-color: #dce4ee; box-shadow: none; }
.ctr-branches select:disabled { background-color: var(--bg); color: #98a2b3; cursor: not-allowed; }
.ctr-branches small { color: #98a2b3; font-size: .8rem; }
.ctr-check { position: relative; display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: 0; cursor: pointer; }
.ctr-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ctr-check i { width: 1.2rem; height: 1.2rem; border: 1.5px solid #b8c4d3; border-radius: 6px; background: #fff; transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.ctr-check.round i { border-radius: 50%; }
.ctr-check input:checked + i { border-color: var(--brand-deep); background: var(--brand-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / .8rem no-repeat; }
.ctr-check.round input:checked + i { background: #fff; box-shadow: inset 0 0 0 .22rem #fff, inset 0 0 0 1rem var(--brand-deep); }
.ctr-check input:focus-visible + i { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
.ctr-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .8rem 1.35rem; border-top: 1px solid #e4eaf1; border-radius: 0 0 14px 14px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(4px); }
.ctr-foot a { color: #667085; font-size: .86rem; font-weight: 500; }
.ctr-foot button { display: inline-flex; align-items: center; gap: .45rem; height: 2.6rem; padding: 0 1.25rem; font-weight: 600; }
.ctr-info { display: grid; gap: .7rem; max-width: 62rem; margin: 0 0 1rem; padding: .95rem 1.1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #f8fafc; }
.ctr-info > div { display: flex; align-items: flex-start; gap: .6rem; }
.ctr-info svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--brand); }
.ctr-info p, .ctr-info p.where, .ctr-info p.alert { margin: 0; padding: 0; border: 0; background: none; color: #475569; font-size: .84rem; line-height: 1.55; }
.ctr-info strong { color: #1b2430; font-weight: 600; } .ctr-info em { color: #1b2430; font-style: normal; font-weight: 560; }
.ctr-info.warn { border-color: #f3e2bd; background: #fffaf0; } .ctr-info.warn svg { color: #c28a2e; }
.ctr-title .std-back { display: inline-block; margin-bottom: .3rem; }
@media (max-width: 760px) {
  .ctr-blocks, .ctr-fields, .ctr-facts { grid-template-columns: minmax(0, 1fr); }
  .ctr-blocks { padding: .9rem; } .ctr-card { padding: 1rem; }
  .ctr-actions { width: 100%; } .ctr-past li { flex-direction: column; align-items: flex-start; }
  .ctr-foot { padding: .7rem .9rem; } .ctr-foot button { flex: 1; justify-content: center; }
}

.ctr-block legend { letter-spacing: 0; text-transform: none; }
.ctr-new { margin: 0 0 1rem; padding: 0; max-width: 62rem; }
.ctr-new > summary { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.35rem; cursor: pointer; list-style: none; }
.ctr-new > summary::-webkit-details-marker { display: none; }
.ctr-new > summary::after { content: '›'; margin-left: auto; color: #94a3b8; font-size: 1.2rem; transition: transform var(--fast) var(--ease); }
.ctr-new[open] > summary::after { transform: rotate(90deg); }
.ctr-new[open] > summary { border-bottom: 1px solid #edf2f7; }
.ctr-new > summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: -2px; border-radius: 14px; }
.ctr-new-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 9px; background: var(--brand-soft); color: var(--brand-deep); }
.ctr-new-icon svg { width: 1rem; height: 1rem; }
.ctr-new > summary > span:nth-child(2) { display: grid; gap: .1rem; min-width: 0; }
.ctr-new > summary strong { color: #1b2430; font-size: 1rem; font-weight: 620; }
.ctr-new > summary small { color: #667085; font-size: .82rem; line-height: 1.4; }
.ctr-new .ctr-form { margin: 0; max-width: none; border: 0; box-shadow: none; background: none; }

/* Contratos · refinamiento final */
.ctr-fields input, .ctr-fields select { height: 2.6rem; border-color: #e4eaf1; border-radius: 10px; font-size: .875rem; }
.ctr-base { display: grid; gap: .45rem; }
.ctr-base[hidden] { display: none; }
.ctr-base .ctr-help { margin: 0; font-size: .75rem; }
.ctr-base .ctr-help[hidden] { display: none; }
.ctr-help strong { color: #475569; font-weight: 600; }
.ctr-help.ctr-quiet { padding-top: .5rem; border-top: 1px dashed #e4eaf1; color: #7b8698; }
.ctr-block > .ctr-help { font-size: .75rem; line-height: 1.55; }
.ctr-branches select { height: 2.4rem; border-color: #e4eaf1; border-radius: 10px; }
.ctr-branches tbody tr.off .ctr-branch-name { color: #98a2b3; font-weight: 500; }
.ctr-check input:disabled { cursor: not-allowed; }
.ctr-check input:disabled + i { border-color: #dfe5ec; background: #f1f4f8; }
.ctr-check:has(input:disabled) { cursor: not-allowed; }
.ctr-actions details.ctr-more { margin-left: .1rem; }
.ctr-actions details.ctr-more summary, .ctr-actions details.ctr-more summary:hover { width: 2.25rem; height: 2.25rem; border-radius: 9px; color: #667085; }
.ctr-actions details.ctr-more summary:hover, .ctr-actions details.ctr-more[open] summary { border-color: transparent; background: #eaf0f7; color: var(--brand-deep); }
.ctr-actions details.ctr-more summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .6); outline-offset: 2px; box-shadow: none; }
.ctr-actions details.ctr-more .menu-pop { right: 0; left: auto; }
.ctr-info { gap: 0; padding: 0; background: #fff; }
.ctr-info > div { padding: .9rem 1.1rem; }
.ctr-info > div + div { border-top: 1px solid #edf2f7; }
.ctr-info p { display: grid; gap: .15rem; }
.ctr-info p strong { font-size: .86rem; font-weight: 600; }
.ctr-info p span { color: #667085; font-size: .82rem; line-height: 1.55; }
.ctr-info.one { background: #f8fafc; } .ctr-info.one.warn { background: #fffaf0; }
.ctr-info.one p { display: block; }

/* Tarifario de honorarios por prestación */
.ctr-facts dd a.ctr-fees { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; padding: .35rem .7rem; border: 1px solid #bcc2f0; border-radius: 9px; background: #fff; color: var(--brand-deep); font-size: .82rem; font-weight: 560; }
.ctr-facts dd a.ctr-fees:hover { background: #f7f8ff; text-decoration: none; } .ctr-facts dd a.ctr-fees svg { width: .9rem; height: .9rem; }
.fee-summary { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 1rem 1.6rem; margin: 0 0 1rem; padding: 1.05rem 1.3rem; max-width: 70rem; }
.fee-contract { display: grid; gap: .25rem; justify-items: start; min-width: 0; }
.fee-contract strong { color: #1b2430; font-size: .98rem; font-weight: 620; }
.fee-contract small { color: #667085; font-size: .8rem; line-height: 1.45; }
.fee-progress { display: grid; gap: .45rem; color: #475569; font-size: .84rem; }
.fee-progress strong { color: var(--brand-deep); font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fee-bar { height: .4rem; border-radius: 999px; background: #e9eef5; overflow: hidden; }
.fee-bar i { display: block; height: 100%; border-radius: 999px; background: #0f766e; }
.fee-tools { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.fee-tools form { margin: 0; }
.fee-tools .button, .fee-tools .button:hover, .fee-tools label.button { display: inline-flex; align-items: center; gap: .4rem; height: 2.3rem; margin: 0; padding: 0 .8rem; border: 1px solid #dce4ee; border-radius: 9px; background: #fff; box-shadow: none; color: var(--brand-deep); font-size: .82rem; font-weight: 560; cursor: pointer; }
.fee-tools .button:hover, .fee-tools label.button:hover { border-color: #bcc2f0; background: #f7f8ff; text-decoration: none; }
.fee-tools .button svg { width: .95rem; height: .95rem; }
.fee-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fee-upload label:focus-within { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
.fee-card { margin: 0 0 1rem; padding: 0; max-width: 70rem; }
.fee-card > form { margin: 0; max-width: none; }
.fee-bar-top { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1rem; flex-wrap: wrap; padding: .8rem 1.15rem; border-bottom: 1px solid #edf2f7; }
.fee-filter { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.fee-filter .usr-search { flex: 0 1 14rem; }
.fee-filter select { height: 2.4rem; max-width: 13rem; border-color: #dce4ee; box-shadow: none; }
.fee-filter button { height: 2.4rem; }
table.fee-table { position: relative; width: 100%; min-width: 50rem; table-layout: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .84rem; }
.fee-table th, .fee-table td { padding: .45rem .7rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; text-align: left; }
.fee-table th:first-child, .fee-table td:first-child { padding-left: 1.15rem; } .fee-table th:last-child, .fee-table td:last-child { padding-right: 1.15rem; }
.fee-table thead th { padding-top: .6rem; padding-bottom: .6rem; background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fee-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fee-table tbody tr:hover > td { background: #f8fafc; }
.fee-code { color: #667085; font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fee-name { min-width: 14rem; } .fee-name span { color: #1b2430; font-weight: 560; }
.fee-name small { display: block; color: #9a6700; font-size: .72rem; }
.fee-cat { color: #667085; font-size: .8rem; }
.fee-ref { color: #98a2b3; white-space: nowrap; }
.fee-input span { position: relative; display: inline-block; width: 9.5rem; }
.fee-input b { position: absolute; top: 50%; left: .65rem; transform: translateY(-50%); color: #98a2b3; font-weight: 500; pointer-events: none; }
.fee-input input { width: 100%; max-width: none; height: 2.2rem; padding: 0 .65rem 0 1.4rem; border: 1px solid #dce4ee; border-radius: 9px; box-shadow: none; color: #1b2430; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fee-input input::placeholder { color: #b3bcc9; font-weight: 400; font-size: .78rem; }
.fee-input input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); outline: none; }
.fee-input input:disabled { background: var(--bg); color: #98a2b3; }
.fee-state { white-space: nowrap; }
.fee-foot { border-radius: 0 0 14px 14px; }
.fee-foot > span { margin-right: auto; color: #667085; font-size: .82rem; }
.fee-foot nav { display: flex; gap: .9rem; font-size: .84rem; }
.fee-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fee-counts > div { display: grid; gap: .1rem; }
.fee-counts strong { color: var(--brand-deep); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fee-counts span { color: #667085; font-size: .8rem; }
.fee-counts .bad strong { color: #9a6700; }
.fee-preview tr.quiet td { color: #98a2b3; } .fee-preview tr.quiet .fee-name span { color: #98a2b3; font-weight: 450; }
.fee-preview .fee-name small { color: #9a6700; }
.fee-preview .fee-new { color: var(--brand-deep); font-weight: 700; }
.fee-card + .grp-warn, .fee-summary + .grp-warn { max-width: 70rem; margin: 0 0 1rem; }
@media (max-width: 900px) { .fee-summary { grid-template-columns: minmax(0, 1fr); } .fee-tools { justify-content: flex-start; } .fee-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fee-summary { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.fee-summary .fee-progress { grid-column: 1 / -1; grid-row: 2; padding-top: .9rem; border-top: 1px solid #edf2f7; }
.fee-summary.fee-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; }
table.fee-table { min-width: 36rem; }
.fee-name em { display: block; margin-top: .05rem; color: #667085; font-size: .74rem; font-style: normal; font-variant-numeric: tabular-nums; }
.fee-input span { width: 8.6rem; }
.fee-table th:nth-child(2) { white-space: normal; line-height: 1.25; }
@media (max-width: 900px) { .fee-summary { grid-template-columns: minmax(0, 1fr); } .fee-summary.fee-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .fee-table th:nth-child(2), .fee-table td.fee-ref { display: none; } table.fee-table { min-width: 0; } .fee-table th:first-child, .fee-table td:first-child { padding-left: .9rem; } .fee-table th:last-child, .fee-table td:last-child { padding-right: .9rem; } .fee-input span { width: 7.2rem; } .fee-state .hist-state { font-size: .68rem; } .fee-foot { flex-wrap: wrap; } }

.fee-copy { position: relative; }
.fee-copy > summary { list-style: none; } .fee-copy > summary::-webkit-details-marker { display: none; } .fee-copy > summary::after { content: none; }
.fee-copy form.menu-pop { right: 0; left: auto; display: grid; gap: .7rem; width: min(24rem, calc(100vw - 2rem)); margin: 0; padding: 1rem; }
.fee-copy label { display: grid; gap: .3rem; margin: 0; } .fee-copy label > span { color: #475569; font-size: .8rem; font-weight: 540; }
.fee-copy select { width: 100%; max-width: none; height: 2.4rem; border-color: #dce4ee; box-shadow: none; }
.fee-copy label.fee-copy-check { display: flex; align-items: flex-start; gap: .5rem; } .fee-copy label.fee-copy-check span { font-weight: 450; }
.fee-copy small { color: #667085; font-size: .76rem; line-height: 1.45; }
.fee-copy button { justify-self: end; height: 2.3rem; }

/* Contrato por prestación pendiente de activar */
.fee-activate { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; max-width: 70rem; margin: 0 0 1rem; padding: .95rem 1.2rem; border: 1px solid #f3e2bd; border-radius: 12px; background: #fffaf0; }
.fee-activate > div { display: flex; align-items: flex-start; gap: .7rem; flex: 1 1 22rem; min-width: 0; }
.fee-activate svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: #c28a2e; }
.fee-activate p { display: grid; gap: .15rem; margin: 0; }
.fee-activate p strong { color: #1b2430; font-size: .92rem; font-weight: 620; }
.fee-activate p span { color: #6b5a2e; font-size: .82rem; line-height: 1.5; }
.fee-activate form { margin: 0; }
.fee-activate button { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1.1rem; font-weight: 600; }
.fee-activate button svg { margin: 0; color: inherit; width: 1rem; height: 1rem; }
.fee-activate button:disabled { opacity: .5; cursor: not-allowed; }
.ctr-pending { display: flex; align-items: flex-start; gap: .55rem; margin: 1rem 0 0; padding: .7rem .85rem; border: 1px solid #f3e2bd; border-radius: 10px; background: #fffaf0; color: #6b5a2e; font-size: .84rem; line-height: 1.5; }
.ctr-pending svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: #c28a2e; }
.ctr-pending a { font-weight: 560; white-space: nowrap; }

/* Tarifario: selector de arancel y valores propios por arancel */
.fee-schedule { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 18rem) minmax(0, 1fr); align-items: center; gap: .3rem .8rem; margin: 0; padding-top: .9rem; border-top: 1px solid #edf2f7; }
.fee-schedule label { margin: 0; color: #475569; font-size: .8rem; font-weight: 600; }
.fee-schedule select { width: 100%; max-width: none; height: 2.4rem; border-color: #bcc2f0; box-shadow: none; font-weight: 560; color: var(--brand-deep); }
.fee-schedule small { color: #667085; font-size: .78rem; line-height: 1.45; }
.fee-summary .fee-progress { grid-row: auto; }
.fee-progress strong.own { color: var(--brand); }
.fee-tools[hidden] { display: none; }
.fee-base { color: #475569; white-space: nowrap; }
.fee-table th { white-space: normal; line-height: 1.25; }
@media (max-width: 900px) { .fee-schedule { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .fee-table th:nth-child(3):not(:nth-last-child(2)), .fee-table td.fee-base { display: none; } }

.fee-name { min-width: 11rem; }
.fee-table td.fee-base { color: #475569; font-weight: 540; }
@media (max-width: 760px) { .fee-table th:nth-child(3):not(:nth-last-child(2)), .fee-table td.fee-base { display: table-cell; } .fee-table td.fee-base, .fee-table th:nth-child(2) { display: none; } }

/* Horarios del profesional · planificador por día */
.sch-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sch-attends { display: flex; align-items: center; gap: .7rem; margin: 0; }
.sch-attends button.link { font-size: .82rem; }
.sch-card { margin: 0 0 1rem; padding: 0; max-width: 62rem; }
.sch-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .9rem 1.5rem; flex-wrap: wrap; padding: 1.05rem 1.3rem .95rem; border-bottom: 1px solid #edf2f7; }
.sch-head h3 { margin: 0; color: #1b2430; font-size: 1.02rem; font-weight: 620; } .sch-head h3 span { color: #667085; font-weight: 450; font-size: .9rem; }
.sch-head p { margin: .2rem 0 0; color: #667085; font-size: .82rem; } .sch-head p strong { color: #475569; font-weight: 600; }
.sch-controls { display: flex; gap: .8rem; flex-wrap: wrap; }
.sch-controls label { display: grid; gap: .25rem; margin: 0; }
.sch-controls label > span { color: #667085; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sch-controls select { height: 2.35rem; min-width: 10.5rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; font-size: .875rem; }
.sch-days { display: grid; gap: .5rem; padding: .9rem 1.3rem 1.1rem; }
.sch-day { border: 1px solid #e4eaf1; border-radius: 12px; background: #fbfcfd; transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.sch-day.on { background: #fff; }
.sch-day:has([data-sch-editor]:not([hidden])) { border-color: #bcc2f0; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.sch-row { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 3.2rem; padding: .35rem .9rem; }
.sch-switch { padding: 0; border: 0; gap: .7rem; } .sch-switch strong { color: #98a2b3; font-size: .92rem; font-weight: 600; }
.sch-day.on .sch-switch strong { color: #1b2430; }
.sch-summary { display: flex; align-items: center; gap: .3rem 1.1rem; flex-wrap: wrap; min-width: 0; font-size: .86rem; }
.sch-summary b { color: var(--brand-deep); font-size: .95rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sch-summary span { color: #667085; white-space: nowrap; } .sch-summary span + span::before, .sch-summary b + span::before { content: '·'; margin-right: 1.1rem; margin-left: -.55rem; color: #cfd8e3; }
.sch-summary em { color: #98a2b3; font-style: normal; }
button.sch-edit, button.sch-edit:hover { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .65rem; border: 1px solid transparent; border-radius: 8px; background: none; box-shadow: none; color: var(--brand); font-size: .82rem; font-weight: 560; }
button.sch-edit:hover, button.sch-edit[aria-expanded="true"] { border-color: #dce4ee; background: #f7f8ff; }
button.sch-edit[hidden] { display: none; }
button.sch-edit svg { width: .9rem; height: .9rem; }
.sch-editor { display: grid; gap: .8rem; padding: .85rem .9rem 1rem; border-top: 1px solid #edf2f7; }
.sch-editor[hidden] { display: none; }
.sch-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem 1rem; }
.sch-fields.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 26rem; }
.sch-fields[hidden] { display: none; }
.sch-fields label { display: grid; gap: .3rem; margin: 0; }
.sch-fields label > span { color: #475569; font-size: .78rem; font-weight: 540; }
.sch-fields select { width: 100%; max-width: none; height: 2.4rem; border-color: #e4eaf1; border-radius: 10px; box-shadow: none; font-size: .875rem; font-variant-numeric: tabular-nums; }
.sch-break { display: grid; gap: .6rem; padding-top: .75rem; border-top: 1px dashed #e4eaf1; }
.sch-switch.small i { width: 2.1rem; height: 1.25rem; } .sch-switch.small i::after { width: .95rem; height: .95rem; }
.sch-switch.small input:checked + i::after { transform: translateX(.85rem); }
.sch-switch.small > span { color: #475569; font-size: .84rem; font-weight: 540; }
.sch-foot { border-radius: 0 0 14px 14px; }
.sch-note { margin-right: auto; color: #667085; font-size: .78rem; line-height: 1.45; }
.sch-dirty { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border: 1px solid #f3e2bd; border-radius: 999px; background: #fff7e8; color: #9a6700; font-size: .74rem; font-weight: 560; white-space: nowrap; }
.sch-dirty[hidden] { display: none; } .sch-dirty i { width: .4rem; height: .4rem; border-radius: 50%; background: #c28a2e; }
.sch-foot button[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.sch-under { max-width: 62rem; margin: -.4rem 0 1.1rem; }
.sch-block-list { margin: 0; padding: 0; list-style: none; }
.sch-block-list li { display: grid; grid-template-columns: 15rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .7rem 1.3rem; border-bottom: 1px solid #edf2f7; }
.sch-block-list li:last-child { border-bottom: 0; }
.sch-block-list form { margin: 0; }
.sch-block-when { display: grid; gap: .1rem; } .sch-block-when strong { color: #1b2430; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; } .sch-block-when span { color: #667085; font-size: .8rem; }
.sch-block-what { display: grid; gap: .1rem; min-width: 0; } .sch-block-what span { color: #344054; font-size: .86rem; } .sch-block-what small { color: #667085; font-size: .76rem; }
.sch-new { max-width: 62rem; }
@media (max-width: 760px) {
  .sch-row { grid-template-columns: minmax(0, 1fr) auto; } .sch-summary { grid-column: 1 / -1; grid-row: 2; padding-bottom: .4rem; }
  .sch-fields, .sch-fields.two { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .sch-controls, .sch-controls label { width: 100%; } .sch-controls select { width: 100%; }
  .sch-block-list li { grid-template-columns: minmax(0, 1fr) auto; } .sch-block-what { grid-column: 1 / -1; grid-row: 2; }
  .sch-days { padding: .8rem; } .sch-foot { flex-wrap: wrap; } .sch-note { flex-basis: 100%; }
}

/* Bloqueos: citas que siguen agendadas dentro del bloqueo */
.sch-affected { grid-column: 1 / -1; margin: .1rem 0 .2rem; border: 1px solid #f3e2bd; border-radius: 10px; background: #fffaf0; }
.sch-affected summary { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .6rem .8rem; cursor: pointer; list-style: none; color: #6b5a2e; font-size: .84rem; }
.sch-affected summary::-webkit-details-marker { display: none; }
.sch-affected summary svg { flex: none; width: 1rem; height: 1rem; color: #c28a2e; }
.sch-affected summary strong { color: #7a5200; font-weight: 600; } .sch-affected summary span { color: #8a7440; font-size: .8rem; }
.sch-affected ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid #f3e2bd; }
.sch-block-list .sch-affected li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 8rem auto; gap: .8rem; padding: .5rem .8rem; border-bottom: 1px solid #f6ead0; font-size: .84rem; }
.sch-block-list .sch-affected li:last-child { border-bottom: 0; }
.sch-affected .when { color: #1b2430; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sch-affected .who { color: #1b2430; min-width: 0; } .sch-affected .who small { color: #667085; font-size: .78rem; margin-left: .3rem; white-space: nowrap; }
.sch-affected .where { color: #667085; font-size: .8rem; }
.sch-affected .go { display: flex; gap: .9rem; font-size: .82rem; font-weight: 540; white-space: nowrap; }
.sch-head h3 .hist-state { margin-left: .4rem; vertical-align: .1rem; font-size: .72rem; }
@media (max-width: 760px) { .sch-block-list .sch-affected li { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }

/* Agenda: cita por atender que quedó dentro de un bloqueo del doctor */
.cal-appt.in-block > summary { box-shadow: inset 0 0 0 1.5px #c28a2e; }
.in-block-mark { position: absolute; top: -.35rem; right: -.35rem; z-index: 2; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: #c28a2e; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; box-shadow: 0 0 0 2px #fff; }
.cal-pop p.cal-blocked { display: flex; align-items: flex-start; gap: .45rem; margin: .1rem 0 .6rem; padding: .55rem .65rem; border: 1px solid #f3e2bd; border-radius: 9px; background: #fffaf0; color: #6b5a2e; font-size: .8rem; line-height: 1.45; }
.cal-pop p.cal-blocked svg { flex: none; width: .95rem; height: .95rem; margin-top: .1rem; color: #c28a2e; }
.cal-pop p.cal-blocked strong { display: block; color: #7a5200; font-size: .8rem; font-weight: 600; }
.cal-pop p.cal-blocked a { font-weight: 600; white-space: nowrap; }

/* Agenda: ventana de la cita (ancho, ajuste al espacio) y aviso de bloqueo */
.cal-pop { box-sizing: border-box; width: 21.5rem; max-width: calc(100vw - 1.5rem); padding: 1rem; overflow-wrap: anywhere; white-space: normal; }
.cal-pop > p:first-child strong { display: inline; white-space: normal; text-transform: none; }
.cal-pop textarea { width: 100%; max-width: none; box-sizing: border-box; }
.cal-pop .links { flex-wrap: wrap; gap: .4rem .9rem; }
/* Hacia dónde se abre lo decide app.js según el espacio; estas clases solo lo aplican. */
.cal-appt .cal-pop.to-left { left: auto; right: 0; }
.cal-appt .cal-pop.to-right { left: 0; right: auto; }
.cal-appt .cal-pop.to-up { top: auto; bottom: calc(100% + 4px); }
.cal-appt .cal-pop.scrolls { overflow-y: auto; overscroll-behavior: contain; }
.cal-pop .cal-blocked { box-sizing: border-box; display: flex; align-items: flex-start; gap: 8px; width: 100%; margin: 0 0 .7rem; padding: 12px; border: 1px solid #e8c990; border-radius: 10px; background: #fffaf0; }
.cal-pop .cal-blocked > svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .1rem; color: #b7791f; }
.cal-pop .cal-blocked > div { display: grid; gap: 8px; flex: 1 1 0; min-width: 0; }
.cal-pop .cal-blocked strong { display: block; color: #1b2430; font-size: .86rem; font-weight: 620; line-height: 1.3; text-transform: none; white-space: normal; overflow: visible; }
.cal-pop .cal-blocked span { display: block; color: #667085; font-size: .8rem; line-height: 1.45; white-space: normal; overflow: visible; }
a.cal-blocked-move, a.cal-blocked-move:hover { justify-self: start; display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .7rem; border: 1px solid #e8c990; border-radius: 8px; background: #fff; color: var(--brand-deep); font-size: .8rem; font-weight: 600; white-space: nowrap; }
a.cal-blocked-move:hover { background: #fff6e3; text-decoration: none; }
a.cal-blocked-move svg { width: .9rem; height: .9rem; color: #b7791f; }
/* Lo de la ventana no hereda el recorte en una línea de los bloques del calendario. */
.cal .cal-appt .cal-pop strong { min-width: 0; padding-right: 0 !important; overflow: visible; text-overflow: clip; white-space: normal; text-decoration: none; }
.cal .cal-appt .cal-pop > p:first-child strong { color: #1b2430; font-size: .95rem; font-weight: 620; line-height: 1.3; }
.cal .cal-col .cal-appt .cal-pop.to-left { left: auto; right: 0; }
.cal .cal-col .cal-appt .cal-pop.to-right { left: 0; right: auto; }
.cal-pop .cal-blocked > div { gap: 6px; }
/* En teléfono la ventana de la cita se abre como hoja inferior, a todo el ancho. */
@media (max-width: 760px) {
  .cal .cal-col .cal-appt .cal-pop, .cal .cal-col .cal-appt .cal-pop.to-left, .cal .cal-col .cal-appt .cal-pop.to-right, .cal .cal-col .cal-appt .cal-pop.to-up {
    position: fixed; z-index: 60; top: auto; right: .75rem; bottom: .75rem; left: .75rem; width: auto; max-width: none; max-height: calc(100dvh - 5rem) !important; overflow-y: auto; box-shadow: 0 -8px 40px rgba(16, 24, 40, .28);
  }
}
.cal .cal-appt .cal-pop .cal-blocked strong { color: #1b2430; font-size: .875rem; font-weight: 620; line-height: 1.3; }
.cal-pop { scroll-margin: 12px; }

/* Horarios · bloqueos programados y citas afectadas (refinamiento) */
.blk-list { display: grid; gap: .6rem; margin: 0; padding: .9rem 1.3rem 1.1rem; list-style: none; }
.blk { border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; }
.blk-main { display: grid; grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .7rem .95rem; }
.blk-main form { margin: 0; }
.blk-when, .blk-what { display: grid; gap: .1rem; min-width: 0; }
.blk-when strong { color: #1b2430; font-size: .9rem; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blk-when span { color: var(--brand-deep); font-size: .8rem; font-weight: 560; font-variant-numeric: tabular-nums; }
.blk-what strong { color: #1b2430; font-size: .88rem; font-weight: 560; }
.blk-what span { color: #667085; font-size: .78rem; }
button.blk-remove, button.blk-remove:hover { height: 2rem; padding: 0 .6rem; border: 0; background: none; box-shadow: none; color: #c53a3a; font-size: .82rem; font-weight: 540; }
button.blk-remove:hover { text-decoration: underline; }
.blk-affected { border-top: 1px solid #edf2f7; }
.blk-affected > summary { display: flex; align-items: flex-start; gap: .6rem; margin: .7rem .95rem; padding: .65rem .8rem; border: 1px solid #e8c990; border-radius: 10px; background: #fffaf0; cursor: pointer; list-style: none; }
.blk-affected > summary::-webkit-details-marker { display: none; }
.blk-affected > summary::after { content: '›'; margin-left: auto; align-self: center; color: #b7791f; font-size: 1.1rem; transition: transform var(--fast) var(--ease); }
.blk-affected[open] > summary::after { transform: rotate(90deg); }
.blk-affected > summary > svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .1rem; color: #b7791f; }
.blk-affected > summary > span { display: grid; gap: .1rem; min-width: 0; }
.blk-affected > summary strong { color: #1b2430; font-size: .88rem; font-weight: 620; }
.blk-affected > summary strong em { color: #667085; font-style: normal; font-weight: 450; font-variant-numeric: tabular-nums; }
.blk-affected > summary small { color: #667085; font-size: .78rem; line-height: 1.45; }
.blk-affected > summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
table.blk-table { width: 100%; min-width: 34rem; table-layout: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; font-size: .86rem; }
.blk-table th, .blk-table td { padding: .5rem .7rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; text-align: left; }
.blk-table th:first-child, .blk-table td:first-child { padding-left: .95rem; } .blk-table th:last-child, .blk-table td:last-child { padding-right: .95rem; }
.blk-table thead th { padding-top: .45rem; padding-bottom: .45rem; background: #f8fafc; border-top: 1px solid #edf2f7; color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.blk-table tbody tr { height: 3.4rem; }
.blk-table tbody tr:last-child td { border-bottom: 0; }
.blk-table tbody tr:hover > td { background: #f8fafc; }
.blk-time, .blk-date { width: 1%; color: #1b2430; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.blk-date { color: #475569; font-weight: 540; }
.blk-patient { width: 55%; }
.blk-patient strong { display: block; color: #1b2430; font-weight: 560; }
.blk-patient small { display: block; color: #667085; font-size: .76rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.blk-branch { color: #667085; white-space: nowrap; }
.blk-table td.blk-act { width: 1%; overflow: visible; text-align: right; white-space: nowrap; }
.blk-act > * { vertical-align: middle; }
a.button.blk-move, a.button.blk-move:hover { display: inline-flex; align-items: center; gap: .4rem; height: 2.05rem; padding: 0 .65rem; border: 1px solid #bcc2f0; border-radius: 9px; background: #fff; box-shadow: none; color: var(--brand-deep); font-size: .8rem; font-weight: 560; }
a.button.blk-move:hover { background: #f7f8ff; text-decoration: none; } a.button.blk-move svg { width: .9rem; height: .9rem; }
.blk-act details.bud-menu { display: inline-block; margin-left: .2rem; text-align: left; }
.blk-act details.bud-menu summary { width: 2.1rem; height: 2.1rem; border-radius: 9px; color: #667085; }
.blk-act details.bud-menu summary:hover, .blk-act details.bud-menu[open] summary { border-color: transparent; background: #eaf0f7; color: var(--brand-deep); }
.blk-act .menu-pop { right: 0; left: auto; }
.blk-table tbody tr:nth-last-child(-n+2):not(:nth-child(-n+2)) .menu-pop { top: auto; bottom: calc(100% + 4px); }
.blk .pat-scroll { border-radius: 0 0 12px 12px; }
@media (max-width: 760px) {
  .blk-list { padding: .8rem; }
  .blk-main { grid-template-columns: minmax(0, 1fr) auto; } .blk-what { grid-column: 1 / -1; grid-row: 2; }
  table.blk-table { min-width: 0; } .blk-table thead { display: none; }
  .blk-table, .blk-table tbody { display: block; }
  .blk-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .8rem; height: auto; padding: .7rem .95rem; border-bottom: 1px solid #edf2f7; }
  .blk-table td, .blk-table td:first-child, .blk-table td:last-child { display: block; width: auto; padding: 0; border: 0; background: none !important; }
  .blk-table td.blk-branch { grid-column: 2; font-size: .8rem; } .blk-table td.blk-date { grid-column: 1 / -1; }
  .blk-table td.blk-act { grid-column: 1 / -1; text-align: left; margin-top: .3rem; }
}

button.blk-remove, button.blk-remove:hover { display: inline-flex; align-items: center; gap: .4rem; height: 2.05rem; padding: 0 .7rem; border: 1px solid #e4eaf1; border-radius: 8px; background: #fff; box-shadow: none; color: #475569; font-size: .8rem; font-weight: 540; text-decoration: none; }
button.blk-remove svg { width: .9rem; height: .9rem; color: #98a2b3; }
button.blk-remove:hover { border-color: #f3c7c7; background: #fdf3f3; color: #c53a3a; text-decoration: none; }
button.blk-remove:hover svg { color: #c53a3a; }
button.blk-remove:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
.blk .blk-main form button.blk-remove, .blk .blk-main form button.blk-remove:hover { border: 1px solid #e4eaf1; background: #fff; background-image: none; box-shadow: none; color: #475569; }
.blk .blk-main form button.blk-remove:hover { border-color: #f3c7c7; background: #fdf3f3; color: #c53a3a; }
.blk .blk-main form button.outline.blk-remove, .blk .blk-main form button.outline.blk-remove:hover { height: 2.05rem; padding: 0 .7rem; border: 1px solid #e4eaf1; border-radius: 8px; background: #fff; box-shadow: none; color: #475569; font-size: .8rem; font-weight: 540; }
.blk .blk-main form button.outline.blk-remove:hover { border-color: #f3c7c7; background: #fdf3f3; color: #c53a3a; }

/* Liquidación: menú de descarga con los dos documentos */
.std-pdf { position: relative; display: inline-block; }
.std-pdf > summary { list-style: none; cursor: pointer; } .std-pdf > summary::-webkit-details-marker { display: none; }
.std-pdf > summary::after { content: '▾'; margin-left: .35rem; font-size: .7rem; opacity: .7; }
.std-pdf .menu-pop { left: 0; right: auto; min-width: 18.5rem; padding: .35rem; }
.std-pdf .menu-pop a { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .65rem; border-radius: 8px; color: #1b2430; }
.std-pdf .menu-pop a:hover { background: var(--blue-soft); text-decoration: none; }
.std-pdf .menu-pop a svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; color: var(--brand-deep); }
.std-pdf .menu-pop a span { display: grid; gap: .05rem; }
.std-pdf .menu-pop a strong { font-size: .86rem; font-weight: 600; }
.std-pdf .menu-pop a small { color: #667085; font-size: .76rem; }
.std-pdf > summary.button, .std-pdf > summary.button:hover { display: flex; align-items: center; gap: .4rem; height: 2.35rem; padding: .52rem .95rem; border: 1px solid #dce4ee; border-radius: 10px; background: #fff; color: var(--brand-deep); font-size: .85rem; font-weight: 560; }
.std-pdf > summary.button:hover, .std-pdf[open] > summary.button { background: #f7f8ff; border-color: #bcc2f0; }
.std-pdf > summary.button svg { width: 1rem; height: 1rem; }

/* Prestaciones · catálogo (etapa 6.1) */
.svc-head h1 { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.svc-count { padding: .12rem .6rem; border: 1px solid #e4eaf1; border-radius: 999px; background: #fff; color: #667085; font-size: .78rem; font-weight: 560; letter-spacing: 0; }
.svc-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.svc-card { margin-bottom: .9rem; padding: 0; }
.svc-bar { display: flex; align-items: flex-end; gap: .7rem .8rem; flex-wrap: wrap; margin: 0; max-width: none; padding: .95rem 1.15rem; border-bottom: 1px solid #edf2f7; }
.svc-bar label { display: grid; gap: .25rem; margin: 0; }
.svc-schedule > span { color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.svc-bar select { height: 2.4rem; min-width: 11rem; max-width: 16rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; font-size: .875rem; }
.svc-schedule select { min-width: 14rem; border-color: #bcc2f0; color: var(--brand-deep); font-weight: 560; }
.svc-manage { align-self: center; margin: 1rem .6rem 0 -.1rem; font-size: .82rem; font-weight: 540; white-space: nowrap; }
.svc-search { flex: 1 1 15rem; max-width: 22rem; margin-left: auto !important; }
.svc-bar .bud-clear { align-self: center; margin-top: 1rem; }
.svc-note { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .6rem 1.15rem; border-bottom: 1px solid #edf2f7; background: #f8fafc; color: #667085; font-size: .8rem; line-height: 1.5; }
.svc-note svg { flex: none; width: .95rem; height: .95rem; margin-top: .15rem; color: #94a3b8; } .svc-note strong { color: var(--brand-deep); font-weight: 600; }
table.svc-table { position: relative; width: 100%; min-width: 52rem; table-layout: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .86rem; }
.svc-table th, .svc-table td { padding: .65rem .85rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; text-align: left; }
.svc-table th:first-child, .svc-table td:first-child { padding-left: 1.15rem; } .svc-table th:last-child, .svc-table td:last-child { padding-right: .9rem; }
.svc-table thead th { height: 2.7rem; padding-top: 0; padding-bottom: 0; background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.svc-table thead th a { color: inherit; } .svc-table thead th a:hover { color: var(--brand-deep); text-decoration: none; }
.svc-table thead th a::after { content: '↕'; margin-left: .3rem; opacity: .35; font-size: .75rem; }
.svc-table thead th[aria-sort="ascending"] a::after { content: '↑'; opacity: 1; } .svc-table thead th[aria-sort="descending"] a::after { content: '↓'; opacity: 1; }
.svc-table thead th[aria-sort="ascending"] a, .svc-table thead th[aria-sort="descending"] a { color: var(--brand-deep); }
.svc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.svc-table tbody tr { height: 3.7rem; }
.svc-table tbody tr:hover > td { background: #f8fafc; }
.svc-table tbody tr:last-child td { border-bottom: 0; }
.svc-code { width: 1%; color: #667085; font-size: .8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.svc-code small { display: block; color: #98a2b3; font-size: .72rem; }
.svc-name { min-width: 15rem; }
.svc-name strong { display: -webkit-box; overflow: hidden; color: #1b2430; font-size: .9rem; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.svc-cat { color: #344054; white-space: nowrap; }
.svc-type { color: #667085; font-size: .82rem; white-space: nowrap; }
.svc-price { width: 1%; white-space: nowrap; }
.svc-price strong { color: #1b2430; font-size: .95rem; font-weight: 650; }
.svc-noprice { color: #9a6700; font-size: .82rem; font-weight: 560; } .svc-price small { display: block; color: #98a2b3; font-size: .74rem; }
.svc-state { width: 1%; white-space: nowrap; }
.svc-table td.svc-act { width: 1%; overflow: visible; text-align: right; }
.svc-table tr.off .svc-name strong, .svc-table tr.off .svc-price strong, .svc-table tr.off td { color: #98a2b3; }
.svc-act details.bud-menu summary { width: 2.25rem; height: 2.25rem; border-radius: 9px; color: #667085; }
.svc-act details.bud-menu summary:hover, .svc-act details.bud-menu[open] summary { border-color: transparent; background: #eaf0f7; color: var(--brand-deep); }
.svc-act details.bud-menu summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .6); outline-offset: 2px; box-shadow: none; }
.svc-act .menu-pop { right: 0; left: auto; min-width: 13.5rem; }
.svc-act .menu-pop form { margin: 0; }
.svc-act .menu-pop button.link, .svc-act .menu-pop button.link:hover { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1b2430; font-size: .85rem; font-weight: 450; text-align: left; }
.svc-act .menu-pop button.link:hover { background: var(--blue-soft); color: var(--blue-deep); }
.svc-act .menu-pop form.svc-danger { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid #edf2f7; }
.svc-act .menu-pop button.link.danger, .svc-act .menu-pop button.link.danger:hover { color: #c53a3a; } .svc-act .menu-pop button.link.danger:hover { background: #fdf3f3; }
.svc-table tbody tr:nth-last-child(-n+3):not(:nth-child(-n+4)) .menu-pop { top: auto; bottom: calc(100% + 4px); }
.svc-foot { gap: .8rem 1.4rem; flex-wrap: wrap; }
.svc-size { margin: 0 0 0 auto; } .svc-size label { display: flex; align-items: center; gap: .5rem; margin: 0; color: #667085; font-size: .82rem; }
.svc-size select { height: 2.1rem; min-width: 4.4rem; border-color: #dce4ee; box-shadow: none; }
.svc-under { margin: 0 0 1rem; }
dialog.svc-price-dialog { width: min(26rem, calc(100vw - 2rem)); padding: 1.4rem 1.5rem; border: 1px solid #e4eaf1; background: #fff; }
dialog.svc-price-dialog:not([open]) { display: none; }
dialog.svc-price-dialog form { display: grid; gap: .8rem; margin: 0; max-width: none; }
dialog.svc-price-dialog h2 { margin: 0; color: #1b2430; font-size: 1.05rem; font-weight: 620; }
dialog.svc-price-dialog p { margin: 0; font-size: .84rem; }
.svc-price-what { display: grid !important; gap: .1rem; } .svc-price-what strong { color: #1b2430; font-size: .92rem; font-weight: 600; } .svc-price-what span { color: #667085; font-size: .8rem; }
dialog.svc-price-dialog label { display: grid; gap: .3rem; margin: 0; } dialog.svc-price-dialog label > span:first-child { color: #475569; font-size: .8rem; font-weight: 540; }
.svc-price-field { position: relative; display: block; }
.svc-price-field b { position: absolute; top: 50%; left: .8rem; transform: translateY(-50%); color: #98a2b3; font-weight: 500; }
.svc-price-field input { width: 100%; max-width: none; height: 2.7rem; padding: 0 .8rem 0 1.6rem; border: 1px solid #dce4ee; border-radius: 10px; box-shadow: none; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
dialog.svc-price-dialog p.svc-price-help { color: #667085; font-size: .78rem; line-height: 1.5; }
dialog.svc-price-dialog div.svc-price-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .3rem; }
.svc-price-actions button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .svc-search { margin-left: 0 !important; max-width: none; flex-basis: 100%; } .svc-manage { margin-top: 0; } }
@media (max-width: 760px) {
  .svc-actions { width: 100%; } .svc-actions .button { flex: 1 1 auto; justify-content: center; }
  .svc-bar select, .svc-bar label { width: 100%; max-width: none; }
  table.svc-table { min-width: 0; } .svc-table thead { display: none; }
  .svc-table, .svc-table tbody { display: block; }
  .svc-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; height: auto; padding: .8rem 3rem .8rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .svc-table td, .svc-table td:first-child, .svc-table td:last-child { display: block; width: auto; padding: 0; border: 0; background: none !important; text-align: left; white-space: normal; }
  .svc-table td.svc-code { grid-column: 1; grid-row: 1; } .svc-code small { display: inline; margin-left: .4rem; }
  .svc-table td.svc-state { grid-column: 2; grid-row: 1; }
  .svc-table td.svc-name { grid-column: 1 / -1; min-width: 0; }
  .svc-table td.svc-cat, .svc-table td.svc-type { grid-column: 1; font-size: .8rem; color: #667085; }
  .svc-table td.svc-price { grid-column: 2; grid-row: 3 / span 2; align-self: center; text-align: right; }
  .svc-table td.svc-act { position: absolute; top: .55rem; right: .5rem; }
  .svc-size { margin-left: 0; }
}

.svc-schedule { display: grid; gap: .25rem; }
.svc-schedule > span { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.svc-schedule > span label { margin: 0; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.svc-schedule > span a { font-size: .76rem; font-weight: 540; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.svc-schedule select { min-width: 17rem; }
.svc-bar .svc-select select { min-width: 10rem; }
.svc-search { max-width: 19rem; }
@media (min-width: 1100px) { .svc-head { flex-wrap: nowrap; align-items: flex-start; } .svc-actions { flex-wrap: nowrap; flex: none; } }
@media (max-width: 760px) { .svc-schedule { width: 100%; } .svc-schedule select { min-width: 0; width: 100%; } }
.svc-schedule select { min-width: 15rem; }
.svc-bar .svc-select select { min-width: 0; }
.svc-bar .svc-search { flex: 1 1 11rem; max-width: 17rem; }

/* Aranceles · listas de precios (etapa 6.2) */
.svc-actions button.fs-new, .svc-actions button.fs-new:hover { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1.05rem; border: 1px solid var(--brand-strong); border-radius: 10px; background: var(--brand); box-shadow: none; color: #fff; font-size: .875rem; font-weight: 600; }
.svc-actions button.fs-new:hover { background: var(--brand-strong); }
.fs-info { margin: 0 0 .9rem; max-width: 62rem; }
table.fs-table { position: relative; width: 100%; min-width: 44rem; table-layout: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; font-size: .88rem; }
.fs-table th, .fs-table td { padding: .7rem 1rem; vertical-align: middle; border-bottom: 1px solid #edf2f7; text-align: left; }
.fs-table th:first-child, .fs-table td:first-child { padding-left: 1.15rem; } .fs-table th:last-child, .fs-table td:last-child { padding-right: .9rem; }
.fs-table thead th { height: 2.75rem; padding-top: 0; padding-bottom: 0; background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.fs-table thead th[title] { cursor: help; }
.fs-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fs-table tbody tr { height: 4rem; }
.fs-table tbody tr:hover > td { background: #f8fafc; }
.fs-table tbody tr:last-child td { border-bottom: 0; }
.fs-name { min-width: 15rem; }
.fs-name a { display: -webkit-box; overflow: hidden; color: #1b2430; font-size: .92rem; font-weight: 600; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fs-name a:hover { color: var(--brand); text-decoration: none; }
.fs-name small { display: block; margin-top: .1rem; color: #667085; font-size: .76rem; }
.fs-prices { white-space: nowrap; color: #667085; font-size: .84rem; }
.fs-prices strong { color: #1b2430; font-size: .95rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.fs-budgets { width: 1%; color: #1b2430; font-weight: 560; }
.fs-state { width: 1%; white-space: nowrap; }
.fs-table td.fs-act { width: 1%; overflow: visible; text-align: right; }
.fs-table tr.off .fs-name a, .fs-table tr.off .fs-prices strong, .fs-table tr.off td { color: #98a2b3; }
.fs-act details.bud-menu summary { width: 2.25rem; height: 2.25rem; border-radius: 9px; color: #667085; }
.fs-act details.bud-menu summary:hover, .fs-act details.bud-menu[open] summary { border-color: transparent; background: #eaf0f7; color: var(--brand-deep); }
.fs-act details.bud-menu summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .6); outline-offset: 2px; box-shadow: none; }
.fs-act .menu-pop { right: 0; left: auto; min-width: 13rem; }
.fs-act .menu-pop form { margin: 0; }
.fs-act .menu-pop form.fs-sep { margin-top: .3rem; padding-top: .3rem; border-top: 1px solid #edf2f7; }
.fs-act .menu-pop button.link, .fs-act .menu-pop button.link:hover { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #1b2430; font-size: .85rem; font-weight: 450; text-align: left; }
.fs-act .menu-pop button.link:hover { background: var(--blue-soft); color: var(--blue-deep); }
.fs-act .menu-pop button.link.danger, .fs-act .menu-pop button.link.danger:hover { color: #c53a3a; } .fs-act .menu-pop button.link.danger:hover { background: #fdf3f3; }
.fs-table tbody tr:nth-last-child(-n+3):not(:nth-child(-n+3)) .menu-pop { top: auto; bottom: calc(100% + 4px); }
dialog.fs-dialog { width: min(31rem, calc(100vw - 2rem)); padding: 1.5rem 1.6rem; border: 1px solid #e4eaf1; background: #fff; }
dialog.fs-dialog:not([open]) { display: none; }
dialog.fs-dialog form { display: grid; gap: .9rem; margin: 0; max-width: none; }
dialog.fs-dialog h2 { margin: 0; color: #1b2430; font-size: 1.1rem; font-weight: 620; }
dialog.fs-dialog p { margin: 0; }
dialog.fs-dialog p.fs-dialog-lead { margin-top: -.6rem; color: #667085; font-size: .86rem; }
dialog.fs-dialog label { display: grid; gap: .3rem; margin: 0; }
dialog.fs-dialog label > span { color: #475569; font-size: .8rem; font-weight: 540; } dialog.fs-dialog .req { color: #c53a3a; }
dialog.fs-dialog input, dialog.fs-dialog select { width: 100%; max-width: none; height: 2.6rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
dialog.fs-dialog input[aria-invalid="true"] { border-color: #d14343; }
dialog.fs-dialog p.fs-dialog-help { color: #667085; font-size: .78rem; line-height: 1.5; }
dialog.fs-dialog div.fs-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .3rem; }
.fs-dialog-actions button.success[aria-disabled="true"] { opacity: .6; pointer-events: none; }
@media (max-width: 760px) {
  table.fs-table { min-width: 0; } .fs-table thead { display: none; }
  .fs-table, .fs-table tbody { display: block; }
  .fs-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; height: auto; padding: .85rem 3rem .85rem 1.15rem; border-bottom: 1px solid #edf2f7; }
  .fs-table td, .fs-table td:first-child, .fs-table td:last-child { display: block; width: auto; padding: 0; border: 0; background: none !important; text-align: left; white-space: normal; }
  .fs-table td.fs-name { grid-column: 1; min-width: 0; } .fs-table td.fs-state { grid-column: 2; grid-row: 1; }
  .fs-table td.fs-prices { grid-column: 1 / -1; }
  .fs-table td.fs-budgets { grid-column: 1 / -1; font-size: .82rem; font-weight: 450; color: #667085; }
  .fs-table td.fs-budgets::before { content: 'Presupuestos: '; }
  .fs-table td.fs-act { position: absolute; top: .6rem; right: .5rem; }
}

/* Menú de una fila dentro de una tabla (app.js): mientras está abierto, la tabla y su contenedor dejan
   de recortar lo que sobresale, para que las opciones se vean completas en las últimas filas.
   Si el contenedor está desplazado hacia el lado, el menú se ancla a la ventana. */
[data-unclip] { overflow: visible !important; }
.menu-pop[data-floating] { position: fixed !important; z-index: 60; margin: 0; }

/* Sucursales (etapa 6.4): el listado reutiliza la tabla de Aranceles (.fs-) y el formulario, los bloques
   de Convenios (.agr-). Aquí solo va lo propio. */
.svc-actions a.brn-new, .svc-actions a.brn-new:hover { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1.05rem; border: 1px solid var(--brand-strong); border-radius: 10px; background: var(--brand); box-shadow: none; color: #fff; font-size: .875rem; font-weight: 600; text-decoration: none; }
.svc-actions a.brn-new:hover { background: var(--brand-strong); }
.svc-actions a.brn-new svg { width: 1rem; height: 1rem; }
table.brn-table { min-width: 56rem; }
.brn-table td { color: #344054; }
.brn-table .brn-name { min-width: 12rem; }
.brn-table .brn-tax { white-space: nowrap; font-variant-numeric: tabular-nums; }
.brn-table .brn-place span, .brn-table .brn-contact span { display: block; color: #1b2430; }
.brn-table .brn-place small, .brn-table .brn-contact small { display: block; margin-top: .1rem; color: #667085; font-size: .76rem; }
.brn-table .brn-contact { white-space: nowrap; font-variant-numeric: tabular-nums; }
.brn-table .brn-chairs { width: 1%; color: #1b2430; font-weight: 600; }
.brn-table tr.off .brn-place span, .brn-table tr.off .brn-contact span { color: #98a2b3; }
.brn-table .fs-act .menu-pop a { display: flex; align-items: center; gap: .6rem; }
.brn-info { margin: .9rem 0 0; }
.brn-form .agr-fields small[data-rut-status] { color: #667085; font-size: .76rem; }
.brn-form .agr-save button.success[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.brn-chairs-card { margin-top: 1.25rem; }
.brn-chairs-head { padding: 1.1rem 1.35rem .9rem; border-bottom: 1px solid #edf2f7; }
.brn-chairs-head h2 { margin: 0; color: #1b2430; font-size: 1rem; font-weight: 620; }
.brn-chairs-head p { margin: .25rem 0 0; color: #667085; font-size: .84rem; }
table.brn-chair-table { min-width: 0; }
.brn-chair-table tbody tr { height: 3.25rem; }
.brn-chair-table .fs-name span { color: #1b2430; font-weight: 600; }
.brn-chair-table tr.off .fs-name span { color: #98a2b3; }
.brn-chair-table .fs-act form { margin: 0; justify-content: flex-end; }
@media (max-width: 760px) {
  table.brn-table { min-width: 0; }
  .brn-table td.brn-tax, .brn-table td.brn-place, .brn-table td.brn-contact, .brn-table td.brn-chairs { grid-column: 1 / -1; font-size: .84rem; }
  .brn-table td.brn-place span, .brn-table td.brn-place small, .brn-table td.brn-contact span, .brn-table td.brn-contact small { display: inline; font-size: inherit; }
  .brn-table td.brn-place small::before, .brn-table td.brn-contact small::before { content: ' · '; }
  .brn-table td.brn-tax::before, .brn-table td.brn-chairs::before { content: attr(data-label) ': '; color: #667085; font-weight: 450; }
  .brn-table td.brn-chairs { width: auto; text-align: left; }
  .brn-chair-table tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; padding-right: 1.15rem; }
  .brn-chair-table td.fs-state { grid-column: 2; } .brn-chair-table td.fs-act { position: static; grid-column: 3; }
  .brn-form .agr-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Clínica y sucursales: la identidad de la clínica arriba y sus sucursales debajo, en una sola pantalla. */
form.cli-card { margin: 0 0 1.6rem; max-width: none; }
.cli-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem 2rem; align-items: start; }
.cli-label { display: block; margin-bottom: .35rem; color: #475569; font-size: .8rem; font-weight: 540; }
.cli-logo-row { display: flex; align-items: center; gap: 1rem; }
.cli-preview { flex: none; display: grid; place-items: center; width: 5rem; height: 5rem; overflow: hidden; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; }
.cli-preview img { width: 100%; height: 100%; padding: 6px; object-fit: contain; }
.cli-preview img[hidden], .cli-preview-empty[hidden] { display: none; }
.cli-preview-empty { display: grid; justify-items: center; gap: .2rem; width: 100%; height: 100%; align-content: center; background: #f8fafc; color: #98a2b3; }
.cli-preview-empty svg { width: 1.35rem; height: 1.35rem; }
.cli-preview-empty em { font-size: .62rem; font-style: normal; font-weight: 500; letter-spacing: .01em; color: #667085; }
.cli-logo-side { display: grid; gap: .3rem; min-width: 0; }
.cli-logo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.cli-logo-actions button.cli-pick, .cli-logo-actions button.cli-pick:hover { display: inline-flex; align-items: center; gap: .45rem; height: 2.3rem; padding: 0 .85rem; border: 1px solid #d0d9e5; border-radius: 9px; background: #fff; box-shadow: none; color: var(--brand-deep); font-size: .84rem; font-weight: 600; }
.cli-logo-actions button.cli-pick:hover { border-color: var(--brand); background: #f5f9ff; color: var(--brand); }
.cli-logo-actions button.cli-pick svg { width: .95rem; height: .95rem; }
.cli-logo-actions button.link, .cli-logo-actions button.link:hover { padding: 0; border: 0; background: none; box-shadow: none; font-size: .82rem; font-weight: 500; }
.cli-logo-actions button.cli-remove { color: #c53a3a; } .cli-logo-actions button.cli-undo { color: var(--brand); }
.cli-logo-actions button[hidden] { display: none; }
.cli-logo-actions button[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.cli-logo-actions button:focus-visible { outline: 2px solid rgba(79, 70, 229, .6); outline-offset: 2px; }
.cli-logo-side small { color: #667085; font-size: .78rem; line-height: 1.4; }
.cli-logo-side small.cli-pending { color: #9a6a1a; font-weight: 500; }
.cli-logo-side small.cli-error { color: #c53a3a; font-weight: 500; }
.cli-logo-side small[hidden] { display: none; }
input.cli-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
.cli-logo { position: relative; }
.cli-save { display: flex; justify-content: flex-end; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid #edf2f7; }
.cli-save button { height: 2.6rem; padding: 0 1.2rem; }
.cli-save button.success[aria-disabled="true"] { opacity: .6; pointer-events: none; }
/* Documento del presupuesto (vigencia, texto adicional, condiciones propias). */
.cli-doc h2 { margin-bottom: .2rem; }
.cli-doc-intro { margin: 0 0 1rem; color: #667085; font-size: .86rem; line-height: 1.45; }
/* Estado de la evolución mínima (Clínica y sucursales): obligatoria u opcional, en palabras. */
.cli-evo-state { display: flex; align-items: center; gap: .45rem; margin: -.4rem 0 1rem; padding: .5rem .7rem; border-radius: 8px; font-size: .86rem; font-weight: 600; }
.cli-evo-state svg { width: 1rem; height: 1rem; flex: none; }
.cli-evo-state.on { background: #ecfdf5; color: #0f766e; }
.cli-evo-state.off { background: #fffbeb; color: #9a6a1a; }
.cli-doc .agr-fields { align-content: start; }
.cli-doc textarea { width: 100%; max-width: none; resize: vertical; }
.cli-doc input.cli-days { max-width: 10rem; }
.cli-doc small.cli-count { margin-left: .35rem; color: #98a2b3; font-size: .74rem; font-weight: 450; }
.cli-sub { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 0 0 .9rem; }
.cli-sub h2 { display: flex; align-items: center; gap: .6rem; margin: 0; color: #1b2430; font-size: 1.15rem; font-weight: 640; letter-spacing: -.015em; }
.cli-sub p { margin: .2rem 0 0; color: #667085; font-size: .88rem; }
@media (max-width: 760px) {
  .cli-grid { grid-template-columns: minmax(0, 1fr); }
  .cli-sub { flex-direction: column; align-items: stretch; }
  .cli-sub .svc-actions a.brn-new { justify-content: center; }
  .cli-save button { width: 100%; justify-content: center; }
}

/* Identidad de la clínica en el menú lateral: logotipo grande a la izquierda y el nombre a su derecha,
   directamente sobre el azul. Sin logotipo, las iniciales ocupan el mismo recuadro. Encogido el menú,
   queda solo el recuadro, más chico. */
.sidebar .brand { gap: .7rem; align-items: center; padding: .1rem .5rem .1rem .25rem; margin-bottom: .15rem; }
.sidebar .brand-logo, .sidebar .brand-mark { flex: none; width: 4.5rem; height: 4.5rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 13px; background: #fff; box-shadow: 0 1px 3px rgba(8, 24, 54, .22); }
.sidebar .brand-logo { padding: 5px; object-fit: contain; }
.sidebar .brand-mark { display: grid; place-items: center; color: var(--brand-deep); font-size: 1.45rem; font-weight: 680; letter-spacing: -.01em; }
.sidebar .brand-name { gap: .2rem; min-width: 0; }
.sidebar .brand-name small { color: #b6c8e6; font-size: .64rem; font-weight: 650; letter-spacing: .1em; }
.sidebar .brand-name strong { display: -webkit-box; overflow: hidden; color: #fff; font-size: .97rem; font-weight: 620; line-height: 1.22; letter-spacing: -.01em; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
@media (min-width: 761px) {
  .app.slim .sidebar .brand { padding: .1rem 0; }
  .app.slim .sidebar .brand-logo, .app.slim .sidebar .brand-mark { width: 2.75rem; height: 2.75rem; border-radius: 10px; }
  .app.slim .sidebar .brand-logo { padding: 3px; }
  .app.slim .sidebar .brand-mark { font-size: .95rem; }
}
/* Bajo 900 px el menú pasa a ser una barra arriba: ahí el recuadro vuelve a ser chico para no ocupar alto. */
@media (max-width: 900px) {
  .sidebar .brand { margin-bottom: 0; padding-left: 0; }
  .sidebar .brand-logo, .sidebar .brand-mark { width: 2.75rem; height: 2.75rem; border-radius: 10px; }
  .sidebar .brand-logo { padding: 3px; }
  .sidebar .brand-mark { font-size: .95rem; }
  .sidebar .brand-name strong { -webkit-line-clamp: 2; }
}

/* Organizar automáticamente (plan de tratamiento): vista previa de las secciones por categoría clínica. */
button.org-open[disabled] { opacity: .5; cursor: not-allowed; }
dialog.org-dialog { width: min(58rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.5rem 1.6rem; border: 1px solid #e4eaf1; background: #fff; overflow: auto; }
dialog.org-dialog:not([open]) { display: none; }
dialog.org-dialog form { display: grid; gap: .9rem; margin: 0; max-width: none; }
dialog.org-dialog h2 { margin: 0; color: #1b2430; font-size: 1.1rem; font-weight: 620; }
dialog.org-dialog p { margin: 0; }
.org-lead { margin-top: -.6rem !important; color: #667085; font-size: .86rem; }
.org-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0; }
.org-stats div { padding: .6rem .8rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; }
.org-stats dt { color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.org-stats dd { margin: .15rem 0 0; color: #1b2430; font-size: 1.05rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.org-note, .org-safe { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .8rem; border-radius: 10px; font-size: .84rem; line-height: 1.45; }
.org-note svg, .org-safe svg { flex: none; width: 1rem; height: 1rem; margin-top: .12rem; }
.org-note.warn { border: 1px solid #f1dfbd; background: #fffaf0; color: #7a5413; }
.org-note.ok { border: 1px solid #c4e3de; background: #e6f4f0; color: #0b5f58; }
.org-safe { border: 1px solid #e4eaf1; background: #f8fafc; color: #475569; }
.org-compare { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 1.2rem; align-items: start; }
.org-compare h3 { margin: 0 0 .5rem; color: var(--brand-deep); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.org-now, .org-group ul { margin: 0; padding: 0; list-style: none; }
.org-now { border: 1px solid #e4eaf1; border-radius: 10px; }
.org-now li, .org-group header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .7rem; padding: .5rem .8rem; }
.org-now li + li { border-top: 1px solid #edf2f7; }
.org-now span, .org-group header strong { overflow-wrap: anywhere; color: #1b2430; font-size: .88rem; font-weight: 600; }
.org-now small, .org-group header small { color: #667085; font-size: .76rem; white-space: nowrap; }
.org-now b, .org-group b { color: #1b2430; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-next { display: grid; gap: .6rem; max-height: 22rem; overflow: auto; padding-right: .2rem; }
.org-group { border: 1px solid var(--brand-line); border-radius: 10px; overflow: hidden; }
.org-group header { background: #f2f4fd; border-bottom: 1px solid var(--brand-line); }
.org-group header strong { color: var(--brand-deep); }
.org-group li { display: flex; justify-content: space-between; gap: .8rem; padding: .38rem .8rem; color: #344054; font-size: .84rem; }
.org-group li + li { border-top: 1px solid #f1f5f9; }
.org-group li em { color: #667085; font-style: normal; }
.org-group li b { font-weight: 500; color: #475569; }
dialog.org-dialog .fs-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }
dialog.org-dialog .fs-dialog-actions button[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) {
  .org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-compare { grid-template-columns: minmax(0, 1fr); }
  .org-next { max-height: none; }
}
/* La ventana genérica de confirmación pone en fila todos sus bloques y agranda los párrafos: aquí no. */
dialog.org-dialog div.org-compare { display: grid; justify-content: stretch; }
dialog.org-dialog div.org-next { display: grid; justify-content: stretch; }
dialog.org-dialog div.org-group, dialog.org-dialog .org-stats div { display: block; }
dialog.org-dialog p.org-lead { font-size: .86rem; }
dialog.org-dialog p.org-note, dialog.org-dialog p.org-safe { font-size: .84rem; line-height: 1.45; }

/* Centro de pagos del presupuesto (etapa 7.3): ventana amplia con resumen, pestañas, cobro, abonos e historial. */
.payc-brief { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem 1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; }
.payc-brief p { margin: 0; color: #475569; font-size: .9rem; } .payc-brief strong { color: #1b2430; }
dialog.payc { width: min(71rem, calc(100vw - 2rem)); max-width: none; height: min(90vh, 56rem); max-height: 90vh; padding: 0; border: 1px solid #e4eaf1; border-radius: 18px; background: #fff; color: #1b2430; box-shadow: var(--shadow-lg); overflow: hidden; }
dialog.payc[open] { display: flex; flex-direction: column; }
dialog.payc::backdrop { background: rgba(16, 24, 40, .45); }
.payc-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.4rem .8rem; }
.payc-head h2 { margin: 0; font-size: 1.15rem; font-weight: 640; letter-spacing: -.015em; }
.payc-head p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .2rem 0 0; color: #667085; font-size: .86rem; }
button.payc-x, button.payc-x:hover { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 9px; background: none; box-shadow: none; color: #667085; }
button.payc-x:hover { background: #eef2f7; color: var(--brand-deep); } button.payc-x svg { width: 1.05rem; height: 1.05rem; }
.payc-kpis { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0 1.4rem .9rem; }
.payc-kpis div { padding: .55rem .8rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; }
.payc-kpis dt { color: #667085; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.payc-kpis dd { margin: .12rem 0 0; font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.payc-kpis div.on { border-color: #c4e3de; background: #f0f9f7; } .payc-kpis div.on dd { color: #0f766e; }
.payc-kpis div.warn { border-color: #f1dfbd; background: #fffaf0; } .payc-kpis div.warn dd { color: #9a6a1a; }
.payc-tabs { flex: none; display: flex; gap: .2rem; padding: 0 1.4rem; border-bottom: 1px solid #e4eaf1; }
.payc-tabs button, .payc-tabs button:hover { padding: .65rem .9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; color: #667085; font-size: .9rem; font-weight: 560; }
.payc-tabs button:hover { color: var(--brand-deep); }
.payc-tabs button[aria-selected="true"] { border-bottom-color: var(--brand); color: var(--brand-deep); }
.payc-tabs button b { margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: #eef2f7; color: #475569; font-size: .72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.payc-tabs button:focus-visible { outline: 2px solid rgba(79, 70, 229, .6); outline-offset: -2px; }
.payc-panel { flex: 1; min-height: 0; overflow: auto; padding: 1rem 1.4rem 0; }
.payc-panel[hidden] { display: none; }
.payc-panel form { display: flex; flex-direction: column; gap: .8rem; margin: 0; max-width: none; min-height: 100%; }
.payc-panel h3 { margin: 0; color: var(--brand-deep); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.payc-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem .9rem; }
.payc-fields label { display: grid; gap: .3rem; margin: 0; } .payc-fields label.wide { grid-column: 1 / -1; }
.payc-fields label > span { color: #475569; font-size: .8rem; font-weight: 540; } .payc-fields .req { color: #c53a3a; }
.payc-fields input, .payc-fields select { width: 100%; max-width: none; height: 2.5rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
.payc-fields input[data-pay-amount] { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.payc-when, .payc-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: #667085; font-size: .8rem; line-height: 1.45; }
.payc-when svg { flex: none; width: .9rem; height: .9rem; margin-top: .14rem; }
.payc-note { display: block; }
.payc-assign-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-top: .3rem; }
.payc-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.payc-tools input[type="search"] { width: 15rem; height: 2.2rem; border-color: #dce4ee; border-radius: 9px; box-shadow: none; font-size: .84rem; }
.payc-tools button.outline, .payc-actions button.outline { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; padding: 0 .8rem; font-size: .82rem; }
.payc-tools button.link, .payc-tools button.link:hover { padding: 0; border: 0; background: none; box-shadow: none; color: var(--brand); font-size: .82rem; font-weight: 500; }
.payc-tools button[disabled] { opacity: .5; cursor: not-allowed; }
.payc-scroll { overflow-x: auto; border: 1px solid #e4eaf1; border-radius: 12px; }
table.payc-table { width: 100%; min-width: 46rem; margin: 0; border: 0; border-radius: 0; border-collapse: collapse; box-shadow: none; background: none; font-size: .86rem; overflow: visible; }
.payc-table th { position: sticky; top: 0; z-index: 1; padding: .5rem .7rem; border-bottom: 1px solid #e4eaf1; background: #f8fafc; color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.payc-table td { padding: .45rem .7rem; border-bottom: 1px solid #f1f5f9; background: none; vertical-align: middle; }
.payc-table tbody tr:last-child td { border-bottom: 0; }
.payc-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payc-table td.payc-name { color: #1b2430; font-weight: 560; }
.payc-table td.payc-due { color: #1b2430; font-weight: 600; }
.payc-table tr.off td { color: #98a2b3; } .payc-table tr.off td.payc-name, .payc-table tr.off td.payc-due { color: #98a2b3; font-weight: 450; }
.payc-table tr.off small { color: #98a2b3; font-size: .76rem; }
.payc-table tr.picked td { background: #f4f5ff; }
.payc-table tr[hidden] { display: none; }
.payc-table input[data-pay-part] { width: 7.5rem; height: 2.1rem; border-color: #dce4ee; border-radius: 8px; box-shadow: none; text-align: right; font-variant-numeric: tabular-nums; }
.payc-table input[data-pay-part][aria-invalid="true"] { border-color: #d14343; background: #fff7f7; }
.payc-table input[type="checkbox"] { width: 1rem; height: 1rem; }
.payc-foot { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: auto -1.4rem 0; padding: .8rem 1.4rem; border-top: 1px solid #e4eaf1; background: #fff; }
.payc-sum { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin: 0; }
.payc-sum dt { color: #667085; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.payc-sum dd { margin: .05rem 0 0; font-size: 1rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.payc-sum .free dd { color: #0f766e; }
.payc-problem { flex-basis: 100%; order: 3; margin: 0; color: #c53a3a; font-size: .84rem; font-weight: 500; } .payc-problem[hidden] { display: none; }
.payc-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-left: auto; }
.payc-actions button.success { height: 2.5rem; padding: 0 1.1rem; }
.payc-actions button.success[aria-disabled="true"], .payc-actions button.success[disabled] { opacity: .55; pointer-events: none; }
.payc-error, .payc-done, .payc-empty { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 .8rem; padding: .65rem .85rem; border-radius: 10px; font-size: .86rem; line-height: 1.45; }
.payc-error svg, .payc-done svg, .payc-empty svg { flex: none; width: 1rem; height: 1rem; margin-top: .14rem; }
.payc-error { border: 1px solid #f3c7c7; background: #fff5f5; color: #a02c2c; }
.payc-done { border: 1px solid #c4e3de; background: #e6f4f0; color: #0b5f58; } .payc-done a { color: #0b5f58; font-weight: 600; text-decoration: underline; }
.payc-empty { border: 1px solid #e4eaf1; background: #f8fafc; color: #475569; }
.payc-sources { margin: 0; padding: 0; list-style: none; border: 1px solid #e4eaf1; border-radius: 10px; }
.payc-sources li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem .8rem; color: #475569; font-size: .84rem; } .payc-sources li + li { border-top: 1px solid #f1f5f9; }
.payc-sources b { color: #0f766e; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-pay-panel="abonos"], [data-pay-panel="historial"] { padding-bottom: 1rem; }
[data-pay-panel="abonos"] > * + *, [data-pay-panel="historial"] > * + * { margin-top: .8rem; }
[data-pay-panel="abonos"] form { min-height: 0; } [data-pay-panel="abonos"] .payc-foot { margin-bottom: -1rem; }
.payc-history td.payc-date { white-space: nowrap; color: #475569; }
.payc-history td small { display: block; color: #667085; font-size: .74rem; }
.payc-history tr.refund td { color: #667085; }
.payc-history td.payc-acts { white-space: nowrap; text-align: right; }
.payc-history td.payc-acts button.link, .payc-history td.payc-acts button.link:hover { padding: 0; border: 0; background: none; box-shadow: none; color: var(--brand); font-size: .84rem; font-weight: 500; }
.payc-history td.payc-acts a { margin-left: .8rem; font-size: .84rem; font-weight: 500; }
.payc-table tr.payc-detail > td { padding: .8rem 1rem 1rem; background: #f8fafc; border-bottom: 1px solid #e4eaf1; }
.payc-table tr.payc-detail[hidden] { display: none; }
.payc-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem 1rem; margin: 0 0 .7rem; }
.payc-facts .wide { grid-column: 1 / -1; }
.payc-facts dt { color: #667085; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.payc-facts dd { margin: .1rem 0 0; color: #1b2430; font-size: .86rem; font-weight: 560; }
table.payc-mini { width: 100%; margin: 0 0 .6rem; border: 1px solid #e4eaf1; border-radius: 8px; border-collapse: separate; border-spacing: 0; background: #fff; box-shadow: none; font-size: .84rem; overflow: hidden; }
.payc-mini th { position: static; padding: .4rem .7rem; background: #fff; } .payc-mini td { padding: .4rem .7rem; }
.payc-line { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: .4rem 0 0; color: #667085; font-size: .84rem; } .payc-line b { color: #1b2430; font-variant-numeric: tabular-nums; }
form.payc-refund { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; min-height: 0; margin: .7rem 0 0; padding-top: .7rem; border-top: 1px dashed #dce4ee; color: #475569; font-size: .84rem; }
form.payc-refund input, form.payc-refund select { width: auto; height: 2.1rem; border-color: #dce4ee; border-radius: 8px; box-shadow: none; }
form.payc-refund button.link.danger, form.payc-refund button.link.danger:hover { padding: 0; border: 0; background: none; box-shadow: none; color: #c53a3a; font-weight: 600; }
.payc-later-title { margin-top: 1.2rem !important; }
.payc-later { margin: 0; padding: 0; list-style: none; border: 1px solid #e4eaf1; border-radius: 10px; }
.payc-later li { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto 9rem; gap: .8rem; padding: .45rem .8rem; color: #475569; font-size: .84rem; } .payc-later li + li { border-top: 1px solid #f1f5f9; }
.payc-later b { font-variant-numeric: tabular-nums; color: #1b2430; } .payc-later small { color: #667085; text-align: right; }
@media (max-width: 900px) {
  .payc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .payc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  dialog.payc { width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .payc-head, .payc-kpis, .payc-tabs { padding-left: 1rem; padding-right: 1rem; }
  .payc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; } .payc-kpis div { padding: .4rem .6rem; } .payc-kpis dd { font-size: .92rem; }
  .payc-tabs { overflow-x: auto; } .payc-tabs button { white-space: nowrap; padding: .6rem .7rem; }
  .payc-panel { padding: .8rem 1rem 0; } .payc-foot { margin-left: -1rem; margin-right: -1rem; padding: .7rem 1rem; }
  .payc-fields { grid-template-columns: minmax(0, 1fr); }
  .payc-tools input[type="search"] { width: 100%; }
  /* Las tablas pasan a tarjetas: cada prestación en un bloque, con su monto a la derecha. */
  .payc-scroll { overflow: visible; border: 0; }
  table.payc-table { min-width: 0; } .payc-table thead { display: none; } .payc-table, .payc-table tbody { display: block; }
  .payc-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .15rem .6rem; align-items: center; padding: .6rem .7rem; margin-bottom: .5rem; border: 1px solid #e4eaf1; border-radius: 10px; }
  .payc-table td { display: block; padding: 0; border: 0; text-align: left; }
  .payc-table:not(.payc-history) td:nth-child(1) { grid-row: 1 / span 2; }
  .payc-table:not(.payc-history) td.payc-name { grid-column: 2; } .payc-table:not(.payc-history) td:nth-child(3) { grid-column: 2; color: #667085; font-size: .8rem; }
  .payc-table:not(.payc-history) td:nth-child(4), .payc-table:not(.payc-history) td:nth-child(5), .payc-table:not(.payc-history) td:nth-child(6) { display: none; }
  [data-pay-panel="abonos"] .payc-table td:nth-child(4) { display: none; }
  .payc-table:not(.payc-history) td.payc-due { display: block; grid-column: 3; grid-row: 1; text-align: right; }
  .payc-table:not(.payc-history) td:last-child { grid-column: 3; grid-row: 2; text-align: right; }
  .payc-table input[data-pay-part] { width: 6.5rem; }
  .payc-history tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .payc-history td:nth-child(5), .payc-history td:nth-child(6), .payc-history td:nth-child(7) { display: none; }
  .payc-history td.payc-acts { grid-column: 1 / -1; text-align: left; }
  .payc-table tr.payc-detail { display: block; } .payc-table tr.payc-detail > td { padding: .6rem; }
  .payc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payc-later li { grid-template-columns: minmax(0, 1fr) auto; } .payc-later small { text-align: left; }
  .payc-actions { width: 100%; } .payc-actions button { flex: 1; justify-content: center; }
}

/* Centro de pagos: asignaciones y desasignaciones se distinguen de los pagos, y entre sí. */
.payc-kind { display: inline-block; margin-right: .35rem; padding: .05rem .45rem; border-radius: 999px; font-size: .68rem; font-style: normal; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.payc-kind.in { background: #e6f4f0; color: #0f766e; } .payc-kind.out { background: #fff4e0; color: #9a6a1a; }
.payc-later li i { color: #98a2b3; font-size: .78rem; font-style: normal; }
.payc-later li.out b { color: #9a6a1a; }

/* Historial clínico del paciente (pestaña de la ficha) y ventana de evolución clínica. */
.clh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 0 0 1rem; max-width: none; }
.clh-filters label { margin: 0; } .clh-filters select { height: 2.4rem; min-width: 13rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
.clh-views { margin: 0 .4rem 0 0; }
.clh-clear { color: #667085; font-size: .84rem; font-weight: 500; }
.clh-count { margin: 0 0 .6rem; color: #667085; font-size: .84rem; }
.clh { position: relative; max-width: 58rem; }
.clh-day { margin: 1.3rem 0 .6rem; color: var(--brand-deep); font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.clh-day:first-child { margin-top: 0; }
.clh-entry { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .8rem; padding-bottom: .7rem; }
.clh-entry::before { content: ''; position: absolute; left: .97rem; top: 2rem; bottom: 0; width: 2px; background: #e4eaf1; }
.clh-entry:last-child::before { display: none; }
.clh-dot { z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #c4e3de; border-radius: 50%; background: #e6f4f0; color: #0f766e; }
.clh-entry.note .clh-dot { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-deep); }
.clh-dot svg { width: .95rem; height: .95rem; }
.clh-body { padding: .75rem 1rem .8rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.clh-entry.silent .clh-body { background: #fbfcfe; }
.clh-body header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.clh-body header strong { color: #1b2430; font-size: .95rem; font-weight: 620; } .clh-body header em { color: #475569; font-style: normal; font-weight: 500; }
.clh-text { margin: .55rem 0 0; padding: .55rem .75rem; border-left: 3px solid var(--brand); border-radius: 0 8px 8px 0; background: #f8fafc; color: #1b2430; font-size: .92rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.clh-text.clh-fix { border-left-color: var(--warn, #c28a2e); background: #fffaf0; font-size: .84rem; }
/* Autoría de cada entrada (29 de octubre de 2026): quién la realizó o escribió y, si fue otro usuario, quién la registró. */
.clh-who { margin: .4rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.clh-who.other { color: var(--slate); }
.clh-who-note { margin-top: .2rem; }
.clh-body footer { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .55rem; color: #667085; font-size: .8rem; }
.clh-body footer span + span::before { content: '·'; margin-right: 1.1rem; margin-left: -.75rem; color: #c3ccd9; }
.clh-print .menu-pop { right: 0; left: auto; min-width: 19rem; padding: .35rem; }
.clh-print .menu-pop a { display: flex; align-items: flex-start; gap: .65rem; padding: .55rem .65rem; border-radius: 8px; color: #1b2430; }
.clh-print .menu-pop a:hover { background: var(--blue-soft); text-decoration: none; }
.clh-print .menu-pop a svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; color: var(--brand-deep); }
.clh-print .menu-pop a span { display: grid; gap: .05rem; } .clh-print .menu-pop a strong { font-size: .86rem; font-weight: 600; } .clh-print .menu-pop a small { color: #667085; font-size: .76rem; }
.clh-print summary.button { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1rem; list-style: none; cursor: pointer; }
.clh-print summary.button::-webkit-details-marker { display: none; }
.evo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 0 .9rem; }
.evo-bar a { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 500; } .evo-bar a svg { width: .95rem; height: .95rem; }
dialog.evo-dialog { width: min(40rem, calc(100vw - 2rem)); padding: 1.5rem 1.6rem; border: 1px solid #e4eaf1; background: #fff; }
dialog.evo-dialog:not([open]) { display: none; }
dialog.evo-dialog form { display: grid; gap: .9rem; margin: 0; max-width: none; }
dialog.evo-dialog h2 { margin: 0; color: #1b2430; font-size: 1.1rem; font-weight: 620; }
dialog.evo-dialog p.evo-lead { margin: -.6rem 0 0; color: #667085; font-size: .86rem; line-height: 1.5; }
dialog.evo-dialog label { display: grid; gap: .3rem; margin: 0; }
dialog.evo-dialog label > span { color: #475569; font-size: .8rem; font-weight: 540; } dialog.evo-dialog .req { color: #c53a3a; }
dialog.evo-dialog textarea, dialog.evo-dialog select { width: 100%; max-width: none; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
dialog.evo-dialog textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
dialog.evo-dialog div.evo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; justify-content: stretch; }
dialog.evo-dialog div.evo-row:empty { display: none; }
dialog.evo-dialog div.fs-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; }
@media (max-width: 760px) {
  .clh-filters select { min-width: 0; width: 100%; } .clh-filters label { flex: 1 1 100%; }
  dialog.evo-dialog div.evo-row { grid-template-columns: minmax(0, 1fr); }
  .clh-body footer { display: grid; gap: .1rem; } .clh-body footer span + span::before { display: none; }
}
.clh-filters .clh-views { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; overflow: visible; }
.clh-filters .clh-views a { padding: .38rem .8rem; margin: 0; border: 0; border-radius: 8px; color: #475569; font-size: .84rem; font-weight: 540; white-space: nowrap; }
.clh-filters .clh-views a:hover { color: var(--brand-deep); text-decoration: none; }
.clh-filters .clh-views a.current { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); color: var(--brand-deep); }
/* El botón Imprimir del historial es un menú con texto, no el botón redondo de tres puntos. */
.svc-actions details.clh-print { position: relative; }
.svc-actions details.clh-print > summary.button, .svc-actions details.clh-print > summary.button:hover { display: inline-flex; align-items: center; gap: .45rem; width: auto; height: 2.5rem; padding: 0 1rem; border: 1px solid #d0d9e5; border-radius: 10px; background: #fff; box-shadow: none; color: var(--brand-deep); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.svc-actions details.clh-print > summary.button svg { width: 1rem; height: 1rem; }
.svc-actions details.clh-print[open] > summary.button { border-color: var(--brand); background: #f5f9ff; }
.clh-filters select { min-width: 11rem; }
.svc-actions details.clh-print .menu-pop { left: 0; right: auto; }
@media (min-width: 1100px) { .bud-head .svc-actions details.clh-print .menu-pop { left: auto; right: 0; } }

/* Historial de pagos del paciente (pestaña de la ficha): reutiliza la tabla del centro de pagos. */
.ppay-kpis { padding: 0; margin: 0 0 1rem; }
.ppay-card { padding: 0; overflow: hidden; } .ppay-card .payc-scroll { border: 0; border-radius: 0; }
.ppay-card table.payc-table { min-width: 58rem; }
.payc-history td a[title] { font-weight: 600; }
.ppay-later { margin-top: 1.6rem; }
.ppay-go { margin-top: .6rem !important; }
@media (max-width: 760px) { .ppay-card { border: 0; background: none; box-shadow: none; overflow: visible; } .ppay-card table.payc-table { min-width: 0; } .payc-history td:nth-child(3) small { display: inline; } }
/* A 1280 px la tabla del historial del paciente cabe sin desplazarse: celdas más juntas y el nombre del plan en una línea. */
.ppay-card table.payc-table { min-width: 46rem; table-layout: auto; }
.ppay-card .payc-table th, .ppay-card .payc-table > tbody > tr:not(.payc-detail) > td { padding-left: .55rem; padding-right: .55rem; }
.ppay-card .payc-history td:nth-child(3) small { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppay-card .payc-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 760px) { .ppay-card .payc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ppay-card .payc-history td.payc-date { font-size: .82rem; }
.ppay-card .payc-history td:nth-child(3) small { max-width: 9.5rem; }
.ppay-card .payc-table th, .ppay-card .payc-table > tbody > tr:not(.payc-detail) > td { padding-left: .45rem; padding-right: .45rem; }
.ppay-card .payc-table th:first-child, .ppay-card .payc-table > tbody > tr:not(.payc-detail) > td:first-child { padding-left: .9rem; }
.ppay-card .payc-history td.payc-acts { padding-right: .8rem; }
.ppay-card .payc-history td.payc-acts a { margin-left: .5rem; }
@media (max-width: 760px) {
  .ppay-card table.payc-table { min-width: 0; }
  .ppay-card .payc-table > tbody > tr:not(.payc-detail) > td, .ppay-card .payc-table > tbody > tr:not(.payc-detail) > td:first-child { padding: 0; }
  .ppay-card .payc-history td:nth-child(3) small { max-width: none; white-space: normal; }
  .ppay-card .payc-history td:nth-child(6), .ppay-card .payc-history td:nth-child(7) { display: none; }
  .ppay-card .payc-history td.payc-acts { display: block; grid-column: 1 / -1; padding: 0; text-align: left; }
}

/* Historial clínico: antecedentes médicos y odontograma (solo lectura) antes de las evoluciones. */
.clh-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem; align-items: start; margin-bottom: 1.4rem; }
.clh-block { margin: 0; padding: 1rem 1.2rem 1.1rem; }
.clh-block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.clh-block > header h2 { margin: 0; color: #1b2430; font-size: 1rem; font-weight: 620; }
.clh-block > header a { font-size: .82rem; font-weight: 500; white-space: nowrap; }
.clh-none, .clh-sub { margin: 0; color: #667085; font-size: .86rem; }
.clh-sub { margin-bottom: .5rem; font-size: .8rem; }
.clh-medical { display: grid; gap: .65rem; margin: 0; }
.clh-medical dt { color: #667085; font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.clh-medical dd { margin: .2rem 0 0; color: #1b2430; font-size: .9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.clh-chip { display: inline-block; margin: 0 .3rem .3rem 0; padding: .14rem .6rem; border: 1px solid #f3c7c7; border-radius: 999px; background: #fff5f5; color: #a02c2c; font-size: .8rem; font-weight: 560; }
.clh-drawing { padding: 0; border: 0; background: none; box-shadow: none; }
.clh-title { margin: 0 0 .8rem; color: #1b2430; font-size: 1.1rem; font-weight: 640; }
@media (max-width: 1100px) { .clh-top { grid-template-columns: minmax(0, 1fr); } }

/* Recibir pago desde la ficha del paciente: elegir el plan (paso 1) y pagar sus prestaciones (paso 2). */
.bud-head .svc-actions a.button.success { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1.05rem; text-decoration: none; }
form.pick-plan, form.payp { margin: 0; max-width: none; }
.pick-list { display: grid; gap: .7rem; }
.pick-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: start; margin: 0; padding: 1rem 1.2rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); cursor: pointer; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.pick-card:hover { border-color: #b9cbe3; }
.pick-card:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }
.pick-card.off { background: #fafbfc; cursor: not-allowed; }
.pick-card input[type="radio"] { width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.pick-main { display: grid; gap: .15rem; min-width: 0; }
.pick-main strong { color: #1b2430; font-size: 1rem; font-weight: 620; } .pick-card.off .pick-main strong { color: #667085; }
.pick-main small { color: #667085; font-size: .84rem; } .pick-main em { color: #9a6a1a; font-size: .82rem; font-style: normal; }
.pick-nums { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: .3rem 1.8rem; margin: .3rem 0 0; }
.pick-nums dt { color: #667085; font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pick-nums dd { margin: .05rem 0 0; color: #1b2430; font-size: .95rem; font-weight: 620; font-variant-numeric: tabular-nums; }
.pick-nums .on dd { color: #0f766e; } .pick-nums .warn dd { color: #9a6a1a; }
.pick-save button[disabled] { opacity: .5; cursor: not-allowed; }
.payp-card { margin: 0 0 1rem; padding: 0; overflow: hidden; }
.payp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.2rem; padding: 1rem 1.2rem .8rem; }
.payp-head h2 { margin: 0; color: #1b2430; font-size: 1rem; font-weight: 620; } .payp-head p { margin: .15rem 0 0; color: #667085; font-size: .84rem; }
.payp-mode { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; }
.payp-mode label { margin: 0; cursor: pointer; } .payp-mode input { position: absolute; opacity: 0; pointer-events: none; }
.payp-mode span { display: block; padding: .38rem .9rem; border-radius: 8px; color: #475569; font-size: .84rem; font-weight: 540; white-space: nowrap; }
.payp-mode input:checked + span { background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .1); color: var(--brand-deep); }
.payp-mode input:focus-visible + span { outline: 2px solid rgba(79, 70, 229, .6); }
.payp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: 0 1.2rem .7rem; }
.payp-tools input[type="search"] { width: 15rem; height: 2.2rem; border-color: #dce4ee; border-radius: 9px; box-shadow: none; font-size: .84rem; }
.payp-tools button.outline { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; padding: 0 .8rem; font-size: .82rem; }
.payp-tools button.link, .payp-tools button.link:hover { padding: 0; border: 0; background: none; box-shadow: none; color: var(--brand); font-size: .82rem; font-weight: 500; }
.payp-scroll { border-left: 0; border-right: 0; border-radius: 0; }
.payp-pad { padding: .8rem 1.2rem; } p.payp-pad { margin: 0; }
.payp-free { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: .4rem 1.2rem; align-items: end; padding: .9rem 1.2rem 1.1rem; border-top: 1px solid #edf2f7; background: #fbfcfe; }
.payp-free label { display: grid; gap: .3rem; margin: 0; } .payp-free label > span { color: #475569; font-size: .8rem; font-weight: 540; }
.payp-free input { width: 100%; max-width: none; height: 2.5rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; font-size: 1.02rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.payp-free p { margin: 0 0 .5rem; color: #667085; font-size: .82rem; }
.payp-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; padding: .85rem 1.2rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 -4px 18px -8px rgba(16, 24, 40, .18); }
.payp-bar .payc-sum .total dd { color: var(--brand-deep); font-size: 1.25rem; }
.payp-bar .payc-actions a.button.outline { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1rem; text-decoration: none; }
@media (max-width: 760px) {
  .pick-card { grid-template-columns: auto minmax(0, 1fr); } .pick-card > .hist-state { grid-column: 2; justify-self: start; } .pick-nums { grid-column: 1 / -1; }
  .payp-free { grid-template-columns: minmax(0, 1fr); } .payp-tools input[type="search"] { width: 100%; }
  .payp-scroll { padding: 0 .8rem; } .payp-bar .payc-actions { width: 100%; } .payp-bar .payc-actions > * { flex: 1; justify-content: center; }
}

/* Agenda abierta para darle una cita a un paciente (se llega desde su ficha). */
.book-for { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid #c4e3de; border-radius: 12px; background: #f0f9f7; color: #0b5f58; font-size: .92rem; }
.book-for svg { flex: none; width: 1.1rem; height: 1.1rem; }
.book-for span { flex: 1; min-width: 14rem; } .book-for strong { font-weight: 650; }
.book-for a { color: #0b5f58; font-size: .84rem; font-weight: 600; text-decoration: underline; }

/* Observaciones especiales: recuadro en la cabecera de la ficha (junto a las alertas médicas) y su pantalla. */
.hero.patient-hero .hero-cards { width: min(44rem, 58%); gap: .7rem; }
.hero.patient-hero .hero-cards > .alert-card { flex: 1 1 0; min-width: 0; }
.hero-card.alert-card.obs-card { color: #fff; text-decoration: none; transition: background var(--fast) var(--ease); }
.hero-card.alert-card.obs-card:hover { background: rgba(255, 255, 255, .2); text-decoration: none; }
.hero-card.alert-card.obs-card.on { border: 1px solid #f0c34a; background: rgba(240, 195, 74, .18); }
.hero-card.alert-card.obs-card.on .alert-icon { background: #e0a100; color: #fff; }
.hero-card.alert-card.obs-card.on.high { border-width: 2px; box-shadow: 0 0 0 3px rgba(240, 195, 74, .35); }
/* Prioridad alta: una señal breve al abrir la ficha, no un parpadeo permanente. */
.hero-card.alert-card.obs-card.on.high .alert-icon { animation: obs-nudge 1.2s ease-in-out 2; }
@keyframes obs-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .hero-card.alert-card.obs-card .alert-icon { animation: none !important; } }
@media (max-width: 1100px) { .hero.patient-hero { flex-wrap: wrap; } .hero.patient-hero .hero-cards { width: 100%; } }
@media (max-width: 620px) { .hero.patient-hero .hero-cards { flex-direction: column; } }
.obs-locked { display: grid; justify-items: center; gap: .4rem; padding: 2.4rem 1.5rem; text-align: center; }
.obs-locked h2 { margin: 0; color: #1b2430; font-size: 1.05rem; font-weight: 620; } .obs-locked p { margin: 0; color: #667085; }
.obs-lock-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: .4rem; border-radius: 50%; background: #fff4d6; color: #9a6a1a; } .obs-lock-icon svg { width: 1.3rem; height: 1.3rem; }
.obs-tabs { margin: 0 0 1rem; padding: 0; }
.obs-list { display: grid; gap: .8rem; max-width: 60rem; }
.obs { margin: 0; padding: 1rem 1.2rem 1.1rem; border-left: 4px solid #e0a100; }
.obs.p-high { border-left-color: #c53a3a; } .obs.p-info { border-left-color: #94a3b8; } .obs.resolved { border-left-color: #cbd5e1; background: #fbfcfe; }
.obs > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.obs > header div { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.obs > header strong { color: #1b2430; font-size: 1rem; font-weight: 620; }
.obs-prio { padding: .1rem .55rem; border-radius: 999px; background: #fff4d6; color: #7a5413; font-size: .74rem; font-weight: 600; }
.obs-prio.p-high { background: #fde8e6; color: #a02c2c; } .obs-prio.p-info { background: #eef2f7; color: #475569; }
.hist-state.obs-on { border-color: #f1dfbd; background: #fffaf0; color: #7a5413; } .hist-state.obs-on i { background: #e0a100; }
.obs-text { margin: .6rem 0 0; color: #1b2430; font-size: .93rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.obs-meta, .obs-resolution { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0 0; color: #667085; font-size: .82rem; }
.obs-meta svg { width: .9rem; height: .9rem; }
.obs-resolution { display: block; padding: .5rem .7rem; border-radius: 8px; background: #f1f5f9; color: #475569; }
.obs-debt { display: flex; align-items: flex-start; gap: .5rem; margin: .6rem 0 0; padding: .55rem .75rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #f8fafc; color: #475569; font-size: .84rem; }
.obs-debt svg { flex: none; width: 1rem; height: 1rem; margin-top: .12rem; }
.obs-act { margin-top: .8rem; }
.obs-act > summary.button { display: inline-flex; align-items: center; height: 2.3rem; padding: 0 .9rem; list-style: none; cursor: pointer; font-size: .86rem; }
.obs-act > summary::-webkit-details-marker { display: none; }
.obs-act form { display: grid; gap: .7rem; max-width: 40rem; margin: .8rem 0 0; padding: .9rem 1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #f8fafc; }
.obs-act label { display: grid; gap: .3rem; margin: 0; } .obs-act label > span { color: #475569; font-size: .8rem; font-weight: 540; } .obs-act .req { color: #c53a3a; }
.obs-act input[name="reason"] { width: 100%; max-width: none; height: 2.5rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
.obs-act label.obs-check { display: flex; align-items: center; gap: .5rem; } .obs-act label.obs-check span { color: #1b2430; font-size: .88rem; font-weight: 500; }
.obs-warn { padding: .7rem .85rem; border: 1px solid #f1dfbd; border-radius: 10px; background: #fffaf0; color: #7a5413; }
.obs-warn strong { display: block; font-size: .92rem; } .obs-warn p { margin: .25rem 0 0; font-size: .84rem; line-height: 1.45; }
.obs-log { margin-top: .8rem; } .obs-log > summary { color: #667085; font-size: .8rem; cursor: pointer; }
.obs-log ul { margin: .5rem 0 0; padding: 0; list-style: none; border: 1px solid #e4eaf1; border-radius: 10px; }
.obs-log li { display: grid; grid-template-columns: 9rem 6rem minmax(0, 12rem) minmax(0, 1fr); gap: .7rem; padding: .4rem .75rem; color: #475569; font-size: .82rem; } .obs-log li + li { border-top: 1px solid #f1f5f9; }
.obs-log li strong { color: #1b2430; font-weight: 600; } .obs-log li em { font-style: normal; color: #1b2430; }
dialog.obs-dialog p.payc-error { margin: 0; }
@media (max-width: 760px) { .obs-log li { grid-template-columns: minmax(0, 1fr) auto; } .obs-log li em { grid-column: 1 / -1; } }
/* Dos recuadros en la cabecera sin que queden altos y angostos: un poco más compactos por dentro y con más ancho. */
@media (min-width: 1101px) {
  .hero.patient-hero .hero-cards { width: min(37.5rem, 63%); gap: .6rem; }
  .hero.patient-hero .hero-cards > .alert-card { gap: .6rem; padding: .6rem .7rem; }
  .hero.patient-hero .hero-cards > .alert-card .alert-icon { width: 2.1rem; height: 2.1rem; }
  .hero.patient-hero .hero-cards > .alert-card .alert-text small { letter-spacing: .04em; white-space: nowrap; }
  .hero.patient-hero .hero-main { gap: .8rem; }
}
@media (min-width: 1101px) {
  .hero.patient-hero .hero-cards { width: min(34rem, 57%); gap: .55rem; }
  .hero.patient-hero .hero-cards > .alert-card { gap: .55rem; padding: .6rem .65rem; }
  .hero.patient-hero .hero-cards > .alert-card .alert-text > span { font-size: .9rem; }
  .hero.patient-hero .hero-main h1 { font-size: 1.45rem; }
}

/* Listas desplegables dentro de una ventana de confirmación: la regla genérica de esas ventanas pone en fila
   todos sus bloques, y eso dejaba las opciones una al lado de otra, en columnas angostas e ilegibles.
   Aquí la lista vuelve a ser vertical, una opción por fila. */
dialog.confirm div.combo-panel { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; min-width: 12rem; }
dialog.confirm div.combo-list { display: block; }
dialog.confirm div.combo-option { display: flex; justify-content: flex-start; gap: .6rem; white-space: normal; }
dialog.confirm div.combo-option span { overflow-wrap: break-word; word-break: normal; }
dialog.confirm div.combo-search, dialog.confirm div.combo-group, dialog.confirm div.combo-empty { display: block; }
dialog.confirm [hidden].combo-option, dialog.confirm [hidden].combo-group, dialog.confirm [hidden].combo-empty { display: none; }

/* Prioridad de una observación: etiqueta pequeña con color y siempre con su texto.
   Informativa en gris neutro, media en ámbar suave, alta en rojo suave. */
.obs-prio { display: inline-flex; align-items: center; gap: .3rem; padding: .08rem .55rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .72rem; font-style: normal; font-weight: 600; letter-spacing: 0; line-height: 1.5; text-transform: none; vertical-align: middle; white-space: nowrap; }
.obs-prio::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; opacity: .8; }
.obs-prio.p-info { border-color: #e2e8f0; background: #f1f5f9; color: #475569; }
.obs-prio.p-medium { border-color: #f1dfbd; background: #fff6e0; color: #8a5a00; }
.obs-prio.p-high { border-color: #f3c7c7; background: #fdecec; color: #a02c2c; }
.hero-card.alert-card.obs-card .alert-text em { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .4rem; opacity: 1; color: rgba(255, 255, 255, .78); }
.hero-card.alert-card.obs-card .alert-text em .obs-prio { font-size: .68rem; line-height: 1.4; }
dialog.obs-dialog label > span { display: flex; align-items: center; gap: .5rem; }
/* El borde izquierdo de cada observación repite el color de su prioridad. */
.obs.p-medium { border-left-color: #e0a100; } .obs.p-high { border-left-color: #d14343; } .obs.p-info { border-left-color: #94a3b8; }

.obs-locked-count { margin-top: .4rem !important; color: #475569 !important; font-size: .9rem; }
.obs-locked-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .8rem !important; }
.obs-locked-actions a.button.outline { display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1rem; text-decoration: none; }

/* Alertas médicas en la cabecera: contador, etiquetas compactas y panel con todas. El parpadeo del ícono es el de
   siempre (reglas `button.hero-card.alert-card.alert .alert-icon` de style.css): aquí no se toca. */
.med-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: .25rem; min-width: 0; max-width: 100%; margin: .2rem 0 .1rem; overflow: hidden; }
.med-chip { flex: 0 0 auto; max-width: 100%; padding: .05rem .5rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: .7rem; font-weight: 600; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.med-chip.allergy { border-color: #ffb4b6; background: rgba(229, 72, 77, .32); }
.med-chip.more { border-style: dashed; background: none; }
.med-chip[hidden] { display: none; }
button.hero-card.alert-card .alert-text { text-align: left; }
dialog.med-panel { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1.3rem 1.4rem 1.2rem; border: 1px solid #e4eaf1; background: #fff; overflow: auto; }
dialog.med-panel:not([open]) { display: none; }
dialog.med-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
dialog.med-panel h2 { display: flex; align-items: center; gap: .6rem; margin: 0; color: #1b2430; font-size: 1.05rem; font-weight: 640; }
/* En el panel, el ícono lleva el mismo parpadeo que el del recuadro. */
dialog.med-panel h2 .alert-icon { width: 2rem; height: 2rem; background: #e5484d; color: #fff; animation: alert-blink 1.1s steps(2, jump-none) infinite; }
dialog.med-panel h2 .alert-icon svg { width: 1.05rem; height: 1.05rem; }
@media (prefers-reduced-motion: reduce) { dialog.med-panel h2 .alert-icon { animation: none; } }
dialog.med-panel p.med-who { margin: .2rem 0 .9rem; color: #667085; font-size: .84rem; }
.med-group + .med-group { margin-top: .9rem; }
.med-group h3 { margin: 0 0 .35rem; color: #667085; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.med-group ul { margin: 0; padding: 0; list-style: none; border: 1px solid #e4eaf1; border-radius: 10px; }
.med-group li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .5rem .75rem; } .med-group li + li { border-top: 1px solid #f1f5f9; }
.med-group li strong { color: #1b2430; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.med-group li small { color: #667085; font-size: .74rem; white-space: nowrap; }
.med-dot { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #eef2f7; color: #475569; } .med-dot svg { width: .9rem; height: .9rem; }
.med-group li.allergy .med-dot { background: #fdecec; color: #c53a3a; } .med-group li.other .med-dot { background: #fff6e0; color: #8a5a00; }
dl.med-extras { display: grid; gap: .5rem; margin: 0; padding: .6rem .75rem; border: 1px solid #e4eaf1; border-radius: 10px; }
dl.med-extras div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .6rem; justify-content: stretch; }
dl.med-extras dt { color: #667085; font-size: .78rem; font-weight: 600; } dl.med-extras dd { margin: 0; color: #1b2430; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
dialog.med-panel p.med-note { margin: .9rem 0 0; color: #667085; font-size: .78rem; line-height: 1.45; }
dialog.med-panel > footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
dialog.med-panel section { display: block; }
@media (max-width: 520px) { .med-group li { grid-template-columns: auto minmax(0, 1fr); } .med-group li small { grid-column: 2; } dl.med-extras div { grid-template-columns: minmax(0, 1fr); gap: .1rem; } dialog.med-panel > footer button { flex: 1; justify-content: center; } }

/* Recuadros de la cabecera: la línea de ayuda en un solo renglón, y en teléfono cada recuadro con su propio alto. */
.hero.patient-hero .hero-cards > .alert-card .alert-text em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero.patient-hero .hero-cards > .alert-card .alert-text > span:first-of-type { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 620px) { .hero.patient-hero .hero-cards > .alert-card { flex: 0 0 auto; } }

/* Formulario de alertas médicas (etapa 8.2): cinco grupos de casillas en tarjetas compactas, textos libres y revisión. */
dialog.sheet-dialog.med-form { width: min(60rem, calc(100vw - 2rem)); }
dialog.med-form form { gap: .9rem; padding: 0; max-height: calc(100vh - 2rem); grid-template-rows: auto minmax(0, 1fr) auto; }
dialog.med-form header { position: sticky; top: 0; z-index: 2; align-items: flex-start; padding: 1.2rem 1.5rem .8rem; border-bottom: 1px solid #e4eaf1; background: #fff; }
dialog.med-form header p { margin: .2rem 0 0; color: #667085; font-size: .86rem; }
dialog.med-form fieldset.plain { padding: 0 1.5rem; overflow-y: auto; }
dialog.med-form footer { position: sticky; bottom: 0; gap: .6rem; flex-wrap: wrap; padding: .8rem 1.5rem; border-top: 1px solid #e4eaf1; background: #fff; }
dialog.med-form .medical-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: start; }
.med-area { padding: .8rem 1rem .9rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; }
.med-area h3 { margin: 0 0 .45rem; color: var(--brand-deep); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.med-area label.check { padding: .16rem 0; font-size: .9rem; }
.med-detail { display: block; margin: .1rem 0 .35rem 1.55rem; } .med-detail[hidden] { display: none; }
.med-detail input { width: 100%; max-width: none; height: 2.1rem; border-color: #dce4ee; border-radius: 8px; box-shadow: none; font-size: .86rem; }
.med-legacy { margin-top: .4rem; padding: .5rem .65rem; border: 1px solid #f1dfbd; border-radius: 10px; background: #fffaf0; }
.med-legacy b { margin-left: .3rem; padding: .02rem .45rem; border-radius: 999px; background: #fff0c9; color: #8a5a00; font-size: .68rem; font-weight: 600; }
.med-legacy p { margin: .15rem 0 0 1.55rem; color: #7a5413; font-size: .78rem; line-height: 1.4; }
.med-texts { display: grid; gap: .6rem; } .med-texts h3 { margin-bottom: 0; }
.med-texts label { display: grid; gap: .25rem; margin: 0; color: #475569; font-size: .8rem; font-weight: 540; }
dialog.med-form .med-texts textarea { min-height: 3.2rem; max-height: 11rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; font-size: .9rem; line-height: 1.45; field-sizing: content; }
.med-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: .8rem 1.2rem; align-items: end; padding: .8rem 1rem .9rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #f8fafc; }
.med-review h3 { margin: 0 0 .35rem; color: var(--brand-deep); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.med-review-state { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: #7a5413; font-size: .86rem; line-height: 1.45; }
.med-review-state.done { color: #0b5f58; } .med-review-state svg { flex: none; width: 1rem; height: 1rem; margin-top: .14rem; } .med-review-state span { color: #475569; } .med-review-state strong { color: inherit; }
.med-review-state:not(.done) strong { color: #7a5413; } .med-review-state.done strong { color: #0b5f58; }
.med-review-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.med-review-form label { display: grid; gap: .25rem; margin: 0; } .med-review-form label > span { color: #475569; font-size: .76rem; font-weight: 540; }
.med-review-form select, .med-review-form input { width: 100%; max-width: none; height: 2.3rem; border-color: #dce4ee; border-radius: 9px; box-shadow: none; font-size: .86rem; }
dialog.med-form footer button.outline { display: inline-flex; align-items: center; gap: .45rem; }
.med-group li strong em { display: block; margin-top: .1rem; color: #475569; font-size: .8rem; font-style: normal; font-weight: 450; }
@media (max-width: 760px) {
  dialog.med-form .medical-groups, .med-review, .med-review-form { grid-template-columns: minmax(0, 1fr); }
  dialog.med-form header, dialog.med-form footer { padding-left: 1rem; padding-right: 1rem; } dialog.med-form fieldset.plain { padding: 0 1rem; }
  dialog.med-form footer button { flex: 1 1 100%; justify-content: center; }
}
dialog.med-form footer .med-review-btn { order: -1; }

/* Cajas (etapa 8.3): «Mi caja» en una franja, indicadores, filtros compactos y tabla con fechas en dos líneas. */
.cbx-mine { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.2rem; margin: 0 0 1rem; padding: 1rem 1.3rem; }
.cbx-mine.open { border-left: 4px solid #0f766e; }
.cbx-icon { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 12px; background: #eef2f7; color: #475569; }
.cbx-mine.open .cbx-icon { background: #e6f4f0; color: #0f766e; } .cbx-icon svg { width: 1.3rem; height: 1.3rem; }
.cbx-info { flex: 1 1 18rem; min-width: 0; }
.cbx-info h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0; color: #1b2430; font-size: 1.02rem; font-weight: 640; }
.cbx-info p { margin: .25rem 0 0; color: #1b2430; font-size: .94rem; } .cbx-info p.cbx-meta { color: #667085; font-size: .84rem; }
.cbx-mine > a.button.success { display: inline-flex; align-items: center; gap: .45rem; height: 2.6rem; padding: 0 1.1rem; text-decoration: none; white-space: nowrap; }
form.cbx-open { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: 0; max-width: none; }
.cbx-open label { display: grid; gap: .25rem; margin: 0; } .cbx-open label > span { color: #475569; font-size: .76rem; font-weight: 540; }
.cbx-open select, .cbx-open input { height: 2.5rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; } .cbx-open input { width: 9rem; }
.cbx-open button.success { height: 2.5rem; padding: 0 1rem; white-space: nowrap; }
.cbx-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; margin: 0; }
/* Quinta tarjeta, «Cerradas sin revisar» (CASH-LIST-02): un enlace que cubre la tarjeta entera; ámbar si hay alguna, verde suave si están al día. */
.cbx-kpis.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cbx-review { position: relative; transition: border-color .16s ease; }
.cbx-review:hover { border-color: var(--brand); }
.cbx-review dt a.cbx-stretch { color: inherit; text-decoration: none; }
.cbx-review dt a.cbx-stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cbx-review dt a.cbx-stretch:focus-visible { outline: none; } .cbx-review:has(a.cbx-stretch:focus-visible) { outline: 2px solid var(--brand-focus); outline-offset: 2px; }
.cbx-review p { margin: .12rem 0 0; color: #667085; font-size: .74rem; line-height: 1.3; }
.cbx-review.warn p.cbx-review-line { color: #9a6a1a; font-weight: 560; } .cbx-review p.cbx-review-line.ok { color: #0f766e; font-weight: 560; }
.cbx-review p.cbx-review-avg strong { color: #344054; font-weight: 620; }
.cbx-table td.cbx-rev span { display: block; color: #1b2430; overflow: hidden; text-overflow: ellipsis; } .cbx-table td.cbx-rev small { display: block; margin-top: .05rem; color: #667085; font-size: .76rem; white-space: nowrap; }
/* Con la columna «Revisada por», «Ver detalle» pasa a un ícono (el texto queda para lectores de pantalla) para caber a 1280 px. */
.cbx-table td.cbx-act a.cbx-act-icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid #e4eaf1; border-radius: 9px; color: var(--brand); }
.cbx-table td.cbx-act a.cbx-act-icon:hover { border-color: var(--brand); background: var(--brand-soft); } .cbx-table td.cbx-act a.cbx-act-icon svg { width: 1rem; height: 1rem; }
.cbx-table td.cbx-rev .none { color: #98a2b3; } .cbx-table td.cbx-rev b.cbx-unrev { color: #9a6a1a; font-weight: 600; white-space: nowrap; }
.cbx-applied > span + span { display: inline-flex; align-items: center; padding: .12rem .6rem; border: 1px solid var(--brand-line); border-radius: 999px; background: #f2f4fd; color: var(--brand-deep); }
.cbx-scope { margin: .45rem 0 1.1rem; color: #667085; font-size: .78rem; }
.cbx-card { padding: 0; overflow: hidden; }
.cbx-card-head { padding: 1rem 1.2rem .2rem; } .cbx-card-head h2 { display: flex; align-items: center; gap: .6rem; margin: 0; color: #1b2430; font-size: 1.02rem; font-weight: 640; }
form.cbx-filters { display: grid; grid-template-columns: 7rem repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .7rem .8rem; align-items: end; margin: 0; max-width: none; padding: .8rem 1.2rem 1rem; }
.cbx-filters label { display: grid; gap: .25rem; margin: 0; min-width: 0; } .cbx-filters label > span { color: #475569; font-size: .76rem; font-weight: 540; white-space: nowrap; }
.cbx-filters input, .cbx-filters select { width: 100%; max-width: none; height: 2.4rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
.cbx-filter-actions { display: flex; align-items: center; gap: .9rem; }
.cbx-filter-actions button.outline { display: inline-flex; align-items: center; gap: .4rem; height: 2.4rem; padding: 0 .9rem; }
.cbx-clear { color: #667085; font-size: .86rem; font-weight: 500; }
.cbx-filters .agr-field-error { grid-column: 1 / -1; }
.cbx-applied { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: 0 1.2rem .9rem; color: #667085; font-size: .8rem; }
.cbx-applied a { display: inline-flex; align-items: center; gap: .35rem; padding: .12rem .6rem; border: 1px solid var(--brand-line); border-radius: 999px; background: #f2f4fd; color: var(--brand-deep); font-weight: 540; text-decoration: none; }
.cbx-applied a:hover { border-color: var(--brand); } .cbx-applied a b { color: #667085; font-weight: 500; }
table.cbx-table { min-width: 56rem; border-top: 1px solid #edf2f7; }
.cbx-table td { white-space: nowrap; color: #344054; }
.cbx-table tbody tr { height: 4.1rem; }
.cbx-table td.cbx-num a { color: var(--brand-deep); text-decoration: none; } .cbx-table td.cbx-num a:hover strong { text-decoration: underline; } .cbx-table td.cbx-num strong { font-size: .95rem; font-weight: 650; }
.cbx-table td.cbx-date span { display: block; color: #1b2430; font-variant-numeric: tabular-nums; } .cbx-table td.cbx-date small { display: block; margin-top: .05rem; color: #667085; font-size: .78rem; font-variant-numeric: tabular-nums; }
.cbx-table td.cbx-money { color: #1b2430; font-weight: 620; }
.cbx-diff .ok { color: #0f766e; font-weight: 560; } .cbx-diff .off { color: #9a6a1a; font-weight: 620; } .cbx-diff .none { color: #98a2b3; }
.cbx-table td.cbx-act { width: 1%; text-align: right; } .cbx-table td.cbx-act a { font-size: .86rem; font-weight: 500; }
.cbx-foot { flex-wrap: wrap; gap: .6rem 1.2rem; }
.cbx-pages { display: flex; align-items: center; gap: .7rem; margin-left: auto; color: #667085; font-size: .86rem; }
.cbx-pages a.button.outline { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 .8rem; text-decoration: none; }
@media (max-width: 1100px) { .cbx-kpis.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cbx-kpis, .cbx-kpis.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cbx-mine > a.button.success, form.cbx-open, .cbx-open label, .cbx-open input, .cbx-open button.success { width: 100%; justify-content: center; }
  form.cbx-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .8rem 1rem; } .cbx-filter-actions { grid-column: 1 / -1; }
  table.cbx-table { min-width: 0; } .cbx-table thead { display: none; } .cbx-table, .cbx-table tbody { display: block; }
  .cbx-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; height: auto; padding: .85rem 1rem; border-bottom: 1px solid #edf2f7; }
  .cbx-table td, .cbx-table td:first-child, .cbx-table td:last-child { display: block; width: auto; padding: 0; border: 0; text-align: left; white-space: normal; }
  .cbx-table td.fs-state { grid-column: 2; grid-row: 1; }
  .cbx-table td[data-label] { grid-column: 1 / -1; font-size: .86rem; }
  .cbx-table td[data-label]::before { content: attr(data-label) ': '; color: #667085; font-weight: 450; }
  .cbx-table td.cbx-date span, .cbx-table td.cbx-date small { display: inline; font-size: inherit; } .cbx-table td.cbx-date small::before { content: ' · '; }
  .cbx-table td.cbx-rev span, .cbx-table td.cbx-rev small { display: inline; font-size: inherit; } .cbx-table td.cbx-rev small::before { content: ' · '; }
  .cbx-table td.cbx-act { grid-column: 1 / -1; margin-top: .2rem; }
  .cbx-pages { margin-left: 0; }
}
/* A 1280 px la tabla de cajas cabe sin desplazarse: sucursal y cajero pueden ocupar dos líneas; fechas y montos no se parten. */
@media (min-width: 761px) {
  table.cbx-table { min-width: 50rem; }
  .cbx-table th, .cbx-table td { padding-left: .6rem; padding-right: .6rem; }
  .cbx-table th:first-child, .cbx-table td:first-child { padding-left: 1.1rem; }
  .cbx-table td { white-space: normal; }
  .cbx-table td.cbx-num, .cbx-table td.cbx-date, .cbx-table td.cbx-money, .cbx-table td.cbx-diff, .cbx-table td.fs-state, .cbx-table td.cbx-act, .cbx-table th { white-space: nowrap; }
  .cbx-table th.cbx-diff-h { white-space: normal; line-height: 1.25; min-width: 6.5rem; }
  .cbx-table td.cbx-rev { max-width: 8.5rem; }
}
/* Filtros de cajas en una fila pareja: número angosto, listas que se reparten el espacio y fechas con su ancho completo. */
@media (min-width: 761px) {
  form.cbx-filters { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .cbx-filters label { flex: 1 1 8rem; }
  .cbx-filters label.num { flex: 0 0 5.5rem; }
  .cbx-filters label.state { flex: 1 1 11.5rem; }
  .cbx-filters label:has(input[type="date"]) { flex: 0 0 9.4rem; }
  .cbx-filters .cbx-filter-actions { flex: 0 0 auto; }
  .cbx-filters .agr-field-error { flex: 1 1 100%; }
  .cbx-filters input, .cbx-filters select { padding-left: .6rem; padding-right: .6rem; }
}

/* Caja sin cerrar desde un día anterior: aviso a su cajero en todas las pantallas. Abrir la caja desde el cobro. */
.cash-stale { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 1rem; padding: .7rem 1rem; border: 1px solid #f1dfbd; border-radius: 12px; background: #fffaf0; color: #7a5413; font-size: .9rem; }
.cash-stale svg { flex: none; width: 1.1rem; height: 1.1rem; color: #b7791f; }
.cash-stale span { flex: 1; min-width: 14rem; } .cash-stale strong { font-weight: 650; }
.cash-stale a { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .9rem; border: 1px solid #e3c98f; border-radius: 9px; background: #fff; color: #7a5413; font-size: .84rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.cash-stale a:hover { border-color: #b7791f; }
.cbx-late { display: flex; align-items: center; gap: .4rem; margin: .35rem 0 0 !important; color: #9a6a1a !important; font-size: .84rem !important; font-weight: 540; } .cbx-late svg { width: .95rem; height: .95rem; }
form.cbx-open-here { margin: 0 0 1rem; padding: .9rem 1.1rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #f8fafc; }
.cbx-open-lead { flex: 1 1 100%; display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: #475569; font-size: .88rem; line-height: 1.45; }
.cbx-open-lead svg { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; } .cbx-open-lead strong { color: #1b2430; }

.cbx-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; }
.cbx-sum-head h2 { margin: 0; color: #1b2430; font-size: .95rem; font-weight: 640; }

/* Observaciones especiales: ventana de consulta rápida en la ficha (misma forma que la de alertas médicas). */
dialog.obs-panel h2 .alert-icon { background: #fff6e0; color: #9a6a1a; animation: none; }
dialog.obs-panel ul.obs-quick { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
ul.obs-quick li { padding: .65rem .8rem; border: 1px solid #e4eaf1; border-radius: 10px; }
ul.obs-quick li p { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: #1b2430; font-size: .92rem; }
ul.obs-quick li p.obs-quick-text { display: block; margin: .3rem 0; white-space: pre-line; overflow-wrap: anywhere; font-size: .9rem; }
ul.obs-quick li small { color: #667085; font-size: .76rem; }
button.obs-card { font: inherit; text-align: left; cursor: pointer; }

/* Observaciones especiales: ventana de gestión sobre la ficha (activas, historial, agregar y resolver). */
dialog.sheet-dialog.obs-manage { width: min(56rem, calc(100vw - 2rem)); overflow: auto; background: var(--bg); }
dialog.obs-manage > header { position: sticky; top: 0; z-index: 2; align-items: flex-start; padding: 1.1rem 1.4rem .9rem; border-bottom: 1px solid #e4eaf1; background: #fff; }
dialog.obs-manage > header h2 { font-size: 1.1rem; } dialog.obs-manage > header h2 svg { color: #9a6a1a; }
dialog.obs-manage > header p { margin: .2rem 0 0; color: #667085; font-size: .84rem; }
.obs-manage-actions { display: flex; flex: 0 0 auto; gap: .5rem; }
@media (max-width: 720px) { dialog.obs-manage > header { flex-wrap: wrap; } }
.obs-manage-body { padding: 1rem 1.4rem 1.4rem; }
dialog.obs-manage .obs-list { max-width: none; }
dialog.obs-manage article.obs > header { align-items: center; }
dialog.obs-manage .obs-act form { gap: .7rem; padding: .9rem 1rem; }
p.obs-done { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .55rem .8rem; border: 1px solid #b7e0d8; border-radius: 10px; background: #edf8f5; color: #0b5a54; font-size: .9rem; font-weight: 540; }
p.obs-done svg { width: 1rem; height: 1rem; }

/* Control de gestión (etapa 9.1): estructura del módulo de análisis. Tarjetas de indicador, paneles de
   informe y sus estados (pendiente, sin datos, error, cargando). Sin colores vivos ni degradados. */
.mgt-head { align-items: center; }
.mgt-context { display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .8rem; border: 1px solid #e4eaf1; border-radius: 12px; background: #fff; }
.mgt-context svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--brand-deep); }
.mgt-context span { display: grid; line-height: 1.25; } .mgt-context strong { color: #1b2430; font-size: .86rem; font-weight: 620; } .mgt-context em { color: #667085; font-size: .78rem; font-style: normal; }
.mgt-tabs { flex-wrap: wrap; overflow: visible; }
.mgt-problem { margin: 0 0 .8rem; }
.mgt-filters-card { margin: 0 0 1.4rem; padding: 0; }
form.mgt-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem .8rem; margin: 0; max-width: none; padding: .9rem 1.2rem .8rem; }
.mgt-filters label { display: grid; flex: 1 1 11rem; gap: .25rem; margin: 0; min-width: 0; max-width: 16rem; } .mgt-filters label[hidden] { display: none; }
.mgt-filters label > span { color: #475569; font-size: .76rem; font-weight: 540; white-space: nowrap; }
.mgt-filters input, .mgt-filters select { width: 100%; max-width: none; height: 2.4rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
.mgt-filters label:has(input[type="date"]) { flex: 0 1 9.6rem; }
.mgt-filter-actions { display: flex; align-items: center; gap: .9rem; height: 2.4rem; }
.mgt-filters .agr-field-error { flex: 1 1 100%; }
.mgt-applied { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .6rem 1.2rem .7rem; border-top: 1px solid #f1f5f9; color: #667085; font-size: .82rem; }
.mgt-applied svg { flex: none; width: .95rem; height: .95rem; } .mgt-applied strong { color: #1b2430; font-weight: 600; }
.mgt-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 .7rem; color: #1b2430; font-size: 1rem; font-weight: 640; }
.mgt-title small { color: #667085; font-size: .84rem; font-weight: 400; }
.mgt-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.mgt-metric { display: grid; align-content: start; gap: .45rem; padding: .9rem 1rem 1rem; border: 1px solid #e4eaf1; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
.mgt-metric header { display: flex; align-items: center; gap: .55rem; min-height: 2.5rem; }
.mgt-metric h3 { margin: 0; color: #1b2430; font-size: .88rem; font-weight: 600; }
.mgt-metric-icon, .mgt-panel-icon { display: grid; flex: none; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--brand-soft); color: var(--brand-deep); }
.mgt-metric-icon svg, .mgt-panel-icon svg { width: 1rem; height: 1rem; }
.mgt-value { margin: 0; color: #1b2430; font-size: 1.45rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.mgt-pending { display: flex; align-items: center; gap: .4rem; justify-self: start; margin: 0; padding: .16rem .6rem; border: 1px dashed #d5dde8; border-radius: 999px; background: #f8fafc; color: #667085; font-size: .76rem; font-weight: 540; }
.mgt-pending i { flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: #b7791f; }
.mgt-metric small { color: #667085; font-size: .78rem; line-height: 1.35; }
.mgt-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .9rem; margin-bottom: 1.6rem; }
.mgt-panel { display: grid; grid-template-rows: auto 1fr; margin: 0; padding: 0; } .mgt-panel.wide { grid-column: 1 / -1; }
.mgt-panel > header { display: flex; align-items: flex-start; gap: .7rem; padding: .95rem 1.1rem .8rem; border-bottom: 1px solid #f1f5f9; }
.mgt-panel h3 { margin: 0; color: #1b2430; font-size: .93rem; font-weight: 620; } .mgt-panel header p { margin: .15rem 0 0; color: #667085; font-size: .82rem; line-height: 1.4; }
.mgt-panel-body { display: grid; min-height: 8.5rem; padding: 1rem 1.1rem 1.1rem; } .mgt-panel.wide .mgt-panel-body { min-height: 11rem; }
.mgt-state { display: grid; place-content: center; justify-items: center; gap: .3rem; padding: .6rem; border: 1px dashed #dce4ee; border-radius: 12px; background: #fafbfd; text-align: center; }
.bud-card > .mgt-state { margin: 1.1rem; padding: 1.6rem 1rem; }
.mgt-state-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #eef2f7; color: #667085; } .mgt-state-icon svg { width: 1rem; height: 1rem; }
.mgt-state strong { color: #475569; font-size: .86rem; font-weight: 600; } .mgt-state p { max-width: 26rem; margin: 0; color: #667085; font-size: .8rem; line-height: 1.4; }
.mgt-state.error { border-color: #f1c9c9; background: #fdf6f6; } .mgt-state.error .mgt-state-icon { background: #fdecec; color: #c53a3a; } .mgt-state.error strong { color: #c53a3a; }
.mgt-state.error .button { margin-top: .4rem; }
.mgt-state.pending .mgt-state-icon { background: #fff6e0; color: #9a6a1a; }
.mgt-skeleton { display: grid; gap: .5rem; width: min(16rem, 100%); } .mgt-skeleton i { height: .7rem; border-radius: 6px; background: #e9eef5; animation: mgt-pulse 1.1s ease-in-out infinite alternate; }
.mgt-skeleton i:nth-child(2) { width: 80%; } .mgt-skeleton i:nth-child(3) { width: 55%; }
@keyframes mgt-pulse { from { opacity: 1; } to { opacity: .45; } }
/* Mientras llega la página con los filtros nuevos, el contenido se atenúa y no recibe clics. */
.mgt.is-loading [data-mgt-content] { opacity: .45; pointer-events: none; transition: opacity var(--fast) var(--ease); }
.mgt.is-loading .mgt-applied::after { content: 'Cargando…'; margin-left: auto; color: var(--brand-deep); font-weight: 540; }
@media (prefers-reduced-motion: reduce) { .mgt-skeleton i { animation: none; } }
@media (max-width: 720px) {
  .mgt-head { align-items: stretch; } .mgt-context { width: 100%; }
  .mgt-tabs { gap: 0 1.1rem; }
  form.mgt-filters { padding: .8rem 1rem; } .mgt-filters label, .mgt-filters label:has(input[type="date"]) { flex: 1 1 100%; max-width: none; }
  .mgt-filters label[data-mgt-custom] { flex: 1 1 calc(50% - .4rem); }
  .mgt-filter-actions { flex: 1 1 100%; }
  .mgt-applied { align-items: flex-start; padding: .6rem 1rem .7rem; }
  .mgt-metrics, .mgt-panels { grid-template-columns: minmax(0, 1fr); }
}

/* Tema índigo + teal (13 de octubre de 2026) -----------------------------------
   Lo que la identidad nueva necesita además de los tokens: el menú, la selección, los botones de cobro,
   las tarjetas dentro de las cabeceras con degradado y el foco. Las superficies siguen blancas y los
   colores de estado (pagado, alerta, error, estados de cita, odontograma) no cambian. */
/* Menú lateral: degradado discreto; la entrada elegida se distingue con un índigo más claro y un borde teal. */
.sidebar { background: var(--sidebar-gradient); }
.sidebar nav a { color: var(--on-dark-muted); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* Selección activa «camaleón» (SIDEBAR-CHAMELEON-ACTIVE-03, 28 de octubre de 2026): sin color ni degradado propio; una luz
   blanca translúcida deja ver el degradado real del menú detrás (un punto más que el hover, 7 %), con un contorno casi
   imperceptible y el acento teal reducido a una línea fina y tenue (sombra interior: no cambia medidas). */
.sidebar nav a.active, .app.slim .sidebar nav a.active { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 2px 0 0 rgba(45, 212, 191, .55), inset 0 0 0 1px rgba(255, 255, 255, .1); }
.nav-section { color: rgba(221, 231, 250, .6); }
.sidebar .brand-name small { color: var(--on-dark-muted); }
.topbar-user .avatar { background: var(--brand); }

/* Botones: el principal es índigo; cobrar y la caja van en teal; el secundario, blanco con texto índigo. */
button.success.money, a.button.success.money, form > div > button.success.money, form:not(.inline) > button.success.money { background: var(--money); border-color: var(--money-strong); color: #fff; }
button.success.money:hover, a.button.success.money:hover, form > div > button.success.money:hover, form:not(.inline) > button.success.money:hover { background: var(--money-strong); border-color: var(--money-strong); color: #fff; }
button.outline, a.button.outline { color: var(--brand-deep); }
button.outline:hover, a.button.outline:hover { border-color: var(--brand-line); color: var(--brand); }
button, a.button, summary.button { transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
button:focus-visible, a.button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-focus); }
input[type="checkbox"], input[type="radio"], .plan-group input.bulk-only, .emit-fields label.emit-skip input { accent-color: var(--brand); }

/* Selección: pestañas y opciones elegidas en índigo corporativo. */
.agr-tabs a.current, .bud-tabs a.current, .tabs a.current, .patient-tabs a.current { color: var(--brand); border-bottom-color: var(--brand); }
.segmented a.current, .segmented button.current { color: var(--brand); }

/* Cabeceras con el degradado principal (ficha del paciente, presupuesto, inicio). Donde el degradado llega al
   teal el texto blanco pierde contraste: las tarjetas interiores llevan un velo oscuro para que se lea igual en todo el ancho. */
.hero, .welcome, .page-head, .home-head, .usr-hero { background: var(--brand-gradient); box-shadow: 0 10px 24px -14px rgba(25, 36, 58, .55), var(--shadow); }
/* El encabezado genérico (.page-head del header) lleva el degradado: relleno, radio y título blanco, porque style.css lo
   dejaba sin relleno y con el título en tinta oscura (ilegible sobre el índigo). La ficha de clínica va con velo oscuro. */
.page-head { padding: 1rem 1.5rem; border-radius: 14px; color: #fff; }
.page-head h1 { color: #fff; }
.page-head span { background: rgba(12, 20, 56, .28); border-color: rgba(255, 255, 255, .26); color: #fff; box-shadow: none; }
.app.guest .page-head { margin: -2rem -2rem 1.5rem; padding: 1rem 1.5rem; border-radius: var(--radius) var(--radius) 0 0; }
.hero-card:not(.warn):not(.alert):not(.notice):not(.on) { background: rgba(15, 23, 60, .3); border-color: rgba(255, 255, 255, .26); }
.hero-card:not(.warn) small { color: var(--on-dark-muted); }
.login-side { background: var(--brand-gradient); }
@media (prefers-reduced-motion: reduce) { .sidebar nav a, button, a.button, summary.button { transition: none; } }
@media print { .hero, .welcome, .page-head, .home-head, .usr-hero { background: none !important; box-shadow: none; } }

/* Aviso a quien supervisa: cajas de otros cajeros sin cerrar. Mismo ámbar del aviso propio. */
div.cash-stale.others ul { margin: .25rem 0 0; padding: 0; list-style: none; font-size: .86rem; } div.cash-stale.others li + li { margin-top: .1rem; }
div.cash-stale.others li a { display: inline; height: auto; padding: 0; border: 0; background: none; font-size: inherit; text-decoration: underline; }

/* Control de gestión, etapa 9.2: indicadores con valor, su explicación (la «i») y el estado de error de una tarjeta. */
.mgt-metric { position: relative; } .mgt-metric header { padding-right: 1.4rem; }
.mgt-info { position: absolute; top: .75rem; right: .6rem; }
.mgt-info[open] { position: static; } .mgt-info[open] summary { position: absolute; top: .75rem; right: .6rem; }
.mgt-info summary { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; color: #98a2b3; list-style: none; cursor: pointer; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); }
.mgt-info summary::-webkit-details-marker { display: none; } .mgt-info summary svg { width: .95rem; height: .95rem; }
.mgt-info summary:hover, .mgt-info[open] summary { background: var(--brand-soft); color: var(--brand); }
.mgt-info p { position: absolute; top: 2.6rem; left: .5rem; right: .5rem; z-index: 5; margin: 0; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); color: #475569; font-size: .8rem; font-weight: 400; line-height: 1.45; }
.mgt-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; line-height: 1.2; }
.mgt-tag { padding: .1rem .5rem; border: 1px solid #f1dfbd; border-radius: 999px; background: #fffaf0; color: #7a5413; font-size: .68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.mgt-metric small + small { margin-top: -.3rem; }
.mgt-failed { display: flex; align-items: center; gap: .4rem; margin: 0; color: #c53a3a; font-size: .9rem; font-weight: 600; } .mgt-failed svg { width: 1rem; height: 1rem; }
.mgt-metric.error { border-color: #f1c9c9; background: #fdf6f6; }

/* Control de gestión, etapa 9.2 fase B: gráficos del resumen. SVG para la línea y la dona; ejes, puntos, leyendas
   y valores en HTML para que el texto no se deforme al cambiar el ancho. El texto nunca lleva el color de la serie. */
.mgt-panel-body:has(.mgt-chart, .mgt-donut-wrap, .mgt-rank) { display: block; }
.mgt-chart { margin: 0 0 1.1rem; } .mgt-chart + .mgt-chart { padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.mgt-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; margin-bottom: .7rem; color: #667085; font-size: .8rem; }
.mgt-chart figcaption strong { color: #1b2430; font-size: .88rem; font-weight: 620; } .mgt-chart figcaption b { margin-left: auto; color: #1b2430; font-weight: 600; font-variant-numeric: tabular-nums; }
.mgt-key { align-self: center; width: .9rem; height: 3px; border-radius: 2px; background: var(--c); }
.mgt-plot { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); height: 9.5rem; }
.mgt-axis { display: flex; flex-direction: column; justify-content: space-between; padding-right: .6rem; color: #98a2b3; font-size: .7rem; font-variant-numeric: tabular-nums; text-align: right; line-height: 1; }
.mgt-axis span:first-child { transform: translateY(-.3em); } .mgt-axis span:last-child { transform: translateY(.3em); }
.mgt-area { position: relative; margin: 0 .7rem; }
.mgt-grid { position: absolute; left: -.7rem; right: -.7rem; height: 1px; background: #eef1f6; } .mgt-grid.base { background: #d5dde8; }
.mgt-col { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); outline: none; }
.mgt-col:hover::before, .mgt-col:focus::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #cbd5e1; }
.mgt-tip { display: none; position: absolute; top: -.2rem; left: calc(50% + .6rem); z-index: 6; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-md); color: #1b2430; font-size: .8rem; font-style: normal; font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.mgt-tip.left { left: auto; right: calc(50% + .6rem); } .mgt-tip b { display: block; color: #667085; font-size: .72rem; font-weight: 500; }
.mgt-col:hover .mgt-tip, .mgt-col:focus .mgt-tip { display: block; }
.mgt-xaxis { position: relative; height: 1.3rem; margin: .35rem .7rem 0 4.3rem; color: #98a2b3; font-size: .7rem; font-variant-numeric: tabular-nums; }
.mgt-xaxis span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.mgt-chart-note { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; color: #667085; font-size: .78rem; } .mgt-chart-note svg { flex: none; width: .95rem; height: .95rem; }
.mgt-chart-note.warn { color: #9a6a1a; }
.mgt-data { margin-top: .4rem; } .mgt-data summary { display: inline-block; color: var(--brand); font-size: .8rem; font-weight: 540; cursor: pointer; list-style: none; } .mgt-data summary::-webkit-details-marker { display: none; }
.mgt-data summary:hover { text-decoration: underline; }
.mgt-data-scroll { max-height: 16rem; margin-top: .5rem; overflow: auto; border: 1px solid #e4eaf1; border-radius: 10px; }
.mgt-data table { width: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.mgt-data th, .mgt-data td { padding: .35rem .7rem; border-bottom: 1px solid #f1f5f9; text-align: left; white-space: nowrap; } .mgt-data th { position: sticky; top: 0; background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mgt-data td:last-child, .mgt-data th:last-child { text-align: right; } .mgt-data tfoot td { border-bottom: 0; font-weight: 640; }
.mgt-donut-wrap { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: 1.2rem; margin-bottom: .8rem; }
.mgt-donut { position: relative; } .mgt-donut svg { display: block; width: 100%; height: auto; transform: rotate(0deg); }
.mgt-donut circle { fill: none; stroke-width: 5; } .mgt-donut-track { stroke: #eef1f6; }
.mgt-donut-center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; }
.mgt-donut-center strong { color: #1b2430; font-size: 1.45rem; font-weight: 680; line-height: 1.1; font-variant-numeric: tabular-nums; } .mgt-donut-center span { color: #667085; font-size: .68rem; }
.mgt-legend { display: grid; gap: .3rem; margin: 0; padding: 0; list-style: none; }
.mgt-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.4rem; align-items: center; gap: .5rem; color: #1b2430; font-size: .84rem; } .mgt-legend li.none { color: #98a2b3; }
.mgt-legend i { width: .65rem; height: .65rem; border-radius: 3px; } .mgt-legend li.none i { opacity: .35; }
.mgt-legend b { font-weight: 640; font-variant-numeric: tabular-nums; } .mgt-legend em { color: #667085; font-size: .78rem; font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.mgt-rank { display: grid; gap: .8rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
.mgt-rank li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; align-items: baseline; }
.mgt-rank-name { overflow: hidden; color: #1b2430; font-size: .88rem; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.mgt-rank b { color: #1b2430; font-size: .9rem; font-weight: 660; font-variant-numeric: tabular-nums; }
.mgt-rank i { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #eef1f6; } .mgt-rank u { display: block; height: 100%; min-width: 3px; border-radius: 4px; background: var(--brand); text-decoration: none; }
.mgt-rank small { grid-column: 1 / -1; color: #667085; font-size: .76rem; }
.mgt-rank-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; margin: 0; padding-top: .7rem; border-top: 1px solid #f1f5f9; color: #667085; font-size: .82rem; } .mgt-rank-foot strong { color: #1b2430; font-weight: 640; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .mgt-plot { grid-template-columns: 3rem minmax(0, 1fr); height: 8rem; } .mgt-xaxis { margin-left: 3.7rem; }
  .mgt-chart figcaption b { flex: 1 1 100%; margin-left: 0; }
  .mgt-donut-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; } .mgt-donut { width: 9.5rem; } .mgt-legend { width: 100%; }
}

/* Los paneles de gráficos van de a dos por fila (el de evolución, a todo el ancho) para que la dona y su leyenda quepan. */
.mgt-panels.charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mgt-legend span { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
@media (max-width: 900px) { .mgt-panels.charts { grid-template-columns: minmax(0, 1fr); } }

/* Una tabla ancha dentro de un panel se desplaza dentro de su caja, sin ensanchar el panel. */
.mgt-panel, .mgt-panel-body { min-width: 0; } .mgt-data-scroll { max-width: 100%; }
.mgt-data td:nth-child(3) { white-space: normal; }
.mgt-data td:nth-child(2) { white-space: normal; } .mgt-data th, .mgt-data td { padding: .35rem .6rem; }

/* Control de gestión, etapa 9.2.1: panel «Evolución de la clínica». Dos tarjetas con los totales y dos gráficos de
   barras (recaudación en índigo, citas en teal). Barras en HTML, proporcionales al valor sobre un eje que parte en cero. */
.mgt-evo-range { white-space: nowrap; }
.mgt-evo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.mgt-evo-tile { display: flex; align-items: center; gap: .8rem; padding: .75rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.mgt-evo-icon { display: grid; flex: none; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--brand-soft); color: var(--brand); } .mgt-evo-icon svg { width: 1.15rem; height: 1.15rem; }
.mgt-evo-tile.visits .mgt-evo-icon { background: #e6f4f0; color: var(--teal-dark); }
.mgt-evo-tile > div { display: grid; min-width: 0; }
.mgt-evo-tile small { color: #667085; font-size: .76rem; font-weight: 540; }
.mgt-evo-tile strong { color: #1b2430; font-size: 1.5rem; font-weight: 680; line-height: 1.2; font-variant-numeric: tabular-nums; } .mgt-evo-tile strong.failed { color: #c53a3a; font-size: 1rem; }
.mgt-evo-tile em { color: #667085; font-size: .78rem; font-style: normal; }
.mgt-bars { margin: 0 0 1.1rem; --c: var(--brand-focus); --c-strong: var(--brand-strong); } .mgt-bars.visits { --c: var(--teal-strong); --c-strong: var(--teal-dark); }
.mgt-bars + .mgt-bars { padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.mgt-bars figcaption { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; } .mgt-bars figcaption strong { color: #1b2430; font-size: .88rem; font-weight: 620; }
.mgt-bars .mgt-key { width: .7rem; height: .7rem; border-radius: 3px; }
.mgt-bars .mgt-plot { height: 14.5rem; } .mgt-bars.visits .mgt-plot { height: 12.5rem; }
.mgt-bars .mgt-area { display: flex; align-items: stretch; gap: 2px; margin: 0; padding: 0 .4rem; }
.mgt-bars .mgt-grid { left: 0; right: 0; }
.mgt-bars .mgt-col { position: relative; top: auto; bottom: auto; display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; transform: none; border-radius: 6px 6px 0 0; cursor: default; }
.mgt-bars .mgt-col:hover, .mgt-bars .mgt-col:focus { background: rgba(100, 116, 139, .08); } .mgt-bars .mgt-col:hover::before, .mgt-bars .mgt-col:focus::before { content: none; }
.mgt-bars .mgt-col:focus-visible { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 1px; }
.mgt-bar { display: block; width: 62%; max-width: 26px; min-height: 0; border-radius: 4px 4px 0 0; background: var(--c); transition: background var(--fast) var(--ease); }
.mgt-bar.zero { height: 2px !important; border-radius: 1px; background: #cbd5e1; }
.mgt-col:hover .mgt-bar:not(.zero), .mgt-col:focus .mgt-bar:not(.zero) { background: var(--c-strong); }
.mgt-bars .mgt-tip { top: .3rem; left: 50%; font-weight: 620; } .mgt-bars .mgt-tip.left { left: auto; right: 50%; }
.mgt-bars .mgt-xaxis { display: flex; gap: 2px; height: auto; margin: .4rem 0 0 3.6rem; padding: 0 .4rem; }
.mgt-bars .mgt-xaxis span { position: static; flex: 1 1 0; min-width: 0; transform: none; text-align: center; overflow: visible; }
.mgt-data summary .opened, .mgt-data[open] summary .closed { display: none; } .mgt-data[open] summary .opened { display: inline; }
@media (max-width: 720px) {
  .mgt-bars .mgt-plot { height: 11rem; } .mgt-bars.visits .mgt-plot { height: 9.5rem; }
  .mgt-bars .mgt-area { gap: 1px; padding: 0 .2rem; } .mgt-bars .mgt-xaxis { gap: 1px; margin-left: 3rem; padding: 0 .2rem; }
  .mgt-bars.dense .mgt-bar { width: 78%; } .mgt-evo-range { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .mgt-bar { transition: none; } }
.mgt-evo .mgt-data th:not(:first-child), .mgt-evo .mgt-data td:not(:first-child) { text-align: right; }

/* Etapa 9.3.1, ajustes del resumen: gráficos de evolución más bajos, y el detalle de cada barra al costado de su
   columna (no encima), con sus valores destacados. app.js lo cambia de lado si se sale de la pantalla. */
.mgt-bars .mgt-plot { height: 12.3rem; } .mgt-bars.visits .mgt-plot, .mgt-bars.occ .mgt-plot { height: 11rem; }
.mgt-bars .mgt-tip { top: .2rem; left: calc(100% + .35rem); right: auto; min-width: 9.5rem; padding: .5rem .7rem; border: 1px solid #e4eaf1; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px -6px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06); color: #1b2430; font-size: .84rem; font-weight: 660; z-index: 20; }
.mgt-bars .mgt-tip.left { left: auto; right: calc(100% + .35rem); }
.mgt-bars .mgt-tip b { margin-bottom: .15rem; color: #667085; font-size: .74rem; font-weight: 500; } .mgt-bars .mgt-tip span { display: block; color: #667085; font-size: .74rem; font-weight: 500; }
@media (max-width: 720px) { .mgt-bars .mgt-plot { height: 9.5rem; } .mgt-bars.visits .mgt-plot, .mgt-bars.occ .mgt-plot { height: 8.5rem; } }

/* Ocupación de agenda: cuatro totales, barras horizontales por profesional y sucursal, ocupación en el tiempo y tabla. */
.mgt-occ { margin-bottom: 1.4rem; } .mgt-occ > header { position: relative; padding-right: 2.6rem; } .mgt-occ > header .mgt-info { top: .9rem; right: .9rem; } .mgt-occ > header .mgt-info p { top: 2.4rem; left: auto; right: 0; width: min(24rem, 80vw); }
.mgt-occ .mgt-panel-body { display: block; }
.mgt-occ-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.mgt-occ-tiles .mgt-evo-tile strong { font-size: 1.35rem; }
.mgt-occ .mgt-chart-note { align-items: flex-start; } .mgt-occ .mgt-chart-note strong { color: #1b2430; font-weight: 620; }
.mgt-occ-chart { margin: .4rem 0 1.2rem; } .mgt-occ-chart figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; margin-bottom: .7rem; color: #667085; font-size: .8rem; } .mgt-occ-chart figcaption strong { color: #1b2430; font-size: .88rem; font-weight: 620; }
.mgt-occ-chart ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.mgt-occ-chart li { display: grid; grid-template-columns: minmax(9rem, 16rem) minmax(0, 1fr) 4.2rem minmax(0, 12rem); align-items: center; gap: .3rem .9rem; padding: .15rem .3rem; border-radius: 8px; outline: none; }
.mgt-occ-chart li:hover, .mgt-occ-chart li:focus-visible { background: #f8fafc; }
.mgt-occ-name { display: grid; min-width: 0; } .mgt-occ-name strong { overflow: hidden; color: #1b2430; font-size: .86rem; font-weight: 580; text-overflow: ellipsis; white-space: nowrap; } .mgt-occ-name em { color: #667085; font-size: .74rem; font-style: normal; }
.mgt-occ-chart i { height: 10px; border-radius: 5px; background: #eef1f6; } .mgt-occ-chart u { display: block; height: 100%; min-width: 3px; border-radius: 5px; background: var(--brand-focus); text-decoration: none; transition: background var(--fast) var(--ease); }
.mgt-occ-chart li:hover u, .mgt-occ-chart li:focus-visible u { background: var(--brand-strong); }
.mgt-occ-chart b { color: #1b2430; font-size: .88rem; font-weight: 660; font-variant-numeric: tabular-nums; text-align: right; } .mgt-occ-chart small { color: #667085; font-size: .76rem; font-variant-numeric: tabular-nums; }
.mgt-bars.occ { --c: var(--brand-focus); --c-strong: var(--brand-strong); padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.mgt-occ-table { overflow-x: auto; border: 1px solid #e4eaf1; border-radius: 12px; }
.mgt-occ-table table { width: 100%; border-collapse: collapse; font-size: .86rem; font-variant-numeric: tabular-nums; }
.mgt-occ-table th, .mgt-occ-table td { padding: .55rem .8rem; border-bottom: 1px solid #f1f5f9; text-align: left; vertical-align: top; } .mgt-occ-table .num { text-align: right; }
.mgt-occ-table th { background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mgt-occ-table th a { color: inherit; } .mgt-occ-table th a.on { color: var(--brand); } .mgt-occ-table th a.on::after { content: ' ↓'; }
.mgt-occ-table td strong { color: #1b2430; font-weight: 580; } .mgt-occ-table td small { display: block; color: #667085; font-size: .74rem; } .mgt-occ-table td b { font-weight: 660; }
.mgt-occ-table tr.na td { color: #667085; } .mgt-occ-table tr.na td b { font-weight: 500; }
.mgt-occ-table tfoot td { border-bottom: 0; background: #f8fafc; color: #1b2430; font-weight: 600; }
@media (max-width: 720px) {
  .mgt-occ-chart li { grid-template-columns: minmax(0, 1fr) auto; } .mgt-occ-chart i { grid-column: 1 / -1; grid-row: 2; } .mgt-occ-chart b { grid-row: 1; grid-column: 2; } .mgt-occ-chart small { grid-column: 1 / -1; }
  .mgt-occ-table { border: 0; overflow: visible; } .mgt-occ-table thead { display: none; }
  .mgt-occ-table table, .mgt-occ-table tbody, .mgt-occ-table tfoot, .mgt-occ-table tr, .mgt-occ-table td { display: block; }
  .mgt-occ-table tr { margin-bottom: .6rem; padding: .5rem .8rem; border: 1px solid #e4eaf1; border-radius: 12px; }
  .mgt-occ-table td, .mgt-occ-table .num { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; border: 0; text-align: right; } .mgt-occ-table td::before { content: attr(data-label); color: #667085; font-size: .76rem; text-align: left; }
  .mgt-occ-table td small { margin-left: auto; } .mgt-occ-table tfoot td { background: none; } .mgt-occ-table tfoot td[colspan] { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .mgt-occ-chart u { transition: none; } }
.mgt-occ-tiles .mgt-evo-tile strong { font-size: 1.25rem; white-space: nowrap; } .mgt-occ-tiles { grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
@media (max-width: 720px) { .mgt-occ-table td { flex-wrap: wrap; } .mgt-occ-table td small { flex: 1 1 100%; margin: 0; text-align: right; } }

/* Seguimiento de citas (etapa 9.3.2): historia del día en la agenda y rastro de cada reserva en la ficha. */
.agenda-changes { margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.agenda-changes > summary { display: flex; align-items: center; gap: .5rem; padding: .6rem .9rem; color: #475569; font-size: .86rem; font-weight: 560; list-style: none; cursor: pointer; } .agenda-changes > summary::-webkit-details-marker { display: none; }
.agenda-changes > summary svg { width: 1rem; height: 1rem; } .agenda-changes[open] > summary { border-bottom: 1px solid #f1f5f9; color: var(--brand); }
.agenda-changes ul { display: grid; margin: 0; padding: .2rem 0; list-style: none; max-height: 18rem; overflow-y: auto; }
.agenda-changes li { display: grid; grid-template-columns: 6.2rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto; align-items: center; gap: .2rem .9rem; padding: .45rem .9rem; border-left: 3px solid #cbd5e1; font-size: .86rem; } .agenda-changes li + li { border-top: 1px solid #f6f8fb; }
.agenda-changes li.moved { border-left-color: var(--brand-focus); } .agenda-changes li.cancelled { border-left-color: #b98522; }
.agenda-changes .when { color: #667085; font-variant-numeric: tabular-nums; } .agenda-changes .who, .agenda-changes .what { display: grid; min-width: 0; }
.agenda-changes small { color: #667085; font-size: .76rem; } .agenda-changes b { color: #1b2430; font-weight: 580; } .agenda-changes .go { font-size: .8rem; white-space: nowrap; }
small.appt-trace { display: block; margin-top: .15rem; color: #667085; font-size: .76rem; }
@media (max-width: 720px) { .agenda-changes li { grid-template-columns: 4.6rem minmax(0, 1fr); } .agenda-changes .what, .agenda-changes .go { grid-column: 2; } }

/* Control de gestión, etapa 9.3.2: «Agenda y actividad» en el resumen. Dona, movimientos de agenda (eventos, sin
   tono de alarma: un adelanto no es un problema), la agenda de cerca y el detalle de un indicador. */
.mgt-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .mgt-moves.quick { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); }
.mgt-move { display: grid; gap: .05rem; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: inherit; }
a.mgt-move { transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease); } a.mgt-move:hover { border-color: var(--brand-line); background: var(--brand-soft); text-decoration: none; } a.mgt-move em { color: var(--brand); }
.mgt-move small { color: #667085; font-size: .76rem; font-weight: 540; } .mgt-move strong { color: #1b2430; font-size: 1.3rem; font-weight: 680; line-height: 1.2; font-variant-numeric: tabular-nums; } .mgt-move em { color: #667085; font-size: .74rem; font-style: normal; line-height: 1.3; }
.mgt-move-notes { display: grid; gap: .25rem; margin: .8rem 0 0; padding: 0; color: #667085; font-size: .8rem; list-style: none; }
.mgt-act .mgt-panel > header { position: relative; flex-wrap: wrap; } .mgt-glance { margin-left: auto; }
.mgt-bars.week { margin: 1rem 0 0; } .mgt-bars.week .mgt-plot { display: block; height: 8.5rem; } .mgt-bars.week .mgt-xaxis { margin-left: 0; } .mgt-bars.week .mgt-area { height: 100%; }
.mgt-bars.week a.mgt-col { flex-direction: column; justify-content: flex-end; align-items: center; color: inherit; text-decoration: none; } .mgt-bar-label { margin-bottom: .2rem; color: #1b2430; font-size: .78rem; font-weight: 640; font-variant-numeric: tabular-nums; }
.mgt-detail { margin-bottom: 1.4rem; scroll-margin-top: 1rem; } .mgt-detail > header { flex-wrap: wrap; } .mgt-detail > header .cbx-clear { margin-left: auto; align-self: center; } .mgt-detail .mgt-panel-body { display: block; }
.mgt-detail-note { margin: .7rem 0 0; color: #667085; font-size: .78rem; }
.mgt-pages { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: .7rem; color: #667085; font-size: .84rem; }
#actividad, #agenda-rapida { scroll-margin-top: 1rem; }
.mgt-act .mgt-panel > header { flex-wrap: nowrap; } .mgt-act .mgt-panel > header > div { flex: 1 1 14rem; min-width: 0; } #agenda-rapida > header { flex-wrap: wrap; }
.mgt-detail td:first-child, .mgt-detail td[data-label="Nueva fecha"], .mgt-detail td small { white-space: nowrap; }

/* Control de gestión, etapa 9.3.3: informes de seguimiento de Operación y agenda. */
.mgt-follow { scroll-margin-top: 1rem; } .mgt-follow .mgt-panel > header { position: relative; padding-right: 2.6rem; } .mgt-follow .mgt-panel > header .mgt-info { top: .9rem; right: .9rem; } .mgt-follow .mgt-panel > header .mgt-info p { top: 2.4rem; left: auto; right: 0; width: min(22rem, 80vw); }
.mgt-follow .mgt-panel-body { display: block; } #inasistencias, #sin-proxima, #ocupacion-tabla { scroll-margin-top: 1rem; }
.mgt-bars.small { margin: 1rem 0 0; } .mgt-bars.small .mgt-plot { height: 7.5rem; } .mgt-bars.missed { --c: #d14343; --c-strong: #a02c2c; } .mgt-bars.ratep { --c: #64748b; --c-strong: #475569; }
.mgt-compare { display: grid; gap: .9rem; margin: 0; padding: 0; list-style: none; }
.mgt-compare li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; align-items: baseline; }
.mgt-compare span { display: grid; } .mgt-compare strong { color: #1b2430; font-size: .88rem; font-weight: 600; } .mgt-compare em { color: #667085; font-size: .74rem; font-style: normal; }
.mgt-compare b { color: #1b2430; font-size: 1.15rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.mgt-compare i { grid-column: 1 / -1; height: 10px; border-radius: 5px; background: #eef1f6; } .mgt-compare u { display: block; height: 100%; min-width: 3px; border-radius: 5px; text-decoration: none; }
.mgt-compare .cancelled u { background: #b98522; } .mgt-compare .no_show u { background: #d14343; } .mgt-compare .moved u { background: var(--brand-focus); } .mgt-compare small { grid-column: 1 / -1; font-size: .78rem; }
.mgt-list { margin-top: 1rem; } .mgt-list td small { white-space: nowrap; }
.mgt-sit { display: inline-block; padding: .1rem .55rem; border: 1px solid #e4eaf1; border-radius: 999px; background: #f8fafc; color: #475569; font-size: .76rem; font-weight: 560; white-space: nowrap; }
.mgt-sit.none { border-color: #f1dfbd; background: #fffaf0; color: #7a5413; } .mgt-sit.rescheduled { border-color: #c4e3de; background: #ecf6f4; color: #0b5f58; }
.mgt-more { margin: .7rem 0 0; color: #667085; font-size: .84rem; } .mgt-more span { margin-left: .4rem; font-size: .78rem; }
.mgt-outside { margin: 0 0 1rem; } .mgt-outside td { white-space: nowrap; }
.mgt-list td a, .mgt-list td[data-label="Última atención"], .mgt-list td[data-label="Nueva fecha"] { white-space: nowrap; } .mgt-list td a strong { white-space: normal; }

/* Control de gestión, etapa 9.3.4: ámbito a la vista en cada informe, indicadores que filtran su lista y tablas que
   no cortan columnas (las celdas se acomodan en varias líneas; si aun así no cabe, la tabla se desplaza dentro de su caja). */
.mgt-scope { display: inline-block; margin-left: .2rem; padding: .05rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); color: #475569; font-size: .74rem; font-weight: 540; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mgt-applied em { color: #9a6a1a; font-style: normal; }
a.mgt-move.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.mgt-filtered { margin: .8rem 0 0; color: #475569; font-size: .84rem; } .mgt-filtered strong { color: #1b2430; }
.mgt-list table { table-layout: auto; min-width: 46rem; font-size: .83rem; } .mgt-list th, .mgt-list td { padding: .5rem .6rem; } .mgt-list th { white-space: normal; line-height: 1.25; }
.mgt-list td { overflow-wrap: anywhere; } .mgt-list .mgt-sit { white-space: normal; text-align: center; }
.mgt-acts { white-space: nowrap; text-align: right; } .mgt-acts a { display: inline-block; margin-left: .6rem; font-size: .78rem; white-space: nowrap; }
@media (max-width: 720px) { .mgt-list table { min-width: 0; } .mgt-acts { justify-content: flex-end; } .mgt-acts::before { content: none !important; } .mgt-scope { margin: .2rem 0 0; white-space: normal; } }
.mgt-list .mgt-acts a { display: block; margin: 0 0 .15rem; } .mgt-list th, .mgt-list td { padding: .5rem .5rem; } .mgt-list td small { white-space: nowrap; } .mgt-list th a { white-space: normal; }
@media (max-width: 720px) { .mgt-list .mgt-acts a { display: inline-block; margin-left: .8rem; } }
.mgt-list th { font-size: .66rem; letter-spacing: .02em; } .mgt-list th, .mgt-list td { padding: .5rem .42rem; } .mgt-list th:first-child, .mgt-list td:first-child { padding-left: .8rem; }
.mgt-filters label:first-child { flex: 1 1 15rem; max-width: 19rem; }

/* Dar cita (14 de octubre de 2026): formulario compacto en una tarjeta de dos columnas, con tres bloques numerados.
   Solo es presentación: los campos y sus scripts son los de siempre. */
.book { max-width: 66rem; margin: 0 auto; }
.book-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; margin-bottom: .9rem; }
.book-head h1 { margin: 0; color: #1b2430; font-size: 1.4rem; font-weight: 660; } .book-head p { margin: .15rem 0 0; color: #667085; font-size: .88rem; }
.book-context { display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .35rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #475569; font-size: .8rem; }
.book-context svg { width: .95rem; height: .95rem; color: var(--brand-deep); }
form.book-card { display: grid; gap: 0; max-width: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px -10px rgba(16, 24, 40, .12); }
.book-block { padding: 1.05rem 1.4rem 1.15rem; } .book-block + .book-block { border-top: 1px solid #f1f5f9; }
.book-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .75rem; }
.book-block h2 { display: flex; align-items: center; gap: .5rem; margin: 0; color: #1b2430; font-size: .95rem; font-weight: 640; }
.book-num { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .76rem; font-weight: 700; }
.book-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; } .book-field.wide { grid-column: 1 / -1; }
.book-field { display: grid; gap: .3rem; margin: 0; min-width: 0; } .book-field > span { color: #475569; font-size: .8rem; font-weight: 560; } .book-field em { color: #98a2b3; font-style: normal; font-weight: 400; } .book-field .req { color: #c53a3a; }
.book-field input, .book-field select { width: 100%; max-width: none; height: 2.55rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; }
.book-mode { display: inline-flex; } .book-mode label { display: inline-flex; align-items: center; margin: 0; cursor: pointer; }
.book-mode input { position: absolute; opacity: 0; pointer-events: none; }
.book-mode label span { padding: .35rem .85rem; border-radius: 8px; color: #475569; font-size: .84rem; font-weight: 560; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.book-mode label:has(input:checked) span { background: #fff; color: var(--brand); box-shadow: 0 1px 2px rgba(16, 24, 40, .14); }
.book-mode label:has(input:focus-visible) span { outline: 2px solid rgba(79, 70, 229, .55); outline-offset: 1px; }
fieldset.book-search, fieldset.book-new { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; } fieldset[hidden] { display: none; }
.book-search-input { position: relative; display: block; } .book-search-input svg { position: absolute; top: 50%; left: .8rem; width: 1rem; height: 1rem; color: #98a2b3; transform: translateY(-50%); pointer-events: none; }
.book-search-input input { padding-left: 2.3rem; }
.book-help { color: #98a2b3; font-size: .76rem; }
fieldset.book-new .fields { gap: .7rem 1rem; } fieldset.book-new .section-label { margin: .3rem 0 .1rem; }
.book-info { position: relative; } .book-info summary { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; color: #98a2b3; list-style: none; cursor: pointer; } .book-info summary::-webkit-details-marker { display: none; }
.book-info summary svg { width: 1rem; height: 1rem; } .book-info summary:hover, .book-info[open] summary { background: var(--brand-soft); color: var(--brand); }
.book-info p { position: absolute; top: 2rem; right: 0; z-index: 5; width: min(22rem, 80vw); margin: 0; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); color: #475569; font-size: .8rem; line-height: 1.45; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; padding: .9rem 1.4rem; border-top: 1px solid #f1f5f9; border-radius: 0 0 16px 16px; background: #fafbff; }
.book-grow { flex: 1; } .book-actions .button, .book-actions button { height: 2.6rem; }
.book-over { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: #475569; font-size: .86rem; font-weight: 540; } .book-over input { width: 1rem; height: 1rem; }
.book-tip { position: relative; display: inline-grid; place-items: center; color: #98a2b3; outline: none; } .book-tip svg { width: .95rem; height: .95rem; }
.book-tip em { display: none; position: absolute; bottom: calc(100% + .4rem); left: -1rem; z-index: 5; width: min(18rem, 75vw); padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); color: #475569; font-size: .78rem; font-style: normal; font-weight: 400; line-height: 1.4; }
.book-tip:hover em, .book-tip:focus em { display: block; } .book-tip:hover, .book-tip:focus { color: var(--brand); }
.book-error, .book-note { display: flex; align-items: flex-start; gap: .5rem; margin: 1rem 1.4rem 0; padding: .6rem .8rem; border-radius: 10px; font-size: .86rem; }
.book-error { border: 1px solid #f3c7c7; background: #fdf3f3; color: #a02c2c; } .book-note { border: 1px solid var(--line); background: #f8fafc; color: #475569; }
.book-error svg, .book-note svg { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
@media (max-width: 720px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); } .book-block { padding: .9rem 1rem 1rem; } .book-actions { padding: .9rem 1rem; }
  .book-actions .button, .book-actions button { flex: 1 1 100%; justify-content: center; } .book-grow { display: none; } .book-over { flex: 1 1 100%; }
  .book-mode { width: 100%; } .book-mode label { flex: 1; } .book-mode label span { width: 100%; text-align: center; }
}
.book-actions button[aria-disabled="true"] { opacity: .72; cursor: progress; }

/* Nuevo pago (14 de octubre de 2026): tres pasos numerados y el total que se arma solo. */
.payc-step { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .35rem; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: .7rem; letter-spacing: 0; vertical-align: 1px; }
.payc-panel h3 em { color: #98a2b3; font-style: normal; font-weight: 500; letter-spacing: 0; text-transform: none; }
.payc-extra { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: end; gap: .35rem 1rem; margin: 1.1rem 0 .2rem; }
.payc-extra h3 { grid-column: 1 / -1; margin: 0 0 .2rem; }
.payc-extra label { display: grid; gap: .3rem; margin: 0; } .payc-extra label > span { color: #475569; font-size: .8rem; font-weight: 540; }
.payc-extra input { width: 100%; max-width: none; height: 2.5rem; border-color: #dce4ee; border-radius: 10px; box-shadow: none; font-variant-numeric: tabular-nums; }
.payc-extra small { align-self: center; color: #667085; font-size: .78rem; line-height: 1.4; }
.payc-panel > form > h3 { margin-top: 1.1rem; }
.payc-sum .grand { padding-left: 1.4rem; border-left: 1px solid #e4eaf1; } .payc-sum .grand dd { font-size: 1.3rem; color: var(--brand-deep); }
@media (max-width: 720px) { .payc-extra { grid-template-columns: minmax(0, 1fr); } .payc-sum .grand { padding-left: 0; border-left: 0; } }

/* Plan de atención, estado financiero de cada prestación (14 de octubre de 2026). El círculo y el estado clínico no
   cambian; la deuda de lo realizado se lee en ámbar, nunca en rojo. */
.plan-group .item-state svg, .item-owe svg, .owe-sum svg { flex: none; width: .85rem; height: .85rem; }
.plan-group .item-state.paid svg { width: .75rem; height: .75rem; }
.plan-group .item-state.owe { background: #fff4dc; border-color: #ecc983; color: #8a5a00; font-weight: 650; }
.plan-group .item-state.pre { background: #f2f4f7; border-color: #e4eaf1; color: #475569; }
.item-owe { display: inline-flex; align-items: center; gap: .3rem; color: #8a5a00; font-size: .76rem; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-group tr.item-owes td.item-status { box-shadow: inset 3px 0 0 #e0b04f; background: linear-gradient(90deg, #fffaf0, transparent 70%); }
.history-money .owe { border-color: #f0d9a8; background: #fffaf0; } .history-money .owe dd { color: #8a5a00; }
.owe-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: .2rem 0 .8rem; }
.owe-filter { display: inline-flex; padding: .2rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.owe-filter button { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .8rem; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #475569; font-size: .82rem; font-weight: 560; }
.owe-filter button.current { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.owe-filter button b { min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; background: #fff4dc; color: #8a5a00; font-size: .72rem; }
.owe-filter button:disabled { opacity: .55; cursor: default; }
.owe-sum { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: #667085; font-size: .84rem; }
.owe-sum.on { color: #475569; } .owe-sum.on svg { color: #b98522; } .owe-sum strong { color: #8a5a00; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .owe-filter { width: 100%; } .owe-filter button { flex: 1; justify-content: center; padding: 0 .5rem; } }
.plan-group .item-state.owe::before { display: none; }
@media (max-width: 760px) { .plan-group tr.item-owes td.item-status { box-shadow: none; background: none; } .plan-group > table tbody tr.item-owes { box-shadow: inset 3px 0 0 #e0b04f; } }
.payc-nopick { display: inline-grid; place-items: center; width: 1rem; height: 1rem; color: #c0c8d4; } .payc-nopick svg { width: .9rem; height: .9rem; }
.payc-nothing { display: flex; align-items: flex-start; gap: .5rem; margin: .2rem 0 .7rem; padding: .6rem .8rem; border: 1px solid #f0d9a8; border-radius: 10px; background: #fffaf0; color: #6b4a00; font-size: .84rem; line-height: 1.45; }
.payc-nothing svg { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; color: #b98522; }

/* Especialidad de cada categoría (15 de octubre de 2026). */
.spc-back { margin: 0 0 .2rem; font-size: .84rem; }
.spc-card { padding: 0; overflow: hidden; }
.spc-intro { padding: 1rem 1.25rem .4rem; } .spc-intro p { margin: 0 0 .4rem; color: #475569; font-size: .88rem; }
.spc-pending, .spc-count { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: #fff4dc; color: #8a5a00; font-size: .76rem; font-weight: 650; }
.spc-scroll { overflow-x: auto; }
.spc-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.spc-table th { padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: #f8fafc; color: #667085; font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.spc-table td { padding: .6rem .8rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.spc-table th.spc-flag { width: 7.2rem; text-align: center; white-space: normal; line-height: 1.25; } .spc-table td.spc-flag { text-align: center; }
.spc-flag label { display: inline-flex; margin: 0; cursor: pointer; } .spc-flag input { width: 1.05rem; height: 1.05rem; }
.spc-flag-label { display: none; }
.spc-cat strong { display: block; max-width: 22rem; overflow: hidden; color: #1b2430; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.spc-cat small { color: #98a2b3; font-size: .76rem; }
.spc-pick { min-width: 15rem; } .spc-pick select { width: 100%; max-width: 19rem; }
.spc-proposed { display: inline-block; margin-top: .2rem; color: var(--brand); font-size: .72rem; font-weight: 600; }
tr.spc-new td:first-child { box-shadow: inset 3px 0 0 #e0b04f; }
.spc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .7rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line); background: #fafbff; }
.spc-foot .hint { flex: 1 1 18rem; margin: 0; }
@media (max-width: 760px) {
  .spc-table thead { display: none; } .spc-table, .spc-table tbody, .spc-table tr, .spc-table td { display: block; }
  .spc-table tr { padding: .7rem 1rem; border-bottom: 1px solid var(--line); } .spc-table td { padding: .25rem 0; border: 0; text-align: left !important; }
  .spc-pick select { max-width: none; } .spc-flag-label { display: inline; margin-left: .45rem; } .spc-flag label { align-items: center; }
  .spc-cat strong { max-width: none; white-space: normal; } tr.spc-new td:first-child { box-shadow: none; } tr.spc-new { box-shadow: inset 3px 0 0 #e0b04f; }
}
.spc-link { display: block; margin-top: .15rem; font-size: .76rem; font-weight: 560; }
.spc-items { table-layout: fixed; } .spc-items th.spc-flag { width: 9rem; } .spc-items td.spc-flag { padding-left: .4rem; padding-right: .6rem; }
.spc-items th:first-child, .spc-items td:first-child { padding-left: 1.25rem; } .spc-items th:last-child, .spc-items td:last-child { padding-right: 1.25rem; }
.spc-items .spc-cat strong { max-width: none; white-space: normal; }
.spc-tri select { width: 100%; min-width: 0; font-size: .8rem; }
.spc-items th.spc-flag:last-child { width: 9.7rem; }
@media (max-width: 760px) { .spc-items { table-layout: auto; } }
.spc-tri select.spc-set { border-color: var(--brand-line); background-color: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
tr.spc-own td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 760px) { .spc-tri { display: grid !important; gap: .2rem; width: 100%; } .spc-tri .spc-flag-label { margin: 0; color: #667085; font-size: .76rem; } tr.spc-own td:first-child { box-shadow: none; } tr.spc-own { box-shadow: inset 3px 0 0 var(--brand); } }

/* Una prestación abierta desde la auditoría (…/presupuestos/:id#item-<id>) queda marcada y a la vista. */
.plan-group tr[id^="item-"] { scroll-margin-top: 6rem; }
.plan-group tr:target td { background: #fff7e0; box-shadow: inset 0 1px 0 #f0d9a8, inset 0 -1px 0 #f0d9a8; }
.plan-group tr:target td:first-child { box-shadow: inset 4px 0 0 #e0b04f, inset 0 1px 0 #f0d9a8, inset 0 -1px 0 #f0d9a8; }
.plan-group tr:target td.item-status, .plan-group tr.item-owes:target td.item-status { background: #fff7e0; }
/* Plazo de duplicado (15 de octubre de 2026). */
.spc-table th.spc-days { width: 8.4rem; text-align: center; white-space: normal; line-height: 1.25; } .spc-table td.spc-days { text-align: center; }
.spc-days input { width: 5.2rem; height: 2.1rem; text-align: center; font-variant-numeric: tabular-nums; }
.spc-items th.spc-days { width: 8rem; } .spc-items td.spc-days input { width: 100%; }
.spc-days input.spc-set { border-color: var(--brand-line); background-color: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }
@media (max-width: 760px) { .spc-table td.spc-days { text-align: left; } .spc-days label { display: grid; gap: .2rem; } .spc-days .spc-flag-label { display: inline; margin: 0; color: #667085; font-size: .76rem; } .spc-days input { width: 8rem; } }
.spc-table:not(.spc-items) { table-layout: fixed; }
.spc-table:not(.spc-items) th:first-child { width: auto; } .spc-table:not(.spc-items) th:nth-child(2) { width: 12.5rem; }
.spc-table:not(.spc-items) th.spc-flag { width: 6.9rem; padding-left: .3rem; padding-right: .3rem; } .spc-table:not(.spc-items) th.spc-days { width: 7.4rem; padding-right: 1.1rem; }
.spc-table:not(.spc-items) .spc-pick { min-width: 0; } .spc-table:not(.spc-items) td.spc-days { padding-right: 1.1rem; }
.spc-table:not(.spc-items) .spc-cat strong { white-space: normal; }
@media (max-width: 760px) { .spc-table:not(.spc-items) { table-layout: auto; } }

/* Pestañas de la ficha del paciente fijas al bajar la pantalla (18 de octubre de 2026, pedido del dueño): en la ficha,
   dentro de un plan y en las demás páginas del paciente. Quedan bajo la barra superior (3,75rem; bajo 760 px la barra no
   es fija y quedan arriba del todo). Mientras están fijas (.is-stuck, de app.js) muestran una sombra leve y, en
   pantallas anchas, el nombre del paciente. Siempre una sola línea: si no cabe, se desliza hacia el lado (sin barra visible). */
/* --clior-topbar-h: alto que ocupa arriba la barra superior fija (app.js lo mide; 0 cuando la barra no es fija). */
:root { --clior-topbar-h: 3.75rem; }
@media (max-width: 760px) { :root { --clior-topbar-h: 0px; } }
.subtabs.pt-tabs { position: sticky; top: var(--clior-topbar-h); z-index: 25; flex-wrap: nowrap; align-items: center; gap: .25rem .85rem; margin-inline: -.75rem; padding-inline: .75rem; max-width: none; overflow-x: auto; scrollbar-width: none; background: var(--bg); }
/* max-width: none: en teléfono `main > *` las limita al 100 % y el margen negativo solo las corría a la izquierda (358 de 382 px). */
.subtabs.pt-tabs::-webkit-scrollbar { display: none; }
.subtabs.pt-tabs > * { flex: none; }
.subtabs.pt-tabs a { font-size: .92rem; white-space: nowrap; }
.pt-tabs .pt-name { display: none; max-width: 13rem; overflow: hidden; color: var(--ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pt-tabs.is-stuck { box-shadow: 0 10px 16px -14px rgba(16, 24, 40, .45); }
.pt-tabs.is-stuck .pt-name { padding-right: .4rem; border-right: 1px solid var(--line-strong); }
/* El nombre solo donde caben también las nueve pestañas (en un notebook de 1280 ya no): las pestañas valen más. */
@media (min-width: 1480px) { .pt-tabs.is-stuck .pt-name { display: inline-block; } }
/* Barra compacta del presupuesto (BUDGET-STICKY-01): su lugar es un hueco de alto 0 fijo bajo la barra superior,
   encima de las pestañas (25) y debajo de la barra superior (30); no ocupa espacio, así mostrarla no mueve nada. Mientras
   se ve (html.is-bud-compact), las pestañas bajan justo debajo de ella (--bcb-h la define presupuesto-compacto.css). */
.bcb-slot { position: sticky; top: var(--clior-topbar-h); z-index: 26; height: 0; }
.bcb-slot ~ .subtabs.pt-tabs { transition: top var(--bcb-dur, 260ms) var(--motion-ease, ease); }
html.is-bud-compact .bcb-slot ~ .subtabs.pt-tabs { top: calc(var(--clior-topbar-h) + var(--bcb-h, 0px)); }
@media (prefers-reduced-motion: reduce) { .bcb-slot ~ .subtabs.pt-tabs { transition: none; } }
/* Una prestación a la que se llega por su ancla (#item-…, p. ej. desde la auditoría) queda bajo la barra compacta y las pestañas. */
html:has(.bcb-slot) .plan-group tr[id^="item-"] { scroll-margin-top: calc(var(--clior-topbar-h) + var(--bcb-h, 0px) + 3.5rem); }
html.mo-reduced .bcb-slot ~ .subtabs.pt-tabs { transition: none; }
@media print { .subtabs.pt-tabs { position: static; box-shadow: none; } .bcb-slot { display: none; } }

/* Aviso de la simulación diaria de la clínica de prueba: no se puede cerrar, insiste hasta que el dueño decide. */
.sim-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #fedf89; border-left: 4px solid #c28a2e; border-radius: 12px; background: #fffaeb; }
.sim-notice strong { display: block; color: #7a4f0a; }
.sim-notice span { color: #5b4a22; font-size: .88rem; }
.sim-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.sim-actions button { height: 2.1rem; padding: 0 .8rem; font-size: .84rem; }
.sim-actions .danger-text { color: #c53a3a; }

/* Plan abierto desde la auditoría: verde si la prestación cumple, ámbar si no (o requiere revisión). */
.plan-group tr[data-audit="pass"]:target td, .plan-group tr[data-audit="pass"]:target td.item-status { background: #ecfdf7; box-shadow: inset 0 1px 0 #c4e3de, inset 0 -1px 0 #c4e3de; }
.plan-group tr[data-audit="pass"]:target td:first-child { box-shadow: inset 4px 0 0 #0f766e, inset 0 1px 0 #c4e3de, inset 0 -1px 0 #c4e3de; }
.aud-plan-note { margin: 0 0 .6rem; padding: .5rem .8rem; border-radius: 10px; border: 1px solid #fedf89; background: #fffaeb; color: #7a4f0a; font-size: .86rem; font-weight: 600; }
.aud-plan-note.pass { border-color: #c4e3de; background: #ecfdf7; color: #0f766e; }
.aud-rule-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.aud-rule-chips a { padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .8rem; text-decoration: none; color: var(--ink); }
.aud-rule-chips a b { margin-left: .25rem; color: var(--brand-deep); }
.aud-rule-chips a.current { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-deep); font-weight: 600; }
.aud-scope-line { margin: 0 0 .5rem; font-size: .88rem; color: var(--muted); }

/* Horario de funcionamiento de la sucursal (BRANCH-HOURS-01): ficha de la sucursal y avisos en Horarios del profesional */
.bhr-card { max-width: none; margin-top: 1rem; }
.bhr-card .sch-head h3 .hist-state { margin-left: .5rem; vertical-align: 1px; font-size: .72rem; }
.bhr-card .sch-head > div { max-width: 44rem; }
button.bhr-copy { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; font-size: .82rem; }
button.bhr-copy svg { width: .9rem; height: .9rem; }
.bhr-error { margin: .9rem 1.3rem 0; }
.bhr-warn { display: flex; align-items: flex-start; gap: .45rem; margin: 0 .9rem .6rem; padding: .45rem .7rem; border: 1px solid #f3e2bd; border-radius: 9px; background: #fff7e8; color: #9a6a1a; font-size: .8rem; font-weight: 520; line-height: 1.4; }
.bhr-warn[hidden] { display: none; }
.bhr-warn svg { flex: none; width: .95rem; height: .95rem; margin-top: .1rem; }
@media (max-width: 760px) { button.bhr-copy { width: 100%; justify-content: center; } }

/* «Cajas con diferencias» lleva al listado filtrado, como «Cerradas sin revisar» (26 de octubre de 2026). */
.cbx-diffcard { position: relative; transition: border-color .16s ease; }
.cbx-diffcard:hover { border-color: var(--brand); }
.cbx-diffcard dt a.cbx-stretch { color: inherit; text-decoration: none; }
.cbx-diffcard dt a.cbx-stretch::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.cbx-diffcard dt a.cbx-stretch:focus-visible { outline: none; } .cbx-diffcard:has(a.cbx-stretch:focus-visible) { outline: 2px solid var(--brand-focus); outline-offset: 2px; }
.cbx-filters .cbx-check { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; align-self: end; min-height: 2.4rem; white-space: nowrap; }
.cbx-filters .cbx-check input { width: auto; margin: 0; }

/* Continuidad de ortodoncia (6 de noviembre de 2026, src/ortho/continuity.ts): panel del presupuesto, ficha y bandeja. */
.ort-continuity { display: inline-flex; align-items: center; gap: .35rem; margin: .35rem 0 0; padding: .2rem .55rem; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .78rem; font-weight: 600; line-height: 1.3; max-width: 100%; }
.ort-continuity svg { width: .85rem; height: .85rem; flex: none; }
.ort-continuity span { overflow: hidden; text-overflow: ellipsis; }
.ort-continuity-btn { font-size: .82rem; }

/* Foto de la persona dentro de su círculo (migración 146): reemplaza las iniciales y llena el círculo. Vale para el
   menú de la cuenta, Usuarios, la ficha del usuario y los mensajes (.chw-avatar en mensajes.css). */
.has-photo { overflow: hidden; }
.has-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.usr-avatar.has-photo, .avatar.has-photo { background: #e8eef7; }

/* Nuevo usuario: «¿Esta persona atiende pacientes?» y aviso del costo de un profesional (migración 150). También en
   Profesionales (marcar a alguien como profesional) y en Horarios (volver a agendarle). */
.usr-kind-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .6rem; }
.usr-kind-opt { display: flex; gap: .65rem; align-items: flex-start; padding: .8rem .9rem; border: 1px solid var(--line, #e4eaf1); border-radius: 12px; background: #fff; cursor: pointer; }
.usr-kind-opt:has(input:checked) { border-color: var(--brand, #4338ca); background: var(--brand-soft, #eef0fe); box-shadow: 0 0 0 1px var(--brand, #4338ca); }
.usr-kind-opt input { margin-top: .2rem; }
.usr-kind-opt strong { display: block; color: var(--brand-deep, #19243a); }
.usr-kind-opt small { display: block; margin-top: .15rem; color: var(--muted, #667085); font-size: .82rem; line-height: 1.4; }
.usr-cost { display: flex; gap: .7rem; align-items: flex-start; margin: .8rem 0 0; padding: .8rem .95rem; border: 1px solid #c9ead9; border-radius: 12px; background: #f1faf5; color: #1f4d3a; font-size: .88rem; line-height: 1.45; }
.usr-cost > svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.usr-cost p { margin: 0; }
.usr-cost.costs { border-color: #f1d9a6; background: #fff8ea; color: #6b4a12; }
.usr-cost .usr-cost-accept { display: flex; gap: .55rem; align-items: flex-start; margin-top: .6rem; padding: .6rem .7rem; border-radius: 9px; background: #fff; border: 1px solid #f1d9a6; color: #3d2b0a; font-weight: 520; cursor: pointer; }
.usr-cost .usr-cost-accept input { margin-top: .2rem; flex: none; }
.usr-cost .error { margin: 0 0 .5rem; }
.cli-accepts { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.cli-accepts li { padding: .55rem .7rem; border: 1px solid var(--line, #e4eaf1); border-radius: 10px; font-size: .86rem; }
.cli-accepts small { color: var(--muted, #667085); }

/* Trabajos de laboratorio (migración 151): bajo una prestación del plan, su trabajo de laboratorio. */
.lab-row { display: block; margin-top: .25rem; }
.lab-line { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: #0b6b63; text-decoration: none; }
.lab-line.late { color: #9a6a1a; font-weight: 600; }
.lab-line.closed { color: #667085; }
.lab-line svg { width: .9rem; height: .9rem; flex: none; }
a.lab-line:hover { text-decoration: underline; }
.lab-evo-note svg { flex: none; }
/* «Enviar a laboratorio» en el menú de la prestación: un enlace con el aspecto de las demás opciones. */
.plan-group td.row-actions .menu-pop a.link { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .45rem .6rem; border-radius: 8px; color: #1b2430; font-size: .85rem; font-weight: 450; text-decoration: none; }
.plan-group td.row-actions .menu-pop a.link:hover { background: var(--brand-soft); color: var(--brand-deep); }
.plan-group td.row-actions .menu-pop a.link svg { width: 1rem; height: 1rem; flex: none; }

/* Aviso de cierre por inactividad (public/sesion-inactividad.js). */
dialog.confirm.sesion-aviso { max-width: 26rem; }
dialog.confirm.sesion-aviso p strong { font-variant-numeric: tabular-nums; }
dialog.confirm .sesion-aviso-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1rem; }
dialog.confirm.sesion-aviso h2 { margin-top: 0; }