/* Lexend: tipografía elegida para todo el sistema de fichas (17-ago-2026).
   Diseñada con investigación centrada en fluidez lectora; recomendada para
   accesibilidad y neurodivergencia. Se usa como única familia (variando el
   peso para jerarquía) en vez de mezclar con una serif decorativa — una sola
   tipografía consistente reduce la carga cognitiva. */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --primary: #1E5E74;
  --primary-dark: #164a5c;
  --secondary: #4FB3BF;
  --accent: #F5A623;
  --bg: #f5f7f8;
  --panel: #ffffff;
  --panel-2: #f0f6f7;
  --border: #e2e8ea;
  --text: #1c2b32;
  --muted: #6b8188;
  --danger: #d64545;
  --danger-bg: #fdecec;
  --success: #1d9e75;
  --success-bg: #e6f7f1;
  --radius: 12px;
  font-family: 'Lexend', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); }

h1, h2, .brand-font { font-family: 'Lexend', sans-serif; font-weight: 600; }

.center-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 50px -25px rgba(30,94,116,0.3);
}

.logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo-row img { height: 56px; width: auto; display: block; }

h1 { font-size: 1.4rem; margin: 0; color: var(--primary-dark); }
h2 { font-size: 1.1rem; margin: 0 0 14px; color: var(--primary-dark); }
p.subtitle { color: var(--muted); margin: 0 0 24px; font-size: 0.92rem; line-height: 1.5; }

label { display: block; font-size: 0.82rem; color: var(--muted); font-weight: 500; margin-bottom: 6px; margin-top: 16px; }

input, select, textarea {
  width: 100%;
  padding: 11px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 0.94rem;
  font-family: inherit;
  transition: border-color 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--secondary);
}
input::placeholder, textarea::placeholder { color: #a8b8bc; }

textarea { resize: vertical; min-height: 100px; }

button, .btn-primary, .btn-secondary, .btn-danger, .btn-accent {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  transition: all 0.15s ease;
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
/* Los <a> con estas clases (ej: "Ir a la videollamada") deben verse
   siempre como botones, no como links de texto subrayado. */
a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-accent {
  text-decoration: none !important;
}

.btn-primary { background: var(--primary); color: #fff; width: 100%; margin-top: 22px; }
.btn-primary:hover { background: var(--primary-dark); }

.btn-secondary { background: var(--panel); color: var(--primary-dark); border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--panel-2); border-color: var(--secondary); }

.btn-danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.btn-danger:hover { background: var(--danger-bg); }

.btn-accent { background: var(--accent); color: #4a2e02; }
.btn-accent:hover { background: #e0961a; }

.error-msg {
  background: var(--danger-bg);
  border: 1px solid #f3c1c1;
  color: #a53333;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  margin-top: 14px;
  display: none;
}

/* --- Topbar: banda sólida color marca, igual al panel admin del sitio --- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  background: var(--primary);
  color: #fff;
}

.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar .brand img {
  height: 30px; width: 30px; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 3px;
}
.topbar .brand-title { font-family: 'Lexend', sans-serif; font-weight: 600; font-size: 1.05rem; color: #fff; }
.topbar .who { font-size: 0.85rem; color: #d8e8ec; }
.topbar .btn-secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.topbar .btn-secondary:hover { background: rgba(255,255,255,0.22); }

.layout { max-width: 1200px; margin: 0 auto; padding: 32px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* Filas de formulario con N campos que deben repartirse el ancho disponible
   y reacomodarse solas en pantallas angostas/tablet -- usado en los
   formularios de "Nueva Sesion Grupal" y "Nuevo Seminario" (01-sep-2026).
   auto-fit + minmax evita el problema de flex-wrap con min-width individual
   por item, que en anchos intermedios (tablet) envolvia los campos de forma
   pareja pero descoordinada; con grid quedan siempre en filas prolijas. */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  align-items: start;
}

/* --- Tarjetas con encabezado de color, como "Agregar Profesional" --- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 0 22px;
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: 0 4px 20px -10px rgba(30,94,116,0.12);
}

.panel > .flex-between:first-child,
.panel > h2:first-child {
  background: var(--primary);
  color: #fff;
  padding: 18px 24px;
  margin: 0 0 20px;
  border-radius: 0;
}
/* Encabezados de panel plegables (redistribución de ficha-detalle.html,
   30-ago-2026, pedido de Diego: separar lo esporádico -- Datos, Decisiones,
   Accesos, Solicitudes de copia -- a la izquierda, lo de uso frecuente --
   Intervenciones, Evaluaciones, Recursos -- a la derecha, todo colapsable
   para que no colapse la página). Reutiliza el chevron .ev-chevron/
   .ev-section-open que ya existía para el acordeón interno de
   evaluaciones-aplicar.js -- acá se aplica también al header del panel
   completo, no solo a un bloque interno. */
.panel-toggle { cursor: pointer; }
.panel > .flex-between:first-child h2 { color: #fff; margin: 0; }
.panel > .flex-between:first-child .btn-secondary { background: #fff; color: var(--primary-dark); border: none; }
.panel > .flex-between:first-child .btn-secondary:hover { background: #eef6f7; }

.panel > table { width: calc(100% - 48px); margin: 0 24px; }
.panel > p.muted { margin: 0 24px 16px; }

/* Formularios directos dentro de un .panel (Nueva Sesion Grupal, Nuevo
   Seminario, 01-sep-2026) -- .panel no trae padding horizontal propio
   (solo lo agrega su header via .panel > h2), asi que sin esta regla el
   <form> y sus campos quedan pegados al borde izquierdo del panel,
   desalineados respecto del titulo/descripcion que si tienen los 24px.
   Mismo margen que .panel > table y .panel > p.muted ya usan. */
.panel > form { margin: 0 24px; }
.panel > form .actions-row { margin-bottom: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr:hover { background: var(--panel-2); }
th:last-child, td:last-child { white-space: nowrap; text-align: right; }

.accounting-mini-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.accounting-mini-kpis > div { padding:12px; border:1px solid var(--border); border-radius:9px; background:var(--panel-2); }
.accounting-mini-kpis span { display:block; color:var(--muted); font-size:.7rem; text-transform:uppercase; }
.accounting-mini-kpis strong { display:block; color:var(--primary-dark); margin-top:5px; }
@media (max-width:600px) { .accounting-mini-kpis { grid-template-columns:1fr; } }
.weekly-summary-panel{background:linear-gradient(135deg,#f5fbfc,#fff);border-top:4px solid var(--secondary)}
.weekly-summary-panel .flex-between{align-items:flex-start}.weekly-summary-panel h2{margin-bottom:3px}.weekly-summary-panel p{margin:0}
/* Tarjetas horizontales apiladas hacia abajo (no en grilla de 3 columnas):
   pensadas para columnas angostas como .prof-col-left, donde 3 columnas
   dejaban la tarjeta de "Canceladas" amontonada/cortada (04-sep-2026,
   pedido de Diego). Cada fila es más baja que la tarjeta original. */
.weekly-summary-kpis{display:flex;flex-direction:column;gap:8px;padding:0 24px 20px}
.weekly-kpi{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:#fff}
.weekly-kpi-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.weekly-kpi-text span{font-size:.78rem;font-weight:700;color:var(--primary-dark)}
.weekly-kpi-text small{color:var(--muted);font-size:.68rem;line-height:1.3}
.weekly-kpi strong{font-size:1.4rem;line-height:1;color:var(--primary-dark);white-space:nowrap}
.weekly-kpi.pending{border-left:4px solid #dfaa3f}.weekly-kpi.attended{border-left:4px solid #42a77e}.weekly-kpi.cancelled{border-left:4px solid #d26b6b}

/* Agrupación por mes/día en tablas grandes (Citas, Sesiones Grupales,
   Seminarios -- 02-sep-2026, pedido de Diego: "organizar por días y
   posiblemente por mes... para que no colapse"). tr.tabla-mes/tabla-dia
   son filas separadoras DENTRO de la misma tabla (no un <details>, que no
   puede envolver <tr> válidamente); tr.tabla-toggle es una fila clicable
   que muestra/oculta el bloque siguiente (citas anteriores, sesiones ya
   realizadas/canceladas) agregando/quitando la clase .oculto en esas filas
   -- ver refreshCitas()/refreshGrupales()/refreshSeminarios().
*/
tr.tabla-mes td, tr.tabla-dia td {
  background: var(--panel-2);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 8px 10px;
}
tr.tabla-mes td { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; }
tr.tabla-toggle td {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 600;
  font-size: 0.82rem;
  background: var(--panel-2);
}
tr.tabla-toggle:hover td { background: var(--border); }
tr.oculto { display: none; }

.filtros-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 0 24px 16px; }
.filtros-row label { margin: 0 0 6px; }
.filtros-row select { min-width: 200px; }

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}
.badge-shared { background: #e6f1fb; color: var(--primary-dark); }
.badge-single { background: var(--success-bg); color: var(--success); }
.badge-pending { background: #faeeda; color: #854f0b; }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }

.pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pill button {
  background: none; border: none; color: var(--danger); padding: 0; font-size: 1rem; line-height: 1;
}

.actions-row { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.admin-field-section{display:flex;flex-direction:column;gap:3px;margin:22px 0 8px;padding:12px 14px;border-radius:9px}.admin-field-section strong{font-size:.84rem}.admin-field-section span{font-size:.74rem;color:var(--muted)}.admin-field-section.public-data{background:#eaf6f8;border-left:4px solid var(--secondary)}.admin-field-section.internal-data{background:#fff5df;border-left:4px solid var(--accent)}.schedule-block-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end;padding:10px 0;border-bottom:1px solid var(--border)}.schedule-block-row label{margin-top:0}.schedule-block-row button{margin-bottom:1px}@media(max-width:600px){.schedule-block-row{grid-template-columns:1fr 1fr}.schedule-block-row .schedule-day{grid-column:1/-1}}

.modal-backdrop {
  position: fixed; inset: 0; background: rgba(28,43,50,0.45);
  display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 30px 60px -20px rgba(30,94,116,0.35);
}
.modal > h2:first-child {
  background: var(--primary); color: #fff;
  margin: -28px -28px 22px; padding: 18px 28px;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Selector de horario de "Reagendar cita" y "Agendar cita" (portal del
   paciente) -- mismo patrón de grilla de botones que booking-widget.js usa
   en el sitio público, adaptado acá sin Tailwind (fichas/ no lo carga).
   Clase compartida (antes era #reagendar-slots nomás) porque "Agendar cita"
   necesita exactamente la misma grilla (28-ago-2026). */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 0 4px;
}
.slot-grid button {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--primary-dark);
  border-radius: 8px;
  padding: 8px 4px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.12s ease;
}
.slot-grid button:hover:not(:disabled) { border-color: var(--primary); }
.slot-grid button:disabled {
  color: var(--muted); border-color: var(--border);
  cursor: not-allowed; opacity: 0.5;
}
.slot-grid button.slot-selected {
  background: var(--primary); color: #fff; border-color: var(--primary);
}
.slot-grid p { grid-column: 1 / -1; }

/* Selector de profesional de "Agendar cita" -- lista de botones apilados
   (nombre + especialidad), mismo estado "seleccionado" que .slot-grid. */
.prof-pick-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.prof-pick-list button.prof-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; width: 100%;
}
.prof-pick-list button.prof-pick span { font-size: 0.8rem; color: var(--muted); font-weight: 400; }
.prof-pick-list button.prof-pick.slot-selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.prof-pick-list button.prof-pick.slot-selected span { color: #dcedf0; }

.muted { color: var(--muted); font-size: 0.85rem; }
.hidden { display: none !important; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.note-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
/* Desplegable: el <div class="note-head"> es el gatillo (cursor pointer +
   chevron), el cuerpo con el texto completo arranca oculto y se muestra
   recién al hacer click -- antes se listaban todas hacia abajo con el
   texto completo siempre visible, lo que se podía saturar con muchas
   intervenciones (pedido de Diego, 20-ago-2026). */
.note-card .note-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.note-card.note-open .note-head { margin-bottom: 6px; }
.note-card .note-author { font-size: 0.85rem; color: var(--primary-dark); font-weight: 600; }
.note-card .note-date { font-size: 0.76rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.note-card .note-chevron { transition: transform 0.15s ease; font-size: 0.85rem; }
.note-card.note-open .note-chevron { transform: rotate(180deg); }
.note-card .note-body { white-space: pre-wrap; font-size: 0.88rem; color: var(--text); }

/* Subtítulos de agrupación del historial: "Recientes" + un subtítulo por
   mes para las intervenciones más antiguas. */
.notas-subtitle {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--muted); margin: 18px 0 8px;
}
.notas-subtitle:first-child { margin-top: 0; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-weekday {
  text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; padding-bottom: 4px;
}
.cal-day {
  aspect-ratio: 1;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  background: var(--panel);
}
.cal-day:hover { border-color: var(--secondary); background: var(--panel-2); }
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-day.status-red { background: #fdecec; border-color: #f0b8b8; }
.cal-day.status-green { background: #e6f7f1; border-color: #9adfc4; }
.cal-day.today { border-width: 2px; border-color: var(--accent); }
.cal-day.selected { background: var(--primary); border-color: var(--primary); }
.cal-day.selected .cal-day-num { color: #fff; }
.cal-day-num { font-size: 0.85rem; font-weight: 500; }
/* Posición absoluta a propósito: el badge de cantidad de citas no debe
   sumar altura a la celda (antes era un hijo flex más, y las celdas con
   badge quedaban más altas que las demás, desajustando las filas del
   calendario). Con position:absolute el aspect-ratio:1 de .cal-day manda
   siempre, con o sin badge. */
.cal-day-count {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: var(--secondary);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 6px;
}
.cal-day.selected .cal-day-count { background: var(--accent); color: #4a2e02; }

.prof-layout {
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 24px;
  align-items: start;
}

/* Leyenda del calendario del portal profesional -- en columna (no en fila
   con flex-wrap) porque en .prof-col-left (angosta) el wrap dejaba las 3
   etiquetas repartidas de forma irregular (04-sep-2026, pedido de Diego). */
.cal-legend { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 0.76rem; color: var(--muted); }
.cal-legend-item { display: flex; align-items: center; gap: 7px; }
.cal-legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
@media (max-width: 900px) { .prof-layout { grid-template-columns: 1fr; } }

.ficha-layout {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) { .ficha-layout { grid-template-columns: 1fr; } }

/* Tablas: en vez de desbordar la pantalla (o apretar las columnas hasta que
   los botones de accion se amontonen uno encima del otro), permite scroll
   horizontal dentro de su propia caja. Umbral subido de 700px a 1024px
   (31-ago-2026, ver CLAUDE.md) -- las tablas de citas (admin.js/profesional.js)
   tienen 9-10 columnas y una celda de acciones con varios botones, que en un
   tablet (~768-1024px) ya no entraban y se apilaban en vertical. */
@media (max-width: 1024px) {
  .panel > table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .layout { padding: 14px; }
}

.tab-btn {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
.tab-btn:hover { border-color: var(--secondary); color: var(--primary-dark); }
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================================================
   Dashboard en bloques (portal del paciente, v1.1)
   ============================================================ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.dash-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  text-align: left;
  cursor: pointer;
  position: relative;
  font-family: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.dash-card:hover { border-color: var(--secondary); }
.dash-card:disabled { cursor: default; opacity: 0.6; }

.dash-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; margin-bottom: 14px;
}
.dash-icon.i-teal { background: #e1f0f2; color: var(--primary); }
.dash-icon.i-warm { background: #fdecd8; color: #a86620; }
.dash-icon.i-blue { background: #e6f1fb; color: #185fa5; }
.dash-icon.i-green { background: #eaf3de; color: #3b6d11; }
.dash-icon.i-pink { background: #fbeaf0; color: #993556; }

.dash-card h3 { font-size: 1rem; margin: 0 0 5px; color: var(--text); font-weight: 600; }
.dash-card p { font-size: 0.85rem; color: var(--muted); margin: 0 0 14px; line-height: 1.5; }
.dash-go { font-size: 0.82rem; color: var(--primary); font-weight: 600; }

.dash-badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--accent); color: #5c3814;
  font-size: 0.7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px;
}

.dash-hero {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; border: none;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  cursor: default;
}
.dash-hero .dash-avatar {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.dash-hero .dash-info { flex: 1; min-width: 200px; }
.dash-hero .dash-when { font-size: 0.76rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.dash-hero h3 { color: #fff; font-size: 1.1rem; margin: 0 0 3px; }
.dash-hero p { color: #dcedf0; margin: 0; font-size: 0.85rem; }
.dash-hero .btn-join { background: #fff; color: var(--primary); font-weight: 700; white-space: nowrap; }
/* Botones de reagendar/cancelar en la tarjeta destacada (portal del
   paciente) -- antes solo estaban en la tabla "Próximas citas", pedido de
   Diego (28-ago-2026) de repetirlos también acá para no obligar a entrar a
   "Mis citas" primero. */
.dash-hero .hero-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.dash-hero .hero-actions .btn-secondary,
.dash-hero .hero-actions .btn-join { margin: 0; width: auto; white-space: nowrap; }
.dash-hero .hero-actions .btn-secondary { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.dash-hero .hero-actions .btn-secondary:hover { background: rgba(255,255,255,0.24); }
.dash-hero .hero-actions .hero-cancelar { background: rgba(255,255,255,0.08); color: #ffdede; border: 1px solid rgba(255,140,140,0.5); }
.dash-hero .hero-actions .hero-cancelar:hover { background: rgba(255,90,90,0.22); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--primary); font-weight: 600; font-size: 0.88rem;
  cursor: pointer; margin-bottom: 18px; background: none; border: none; padding: 0; font-family: inherit;
}

/* Recursos: lista de tarjetas */
.res-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 10px;
}
.res-item .res-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.res-item .res-info { flex: 1; min-width: 0; }
.res-item .res-title { font-weight: 600; font-size: 0.92rem; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.res-item .res-desc { font-size: 0.82rem; color: var(--muted); margin-bottom: 3px; }
.res-item .res-meta { font-size: 0.74rem; color: var(--muted); }
.new-dot { background: var(--accent); color: #5c3814; font-size: 0.66rem; font-weight: 700; padding: 2px 9px; border-radius: 20px; }

/* Widget "Evaluaciones y test" (evaluaciones-aplicar.js), compartido entre
   atencion.html y ficha-detalle.html. 7 botones de categoría + botón de
   Anamnesis (04-sep-2026, ver evaluaciones-aplicar.js) + acordeón de
   evaluaciones aplicadas colapsado por defecto + modal multi-paso. */
.ev-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; margin: 10px 0 6px;
}
.ev-cat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 8px; cursor: pointer; font-family: inherit;
  font-size: 0.78rem; font-weight: 600; color: var(--primary-dark); text-align: center;
}
.ev-cat-btn:hover { border-color: var(--secondary); }
.ev-cat-btn i { font-size: 1.3rem; color: var(--secondary); }

.ev-section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; padding: 10px 0; font-weight: 600; color: var(--primary-dark);
  border-top: 1px solid var(--border); margin-top: 16px;
}
.ev-chevron { transition: transform 0.15s ease; }
.ev-section-open .ev-chevron { transform: rotate(180deg); }
.ev-section-body { padding-top: 4px; }

.ev-picker-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.ev-picker-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; cursor: pointer; font-family: inherit; text-align: left; width: 100%;
}
.ev-picker-item:hover { border-color: var(--secondary); }

.modal.modal-wide { max-width: 720px; }

.ev-progress { height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; margin: 4px 0 20px; }
.ev-progress-fill { height: 100%; background: var(--secondary); transition: width 0.2s ease; }
.ev-step-label { font-size: 0.76rem; color: var(--muted); margin: -14px 0 14px; }

.ev-question { margin-bottom: 18px; }
.ev-question label.ev-question-text { font-weight: 600; margin-bottom: 6px; }
.ev-question .ev-opciones label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 4px 0; }
.ev-question .ev-opciones input { width: auto; margin: 0; }

.ev-revision-item { border-bottom: 1px solid var(--border); padding: 10px 0; }
.ev-revision-item:last-child { border-bottom: none; }
.ev-revision-item .ev-revision-pregunta { font-size: 0.82rem; color: var(--muted); }
.ev-revision-item .ev-revision-respuesta { font-weight: 500; }

.ev-resultado-box {
  background: var(--panel-2); border-radius: 12px; padding: 14px 16px; margin: 14px 0;
}
.ev-resultado-box .ev-puntaje { font-size: 1.4rem; font-weight: 700; color: var(--primary); }