/* ============================================
   Salus Infirmorum® - Sistema de Gestión Médica
   Inspirado en SACMED / MediClinic
   ============================================ */

/* Símbolo ® del nombre del producto */
.logo-mark sup,
.login-header h1 sup {
  font-size: 0.5em;
  vertical-align: super;
  margin-left: 1px;
  opacity: 0.85;
  font-weight: 500;
}

:root {
  --primary: #2c8fcc;
  --primary-dark: #1f6fa3;
  --primary-light: #e8f3fa;
  --sidebar-bg: #f5f7f8;
  --sidebar-text: #2c8fcc;
  --sidebar-hover: #e0e9ee;
  --sidebar-active: #d6e4ec;
  --border-color: #d8e0e5;
  --text-dark: #2c3e50;
  --text-muted: #7a8a99;
  --bg-body: #ffffff;
  --card-blue: #5ba8d8;
  --card-green: #7bc47f;
  --card-yellow: #e8b94e;
  --card-red: #e07b7b;
  --card-orange: #e8a06b;
  --card-teal: #6db8b3;
  --card-cyan: #6fb7d8;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --header-height: 50px;
  --sidebar-width: 220px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  background: var(--bg-body);
  line-height: 1.4;
}

/* ============== LAYOUT ============== */
.app-container { display: flex; min-height: 100vh; }

/* ============== SIDEBAR ============== */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100vh;
  position: sticky;
  top: 0;
}

.sidebar-logo {
  padding: 12px 12px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  overflow: hidden;
  min-width: 0;
}
.sidebar-logo img {
  max-width: 100%;
  max-height: 48px;
  height: auto;
  display: block;
  object-fit: contain;
}
.sidebar-logo .logo-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Tamaño que escala al ancho disponible del sidebar (~220px) */
  font-size: clamp(13px, 1.05vw + 8px, 18px);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.logo-mark {
  font-size: clamp(13px, 1.05vw + 8px, 18px);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 0;
}

.search-bar {
  padding: 8px 12px;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
  background: #fff;
}
.search-bar input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 12px;
  min-width: 0;
}
.search-bar select {
  padding: 5px 4px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 12px;
  background: #fff;
}
.search-bar button {
  padding: 5px 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
.search-bar button:hover { background: var(--primary-dark); }

.menu { list-style: none; padding: 4px 0; }
.menu-item { position: relative; }
.menu-link {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 13px;
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.15s;
}
.menu-link:hover { background: var(--sidebar-hover); }
.menu-link.active {
  background: var(--sidebar-active);
  border-left-color: var(--primary);
  font-weight: 600;
}
.menu-link i { margin-right: 10px; width: 16px; text-align: center; font-size: 14px; }
.menu-link .arrow { margin-left: auto; transition: transform 0.2s; font-size: 10px; }
.menu-link.expanded .arrow { transform: rotate(90deg); }

.submenu {
  list-style: none;
  background: #ebf0f3;
  display: none;
}
.submenu.open { display: block; }
.submenu .menu-link {
  padding-left: 36px;
  font-size: 12.5px;
}
.submenu .submenu .menu-link { padding-left: 56px; font-size: 12px; }

/* ============== MAIN ============== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ============== TOPBAR UNIFICADO (estilo medi.) ============== */
.topbar {
  height: var(--header-height);
  background: #fff;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Buscador global */
.topbar-search {
  flex: 1;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f8fa;
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
  position: relative; /* Sesión 19ª C14: para posicionar #topbar-suggestions absoluto */
}
.topbar-search:focus-within {
  border-color: var(--primary);
  background: #fff;
}
.topbar-search i {
  color: #9aa5b1;
  font-size: 14px;
  font-style: normal;
}
.topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text-dark);
  font-family: inherit;
  min-width: 0;
}
.topbar-search input::placeholder { color: #9aa5b1; }
.topbar-search kbd {
  background: #fff;
  border: 1px solid #e0e6ea;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: inherit;
  color: #7a8a99;
  font-weight: 500;
}

/* Badge del centro activo (multi-tenant) */
.topbar-centro {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  background: #eaf4fb;
  border: 1px solid #c8e1f2;
  border-radius: 8px;
  margin-left: 12px;
  cursor: default;
  transition: all 0.15s;
  max-width: 260px;
}
.topbar-centro.clickable { cursor: pointer; }
.topbar-centro.clickable:hover {
  background: #d8eaf8;
  border-color: var(--primary, #2c8fcc);
}
.topbar-centro i { font-size: 17px; line-height: 1; flex: none; }
.topbar-centro-info { line-height: 1.2; min-width: 0; }
.topbar-centro-label {
  font-size: 10px;
  color: #7d8794;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.topbar-centro-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark, #1f6fa3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.topbar-centro-arrow {
  font-size: 11px;
  color: var(--primary, #2c8fcc);
  margin-left: 2px;
  flex: none;
}

/* Acciones a la derecha */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.topbar-btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.topbar-btn-primary:hover { background: var(--primary-dark); }
.topbar-btn-primary:active { transform: scale(0.97); }
.topbar-plus { font-size: 18px; line-height: 1; }

.topbar-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: #f7f8fa;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}
.topbar-icon-btn i { font-style: normal; }
.topbar-icon-btn:hover { background: #ecf0f3; }
.topbar-icon-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid #fff;
}
.topbar-icon-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #e74c3c;
  color: #fff;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border: 2px solid #fff;
}
.topbar-icon-count.zero { background: #95a5a6; }

/* User chip */
.topbar-user-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: #f7f8fa;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.topbar-user-chip:hover { background: #ecf0f3; }
.topbar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f4a261, #e76f51);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.topbar-user-info { line-height: 1.2; min-width: 0; }
.topbar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.topbar-user-role {
  font-size: 11.5px;
  color: #7a8a99;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.topbar-chevron { color: #9aa5b1; font-size: 10px; }

/* Dropdowns: el de usuario y notificaciones se anclan dentro del topbar */
.topbar-user-chip .user-dropdown,
.topbar-icon-btn .notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
}
.topbar-user-chip.active .user-dropdown,
.topbar-icon-btn.active .notif-dropdown {
  display: block;
}

/* Responsive */
@media (max-width: 980px) {
  .topbar-user-info { display: none; }
  .topbar-user-chip { padding: 6px; }
  .topbar-search { max-width: none; }
}
@media (max-width: 640px) {
  .topbar-btn-primary {
    padding: 10px 12px;
    font-size: 0;
  }
  .topbar-btn-primary .topbar-plus { font-size: 20px; }
  .topbar-search kbd { display: none; }
}

.session-timer {
  background: var(--primary);
  color: #fff;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  position: fixed;
  right: 16px;
  top: calc(var(--header-height) + 8px);
  border-radius: 14px;
  z-index: 99;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none; /* No interferir con clicks debajo */
  opacity: 0.92;
}
.session-timer::before {
  content: '⏱';
  font-size: 13px;
}
/* En el dashboard, dejamos espacio extra en la primera fila para no superponer */
.dash-v2 .dash-row:first-child { margin-top: 32px; }

.content {
  padding: 24px;
  flex: 1;
  position: relative;
}

.page-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--text-dark);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============== DASHBOARD CARDS ============== */
.dashboard-section { margin-bottom: 24px; }
.dashboard-section h3 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--text-dark);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kpi-card {
  background: var(--card-blue);
  color: #fff;
  border-radius: 3px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  min-height: 110px;
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
  overflow: hidden;
}
.kpi-card:hover { transform: translateY(-2px); }
.kpi-card .kpi-icon {
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 36px;
  opacity: 0.95;
}
.kpi-card .kpi-value {
  font-size: 36px;
  font-weight: 300;
  text-align: right;
  line-height: 1;
  margin-bottom: 4px;
}
.kpi-card .kpi-label {
  text-align: right;
  font-size: 13px;
  opacity: 0.95;
}
.kpi-card .kpi-detail {
  margin-top: auto;
  text-align: right;
  font-size: 12px;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 6px;
  margin-top: 12px;
  cursor: pointer;
}
.kpi-card.green { background: var(--card-green); }
.kpi-card.yellow { background: var(--card-yellow); }
.kpi-card.red { background: var(--card-red); }
.kpi-card.orange { background: var(--card-orange); }
.kpi-card.teal { background: var(--card-teal); }
.kpi-card.cyan { background: var(--card-cyan); }

/* Date range selector */
.date-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  padding: 4px 8px;
  background: #fff;
  font-size: 13px;
}

/* ============== INFO PANELS ============== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.info-panel {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 3px;
}
.info-panel-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--primary);
}
.info-panel-body {
  padding: 16px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-panel-body .no-data {
  color: #c0c0c0;
  font-size: 28px;
  font-weight: 300;
  text-align: center;
}

/* ============== TABLES ============== */
.table-wrapper {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  overflow: hidden;
}
.table-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.table-toolbar {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.table-toolbar .search-input {
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 13px;
  width: 220px;
}
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  background: #f8f9fa;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid var(--border-color);
  border-top: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.data-table thead th:hover { background: #eef2f5; }
.data-table thead th .sort-icon { font-size: 9px; color: #aaa; margin-left: 4px; }
.data-table thead th.sorted-asc .sort-icon::after { content: ' ▲'; color: var(--primary); }
.data-table thead th.sorted-desc .sort-icon::after { content: ' ▼'; color: var(--primary); }
.data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f2;
}
.data-table tbody tr:hover { background: #f9fbfc; }
.data-table .empty-row td {
  text-align: left;
  color: var(--text-muted);
  padding: 14px 16px;
}
.data-table .actions-cell {
  white-space: nowrap;
  display: flex;
  gap: 4px;
}
.action-icon {
  color: var(--primary);
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 13px;
}
.action-icon:hover { background: var(--primary-light); }
.action-icon.danger { color: #e74c3c; }
.action-icon.danger:hover { background: #fdecea; }

.pagination {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
  background: #fafbfc;
  flex-wrap: wrap;
  gap: 8px;
}
.pagination-buttons { display: flex; gap: 4px; }
.page-btn {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid var(--border-color);
  cursor: pointer;
  font-size: 12px;
  border-radius: 2px;
}
.page-btn:hover:not(:disabled) { background: var(--primary-light); }
.page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.page-btn:disabled { color: #ccc; cursor: not-allowed; background: #f5f5f5; }

/* ============== BUTTONS ============== */
.btn {
  padding: 7px 14px;
  border: none;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
  text-decoration: none;
  color: #fff;
  background: var(--primary);
  transition: background 0.15s;
}
.btn:hover { background: var(--primary-dark); }
.btn-success { background: #27ae60; }
.btn-success:hover { background: #229954; }
.btn-danger { background: #e74c3c; }
.btn-info { background: #17a2b8; }
.btn-info:hover { background: #138496; }
.btn-warning {
  background: #d4ac0d;
  color: #fff;
}
.btn-warning:hover { background: #b7950b; }

/* ============== ENVIAR DOCUMENTOS POR CORREO ============== */
.env-docs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #f7f8fa;
  border: 1px solid #e3eaef;
  border-radius: 8px;
}
.env-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e3eaef;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.env-doc-item:hover {
  border-color: var(--primary);
  background: #f8fbfd;
}
.env-doc-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}
.env-doc-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}
.env-doc-label {
  flex: 1;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-dark);
}
.env-info-box {
  margin-top: 16px;
  padding: 12px 14px;
  background: #eaf4fb;
  border-left: 4px solid var(--primary);
  border-radius: 6px;
}
.env-info-box strong {
  font-size: 12.5px;
  color: var(--primary-dark);
  letter-spacing: 0.2px;
}
.btn-danger:hover { background: #c0392b; }
.btn-secondary { background: #95a5a6; }
.btn-secondary:hover { background: #7f8c8d; }
.btn-outline {
  background: #fff;
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn-outline:hover { background: var(--primary-light); }
.btn-sm { padding: 4px 9px; font-size: 12px; }

/* ============== MODALS ============== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 1000;
  padding: 50px 20px 20px;
  overflow-y: auto;
}
.modal-overlay.active { display: flex; }
.modal {
  background: #fff;
  border-radius: 4px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  animation: modalIn 0.2s ease-out;
}
.modal.large { max-width: 800px; }
.modal.xl { max-width: 90%; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(-15px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}
.modal-header h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-header h3 i { color: var(--primary); }
.modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.modal-body { padding: 20px; max-height: calc(100vh - 200px); overflow-y: auto; }
.modal-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fafbfc;
}

/* ============== TABS ============== */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
  gap: 0;
}
.tab {
  padding: 9px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  margin-bottom: -1px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--text-muted);
}
.tab.active {
  background: #fff;
  border-color: var(--border-color);
  border-bottom: 1px solid #fff;
  color: var(--text-dark);
  font-weight: 600;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============== FORMS ============== */
.form-group {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
  gap: 12px;
}
.form-group label {
  width: 130px;
  flex-shrink: 0;
  text-align: right;
  padding-top: 7px;
  font-size: 13px;
  color: var(--text-dark);
}
.form-group .form-control-wrap {
  flex: 1;
  min-width: 0;
}
.form-control {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(44, 143, 204, 0.15);
}
textarea.form-control { min-height: 70px; resize: vertical; }
.form-error {
  color: #e74c3c;
  font-size: 11px;
  margin-top: 3px;
  display: none;
}
.form-error.visible { display: block; }
.form-control.invalid { border-color: #e74c3c; }

.phone-input-wrap {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.phone-input-wrap .flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: #f8f9fa;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 12px;
}
.phone-input-wrap .phone-country {
  padding: 6px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  font-size: 12px;
  background: #f8f9fa;
  cursor: pointer;
  min-width: 90px;
  flex-shrink: 0;
}
.phone-input-wrap .phone-country:hover { background: #eef2f5; }
.phone-input-wrap .phone-country:focus { outline: 1px solid var(--primary); border-color: var(--primary); }
.phone-input-wrap input { flex: 1; min-width: 0; }
.phone-input-wrap .phone-num { font-variant-numeric: tabular-nums; }

/* Estilo para inputs en MAYÚSCULAS (visual hint) */
.upper-input {
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.upper-input::placeholder { letter-spacing: 0.3px; }

/* Estado de error para email y campos validados en línea */
.form-control.error {
  border-color: #c0392b !important;
  background: #fff5f5;
}
.form-error.show {
  display: block !important;
  color: #c0392b;
}

/* Checkbox inline para "sin apellido materno" */
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.checkbox-inline input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.form-control:disabled {
  background: #f0f2f5;
  color: #999;
  cursor: not-allowed;
}

/* ============== SELECTOR DE TIPO DE EVENTO ============== */
.evt-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 12px;
}
.evt-type-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e0e9ee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s;
}
.evt-type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-color: var(--primary);
}
.evt-type-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.evt-type-card-body {
  flex: 1;
  min-width: 0;
}
.evt-type-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.evt-type-card-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.evt-type-card-arrow {
  font-size: 18px;
  color: var(--primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* ============== MODAL DE EVENTO: PLANTILLA DINÁMICA ============== */
.evt-modal-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 10px;
  letter-spacing: 0.3px;
}
.evt-header-card {
  background: #fff;
  padding: 14px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.evt-section {
  background: #fff;
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.evt-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f4;
  letter-spacing: 0.3px;
}

/* Grid de 12 columnas para los campos */
.form-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px 16px;
}
.form-grid-12 .col-2 { grid-column: span 2; }
.form-grid-12 .col-3 { grid-column: span 3; }
.form-grid-12 .col-4 { grid-column: span 4; }
.form-grid-12 .col-6 { grid-column: span 6; }
.form-grid-12 .col-8 { grid-column: span 8; }
.form-grid-12 .col-12 { grid-column: span 12; }
.form-grid-12 .field { display: flex; flex-direction: column; }
.form-grid-12 .field label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 5px;
}
.form-grid-12 .field-highlight textarea {
  background: #fff9e6;
  border-color: #f0c97a;
}

/* ============== TEXTAREA EDITABLE VIA MODAL (recetas y exámenes generados) ============== */
.evt-field-wrap {
  position: relative;
}
.evt-field-preview {
  cursor: pointer;
  background: #f8fbfd !important;
  border-color: #b3d5e8 !important;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.evt-field-preview:hover {
  background: #eaf4fb !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(44,143,204,0.15);
}
.evt-field-preview:focus {
  outline: none;
}
.evt-field-edit-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  opacity: 0.9;
  transition: opacity 0.15s, background 0.15s, transform 0.1s;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(44,143,204,0.25);
}
.evt-field-wrap:hover .evt-field-edit-btn {
  opacity: 1;
}
.evt-field-edit-btn:hover {
  background: var(--primary-dark);
}
.evt-field-edit-btn:active {
  transform: scale(0.96);
}

/* ============== TOOLBAR INLINE BAJO TEXTAREA (recetas/exámenes) ============== */
.evt-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 4px;
}
.btn.btn-xs {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 5px;
}

/* ============== AUTOCOMPLETADO DE PATOLOGÍAS GES ============== */
.autocomplete-ges-wrap {
  position: relative;
}
.autocomplete-ges-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #b3d5e8;
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 12px rgba(28, 71, 105, 0.18);
  margin-top: -1px;
}
.autocomplete-ges-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dark);
  border-bottom: 1px solid #f0f3f6;
  line-height: 1.4;
  transition: background 0.12s, color 0.12s;
}
.autocomplete-ges-item:last-child {
  border-bottom: none;
}
.autocomplete-ges-item:hover,
.autocomplete-ges-item.highlighted {
  background: #eaf4fb;
  color: var(--primary-dark);
}
.autocomplete-ges-nombre {
  font-weight: 500;
}
.autocomplete-ges-item.highlighted .autocomplete-ges-nombre {
  font-weight: 600;
}
/* Scrollbar fina para el dropdown */
.autocomplete-ges-list::-webkit-scrollbar {
  width: 8px;
}
.autocomplete-ges-list::-webkit-scrollbar-thumb {
  background: #c5d4dd;
  border-radius: 4px;
}
.autocomplete-ges-list::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Input con sufijo (ej: "kg", "mmHg") */
.input-with-suffix {
  position: relative;
}
.input-with-suffix .field-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #999;
  pointer-events: none;
  font-weight: 500;
}
.input-with-suffix input {
  padding-right: 45px;
}
.field-help {
  font-size: 11px;
  color: #7a8a99;
  margin-top: 3px;
}

/* ============================================
   DASHBOARD V2 — Nuevo diseño con tarjetas y hero
   ============================================ */

.dash-v2 {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
}

/* Topbar interno del dashboard */
.dash-topbar {
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.dash-search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f8fa;
  border-radius: 12px;
  padding: 8px 14px;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.dash-search:focus-within {
  border-color: var(--primary);
  background: #fff;
}
.dash-search i {
  color: #9aa5b1;
  font-size: 14px;
  font-style: normal;
}
.dash-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--text-dark);
  font-family: inherit;
}
.dash-search input::placeholder { color: #9aa5b1; }
.dash-search kbd {
  background: #fff;
  border: 1px solid #e0e6ea;
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11px;
  font-family: inherit;
  color: #7a8a99;
  font-weight: 500;
}

.dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  transition: background 0.15s;
}
.dash-btn-primary:hover { background: var(--primary-dark); }
.dash-plus { font-size: 18px; line-height: 1; }

.dash-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: #f7f8fa;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.15s;
}
.dash-icon-btn i { font-style: normal; }
.dash-icon-btn:hover { background: #ecf0f3; }
.dash-icon-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  border: 2px solid #fff;
}

.dash-user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: #f7f8fa;
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.dash-user-chip:hover { background: #ecf0f3; }
.dash-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f4a261, #e76f51);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.dash-user-info { line-height: 1.2; }
.dash-user-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.dash-user-role { font-size: 11.5px; color: #7a8a99; }
.dash-chevron { color: #9aa5b1; font-size: 10px; }

/* Filas */
.dash-row { display: grid; gap: 16px; }
.dash-row-hero { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.dash-row-2cols { grid-template-columns: 1fr 1.4fr; }
.dash-row-3cols { grid-template-columns: 1fr 1fr 1fr; }

/* Hero principal (dark card) */
.dash-hero {
  background: linear-gradient(135deg, #1c2536 0%, #2a3447 100%);
  color: #fff;
  border-radius: 22px;
  padding: 22px 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: transform 0.2s;
}
.dash-hero:hover { transform: translateY(-2px); }
.dash-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(44,143,204,0.18) 0%, transparent 70%);
  border-radius: 50%;
}
.dash-hero-date {
  font-size: 12.5px;
  color: #c9d4e2;
  font-weight: 500;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.dash-hero-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.2;
  color: #fff;
  position: relative;
  z-index: 1;
}
.dash-hero-subtitle {
  font-size: 13.5px;
  color: #c9d4e2;
  line-height: 1.5;
  margin: 0 0 16px;
  position: relative;
  z-index: 1;
}
.dash-hero-subtitle strong { color: #fff; font-weight: 600; }
.dash-hero-actions {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.dash-hero-btn {
  background: #fff;
  color: #1c2536;
  border: none;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
}
.dash-hero-btn:hover { background: #f0f4f8; }
.dash-hero-btn-ghost {
  background: transparent;
  color: #c9d4e2;
  border: 1px solid rgba(255,255,255,0.18);
}
.dash-hero-btn-ghost:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* KPI cards */
.dash-kpi {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.dash-kpi-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.dash-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.dash-kpi-icon-blue   { background: #e0eef9; color: var(--primary); }
.dash-kpi-icon-green  { background: #dff5e7; color: #27ae60; }
.dash-kpi-icon-yellow { background: #fcf2da; color: #d4942a; }
.dash-kpi-icon-red    { background: #fde2e0; color: #c0392b; }

.dash-kpi-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  line-height: 1;
}
.dash-kpi-badge-blue   { background: #e0eef9; color: var(--primary); }
.dash-kpi-badge-green  { background: #dff5e7; color: #1b8348; }
.dash-kpi-badge-yellow { background: #fcf2da; color: #a86d12; }
.dash-kpi-badge-red    { background: #fde2e0; color: #a02b1a; }

.dash-kpi-value {
  font-size: 38px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  margin-top: 26px;
}
.dash-kpi-label {
  font-size: 13px;
  color: #7a8a99;
  margin-top: 6px;
  font-weight: 500;
}

/* Card genérica */
.dash-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.dash-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.dash-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: #9aa5b1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.dash-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin: 4px 0 0;
}
.dash-pill {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 12px;
}
.dash-pill-prev {
  background: rgba(255,255,255,0.5);
  color: #8a4b1f;
}
.dash-link {
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.dash-link:hover { text-decoration: underline; }

.dash-legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: #7a8a99;
  font-weight: 500;
}
.dash-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dash-dot-blue   { background: var(--primary); }
.dash-dot-green  { background: #27ae60; }
.dash-dot-orange { background: #e67e22; }
.dash-dot-teal   { background: #16a085; }
.dash-dot-dark   { background: #1c2536; }
.dash-dot-white  { background: #fff; border: 1.5px solid #cfd6df; }

/* Facturación grid 2x2 */
.dash-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dash-fact-item {
  background: #f7f8fa;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s;
}
.dash-fact-item:hover { background: #ecf0f3; }
.dash-fact-label {
  font-size: 13px;
  color: #5d6b7c;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dash-fact-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
}

/* Chart area */
.dash-chart-area {
  position: relative;
  min-height: 220px;
}
.dash-chart-area canvas {
  width: 100% !important;
  height: 220px !important;
  display: block;
}

/* Modo de llegada (barras) */
.dash-bars { display: flex; flex-direction: column; gap: 14px; }
.dash-bar-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.dash-bar-label {
  font-size: 13px;
  color: #5d6b7c;
  font-weight: 500;
}
.dash-bar-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-dark);
}
.dash-bar-track {
  width: 100%;
  height: 6px;
  background: #f0f3f6;
  border-radius: 3px;
  overflow: hidden;
}
.dash-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* Previsiones card naranja */
.dash-card-prev {
  background: linear-gradient(135deg, #fde9d4 0%, #fcd9b3 100%);
}
.dash-card-prev .dash-card-eyebrow,
.dash-card-prev .dash-card-title {
  color: #5b3617;
}
.dash-card-prev .dash-card-title { color: #2a1a07; }
.dash-prev-content {
  display: flex;
  gap: 20px;
  align-items: center;
}
.dash-prev-chart {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
}
.dash-prev-chart canvas {
  width: 140px !important;
  height: 140px !important;
}
.dash-prev-chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.dash-prev-chart-label {
  font-size: 10px;
  color: #8a4b1f;
  font-weight: 500;
}
.dash-prev-chart-value {
  font-size: 15px;
  font-weight: 700;
  color: #2a1a07;
}
.dash-prev-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.dash-prev-item {
  font-size: 13px;
  color: #2a1a07;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-prev-item strong {
  margin-left: auto;
  font-weight: 700;
}

/* Próximas citas */
.dash-next-list { display: flex; flex-direction: column; gap: 12px; }
.dash-next-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f7f8fa;
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.dash-next-item:hover { background: #ecf0f3; }
.dash-next-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.dash-next-desc {
  font-size: 12px;
  color: #7a8a99;
  margin-top: 2px;
}
.dash-next-time {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.dash-empty {
  color: #9aa5b1;
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 20px 0;
}

/* Responsive — mobile y tablet (desktop se compacta con clamp() más abajo) */
@media (max-width: 980px) {
  .dash-row-hero { grid-template-columns: 1fr 1fr; }
  .dash-row-hero .dash-hero { grid-column: span 2; min-height: 180px; }
  .dash-row-2cols, .dash-row-3cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dash-row-hero { grid-template-columns: 1fr; }
  .dash-row-hero .dash-hero { grid-column: span 1; }
  .dash-fact-grid { grid-template-columns: 1fr; }
  .dash-prev-content { flex-direction: column; }
  .dash-topbar { flex-direction: column; }
  .dash-search { width: 100%; }
  .dash-user-info { display: none; }
}

/* ============================================
   Sesión 16ª — Dashboard compact adaptivo (desktop)
   Objetivo: caber en 1366×768 y 1920×1080 sin scroll vertical.
   Estrategia: clamp() con vh para que dimensiones (paddings,
   min-heights, font-sizes, gaps) escalen con el alto real.
   Mobile (<= 980px) queda con el layout stack + scroll habitual.
   ============================================ */
@media (min-width: 981px) {
  .dash-v2 { gap: clamp(10px, 1.5vh, 18px); }

  /* Hero + 4 KPIs SIEMPRE en una sola fila en desktop.
     Anula el layout de fila propia que aplicaba <=1280px antes de sesión 16ª. */
  .dash-row-hero {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  }

  .dash-hero {
    min-height: clamp(130px, 20vh, 220px);
    padding: clamp(14px, 2vh, 22px) clamp(16px, 1.8vw, 24px);
  }
  .dash-hero-title { font-size: clamp(16px, 2.2vh, 24px); }
  .dash-hero-subtitle {
    font-size: clamp(11.5px, 1.3vh, 13.5px);
    margin: 0 0 clamp(6px, 1vh, 16px);
  }
  .dash-hero-btn { padding: clamp(6px, 1vh, 9px) clamp(12px, 1.5vw, 16px); font-size: clamp(11.5px, 1.3vh, 13px); }

  .dash-kpi {
    min-height: clamp(130px, 20vh, 220px);
    padding: clamp(10px, 1.5vh, 18px);
  }
  .dash-kpi-icon {
    width: clamp(34px, 4.5vh, 44px);
    height: clamp(34px, 4.5vh, 44px);
    font-size: clamp(14px, 1.8vh, 18px);
  }
  .dash-kpi-value {
    font-size: clamp(26px, 3.6vh, 38px);
    margin-top: clamp(8px, 1.4vh, 26px);
  }
  .dash-kpi-label { font-size: clamp(11.5px, 1.4vh, 13px); }

  /* Cards genéricas de filas 2 y 3 */
  .dash-card { padding: clamp(12px, 1.8vh, 22px); }
  .dash-card-title { font-size: clamp(15px, 2vh, 20px); }
  .dash-card-header { margin-bottom: clamp(8px, 1.3vh, 16px); }
}

/* ============== HISTORIAL DE MODIFICACIONES DEL EVENTO ============== */
.fc-historial {
  margin-top: 12px;
  background: #f7f8fa;
  border: 1px solid #e3eaef;
  border-radius: 8px;
  overflow: hidden;
}
.fc-historial summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: #5d6b7c;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fc-historial summary::-webkit-details-marker { display: none; }
.fc-historial summary::after {
  content: '▼';
  margin-left: auto;
  font-size: 10px;
  color: #9aa5b1;
  transition: transform 0.2s;
}
.fc-historial[open] summary::after { transform: rotate(180deg); }
.fc-historial summary:hover { background: #eef2f5; }
.fc-historial-list {
  padding: 4px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fc-historial-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e8ecef;
}
.fc-historial-item:first-child { border-top: none; }
.fc-historial-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.fc-historial-body { flex: 1; min-width: 0; font-size: 12.5px; }
.fc-historial-line { color: #2a3447; line-height: 1.4; }
.fc-historial-meta {
  font-size: 11.5px;
  color: #7a8a99;
  margin-top: 2px;
}

/* ============== EVENTOS CLÍNICOS — LISTA AGRUPADA ============== */
.ec-lista { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }

.ec-card {
  background: #fff;
  border: 1px solid #e3eaef;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.ec-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ec-card.expanded {
  border-color: var(--primary);
  box-shadow: 0 4px 18px rgba(44,143,204,0.12);
}

.ec-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.ec-card-header:hover { background: #f8fafc; }
.ec-card.expanded .ec-card-header { background: linear-gradient(90deg, #e0eef9 0%, #f8fafc 100%); }

.ec-card-icon {
  font-size: 26px;
  width: 44px;
  height: 44px;
  background: #e0eef9;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ec-card-info { flex: 1; min-width: 0; }
.ec-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  word-break: break-word;
}
.ec-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #7a8a99;
  margin-bottom: 6px;
}
.ec-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.ec-formato-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.2px;
}

.ec-card-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ec-card-print {
  white-space: nowrap;
}
.ec-card-arrow {
  font-size: 11px;
  color: #9aa5b1;
  transition: transform 0.2s;
}

.ec-card-body {
  padding: 16px 18px;
  background: #fafbfc;
  border-top: 1px solid #eef0f3;
}
.ec-card-body .fc-evento {
  margin-bottom: 18px;
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  border: 1px solid #eef0f3;
}
.ec-card-body .fc-evento:last-child { margin-bottom: 0; }

/* ============== DOCUMENTOS DEL PACIENTE ============== */
.docs-tab { margin-top: 12px; }
.docs-upload-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f7f8fa;
  border-radius: 10px;
  margin-bottom: 14px;
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #e3eaef;
  border-radius: 8px;
  overflow: hidden;
}
.docs-table thead {
  background: #f7f8fa;
}
.docs-table th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #7a8a99;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid #e3eaef;
}
.docs-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #eef0f3;
  font-size: 13px;
  vertical-align: middle;
}
.docs-table tbody tr:hover { background: #fafbfc; }
.docs-table tbody tr:last-child td { border-bottom: none; }
.docs-icon-cell {
  font-size: 22px;
  text-align: center;
}

/* ============== FORMATO DE ATENCIÓN EMBEBIDO EN FICHA ============== */
.fc-formato-embed {
  margin-top: 24px;
  background: #fff;
  border: 1px solid #e3eaef;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  animation: fc-embed-slide 0.3s ease;
}
@keyframes fc-embed-slide {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fc-formato-embed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #eef0f3;
}
.fc-formato-embed-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #7a8a99;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.fc-formato-embed-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.fc-formato-embed-ec-name {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a4a6e;
  letter-spacing: 0.3px;
}
.fc-formato-embed-body {
  padding: 18px;
  background: #fafbfc;
}
.fc-formato-embed-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  border-top: 1px solid #eef0f3;
}

/* ============== FIRMA Y TIMBRE EN PERFIL ============== */
.firma-timbre-info {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
.firma-timbre-info.completo {
  background: #e6f6ec;
  border-left: 3px solid #27ae60;
  color: #1a5132;
}
.firma-timbre-info.incompleto {
  background: #fef3f2;
  border-left: 3px solid #e74c3c;
  color: #842029;
}
.firma-uploader {
  display: flex;
  flex-direction: column;
}
.firma-preview-box {
  border: 2px dashed #c0d4e0;
  border-radius: 8px;
  background: #f8fbfd;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 6px;
  padding: 8px;
  transition: all 0.15s;
}
.firma-preview-box.has-image {
  border-style: solid;
  border-color: var(--primary);
  background:
    linear-gradient(45deg, #f0f4f6 25%, transparent 25%, transparent 75%, #f0f4f6 75%),
    linear-gradient(45deg, #f0f4f6 25%, transparent 25%, transparent 75%, #f0f4f6 75%);
  background-color: #fff;
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}
.firma-preview-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.firma-empty {
  text-align: center;
  color: #9aa5b1;
}
.firma-empty-icon {
  font-size: 36px;
  opacity: 0.5;
  margin-bottom: 4px;
}
.firma-empty-text {
  font-size: 12px;
  font-style: italic;
}
.firma-leyenda {
  margin-top: 8px;
  font-size: 11.5px;
  color: #7a8a99;
  line-height: 1.5;
  background: #fff9e6;
  border-left: 3px solid #f0c97a;
  padding: 8px 10px;
  border-radius: 4px;
}

/* ============== MODAL DE PRESCRIPCIÓN MÉDICA ============== */

/* Grid de Dosis · Medida · Cada · Frecuencia · Duración (5 columnas en desktop) */
.form-grid-rx {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.form-grid-rx .field {
  margin: 0;
  min-width: 0;
}
.form-grid-rx label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-grid-rx .form-control {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  height: 36px;
  box-sizing: border-box;
}
.form-grid-rx select.form-control {
  padding-right: 24px;
}

/* Tablet: 2 filas de columnas para que entre cómodamente */
@media (max-width: 900px) {
  .form-grid-rx {
    grid-template-columns: repeat(3, 1fr);
  }
  .form-grid-rx .rx-duracion-field {
    grid-column: span 3;
  }
}

/* Mobile: una columna por fila */
@media (max-width: 540px) {
  .form-grid-rx {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid-rx .rx-duracion-field {
    grid-column: span 2;
  }
}

/* Caja interna del formulario "Añadir medicamento" */
.rx-form {
  border: 1px dashed #c0d4e0;
  background: #f8fbfd;
  border-radius: 6px;
  padding: 14px;
}
.rx-form .field {
  margin-bottom: 12px;
}
.rx-form .field:last-child {
  margin-bottom: 0;
}
.rx-form > h4 {
  margin: 0 0 14px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

/* Asegurar que el modal large no se desborde en mobile */
.modal.large {
  max-width: min(720px, calc(100vw - 32px));
}
.modal.large .modal-body {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

/* Autocompletado de medicamentos */
.autocomplete-wrapper {
  position: relative;
}
.autocomplete-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  display: none;
  margin-top: 2px;
}
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f4f6;
  transition: background 0.1s;
}
.autocomplete-item:last-child {
  border-bottom: none;
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--primary-light);
}
.autocomplete-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.autocomplete-item-meta {
  display: flex;
  gap: 10px;
  font-size: 11px;
}
.autocomplete-item-pa {
  color: var(--primary);
  font-weight: 500;
}
.autocomplete-item-grupo {
  color: #7a8a99;
  font-style: italic;
}
.autocomplete-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: #7a8a99;
  font-style: italic;
  text-align: center;
}

/* Enlace dentro de field-help (ej: Listado de patologías GES) */
.field-help .ges-link,
.ges-link {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 11.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  border-bottom: 1px dashed var(--primary);
  transition: all 0.15s;
}
.field-help .ges-link:hover,
.ges-link:hover {
  color: var(--primary-dark);
  border-bottom-style: solid;
}

/* Switch inline (checkbox estilizado) */
.evt-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fbfd;
  border: 1px solid #e0e9ee;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  height: 100%;
  transition: all 0.15s;
}
.evt-switch:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.evt-switch input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
}
.evt-switch:has(input:checked) {
  background: var(--primary-light);
  border-color: var(--primary);
  font-weight: 600;
}
.evt-switch-label {
  flex: 1;
}

/* Repeater de filas (grupo familiar) */
.evt-repeater {
  border: 1px solid #e0e9ee;
  border-radius: 6px;
  overflow: hidden;
  overflow-x: auto;
}
.evt-repeater-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.evt-repeater-table th {
  background: #f0f5f8;
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.evt-repeater-table td {
  padding: 4px 6px;
  border-top: 1px solid #eef2f4;
}
.evt-repeater-table input {
  width: 100%;
  border: 1px solid transparent;
  padding: 6px 8px;
  font-size: 12px;
  background: transparent;
}
.evt-repeater-table input:focus {
  background: #fff;
  border-color: var(--primary);
  outline: none;
}

/* Mini-tabla en modo lectura (en ficha) */
.fc-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin: 4px 0;
}
.fc-mini-table th {
  background: #f8fbfd;
  padding: 6px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid #e0e9ee;
}
.fc-mini-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f0f2f4;
}

/* Sección de evento en lectura */
.fc-evento-seccion {
  margin: 12px 0;
}
.fc-evento-seccion-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  padding: 6px 0;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .evt-type-grid { grid-template-columns: 1fr; }
  .form-grid-12 [class^="col-"] { grid-column: span 12; }
}

/* ============== PESTAÑAS DE LA FICHA CLÍNICA ============== */
.fc-tabs {
  display: flex;
  gap: 0;
  background: #fff;
  border-bottom: 2px solid var(--border-color);
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.fc-tab {
  background: transparent;
  border: none;
  padding: 14px 24px;
  font-size: 13px;
  font-weight: 600;
  color: #7a8a99;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  font-family: inherit;
}
.fc-tab i {
  font-style: normal;
  font-size: 15px;
}
.fc-tab:hover {
  color: var(--primary);
  background: #f8fbfd;
}
.fc-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: #f8fbfd;
}
.fc-tab-count {
  background: var(--primary);
  color: #fff;
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 9px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.fc-tab-content {
  padding: 24px;
}

/* ============== SECCIÓN DE ANTECEDENTES ============== */
.ant-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(90deg, #e8f3fa 0%, #f8fbfd 100%);
  border-radius: 8px;
  border-left: 4px solid var(--primary);
}
.ant-section {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.ant-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eef2f4;
  letter-spacing: 0.2px;
}
.ant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 18px;
}
.ant-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ant-item label {
  font-size: 11px;
  font-weight: 600;
  color: #7a8a99;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ant-value {
  font-size: 13px;
  color: var(--text-dark);
  padding: 4px 0;
  font-weight: 500;
}
.ant-value.positive {
  color: #c0392b;
  font-weight: 700;
}
.ant-value.warning {
  color: #b35918;
  font-weight: 600;
}
.ant-textarea-display {
  margin-top: 12px;
}
.ant-textarea-display label {
  font-size: 11px;
  font-weight: 600;
  color: #7a8a99;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: block;
  margin-bottom: 6px;
}
.ant-textarea-display p {
  background: #f8fafb;
  border: 1px solid #eef2f4;
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0;
  font-size: 13px;
  color: var(--text-dark);
  white-space: pre-wrap;
  line-height: 1.5;
}
.ant-empty {
  color: #9aa5b1;
  font-style: italic;
  font-size: 12.5px;
  margin: 0;
}

/* Modal de edición de antecedentes */
.ant-fieldset {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 16px;
  background: #fff;
}
.ant-fieldset legend {
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.ant-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f8fbfd;
  border: 1px solid #e0e9ee;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  user-select: none;
}
.ant-check:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.ant-check input[type="checkbox"] {
  margin: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  cursor: pointer;
}
.ant-check:has(input:checked) {
  background: var(--primary-light);
  border-color: var(--primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  .fc-tab { padding: 12px 14px; font-size: 12px; }
  .ant-grid { grid-template-columns: 1fr; }
}

/* ============== NOTIFICACIONES: dropdown del topbar ============== */
.notif-dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafbfc;
  border-radius: 6px 6px 0 0;
}
.notif-dropdown-header h4 {
  margin: 0;
  font-size: 13px;
  color: var(--text-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.notif-badge-inline {
  background: #e74c3c;
  color: #fff;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.notif-mark-all {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.notif-mark-all:hover {
  background: var(--primary-light);
}
.notif-list {
  max-height: 360px;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid #f0f2f4;
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: #f8fbfd; }
.notif-item.unread {
  background: #fffaf0;
  border-left: 3px solid #f0ad4e;
}
.notif-item.unread:hover {
  background: #fff5e8;
}
.notif-item.read {
  opacity: 0.75;
}
.notif-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.notif-icon-info    { background: #e8f3fa; }
.notif-icon-warn    { background: #fff3cd; }
.notif-icon-success { background: #d4edda; }
.notif-icon-video   { background: #e8f7e8; }
.notif-item-body {
  flex: 1;
  min-width: 0;
}
.notif-item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 2px;
}
.notif-item-msg {
  font-size: 11.5px;
  color: #555;
  line-height: 1.4;
}
.notif-item-time {
  font-size: 10.5px;
  color: #999;
  margin-top: 3px;
}
.notif-item-dot {
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.notif-empty {
  padding: 40px 20px;
  text-align: center;
  color: #7a8a99;
  font-size: 13px;
}
.notif-empty p { margin: 8px 0 0; }

/* ============== NOTIFICACIONES: toasts ricos al hacer login ============== */
#notif-toast-container {
  position: fixed;
  top: 70px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.notif-toast {
  pointer-events: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  width: 340px;
  border-left: 4px solid var(--primary);
  cursor: pointer;
  animation: notifToastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.3s, transform 0.3s;
}
.notif-toast.closing {
  opacity: 0;
  transform: translateX(20px);
}
@keyframes notifToastIn {
  from { opacity: 0; transform: translateX(60px); }
  to { opacity: 1; transform: translateX(0); }
}
.notif-toast-info    { border-left-color: #3498db; }
.notif-toast-warn    { border-left-color: #f0ad4e; background: #fffdf6; }
.notif-toast-success { border-left-color: #27ae60; background: #f8fff9; }
.notif-toast-video   { border-left-color: #2c8fcc; background: #f5fbff; }
.notif-toast:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.notif-toast-icon {
  font-size: 24px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(44, 143, 204, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-toast-warn .notif-toast-icon    { background: #fff3cd; }
.notif-toast-success .notif-toast-icon { background: #d4edda; }
.notif-toast-video .notif-toast-icon   { background: #e8f7e8; }
.notif-toast-body { flex: 1; min-width: 0; }
.notif-toast-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.notif-toast-msg {
  font-size: 12px;
  color: #555;
  line-height: 1.45;
}
.notif-toast-close {
  background: transparent;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.notif-toast-close:hover { color: #e74c3c; }

/* Mejorar el dropdown del topbar para acomodar más contenido */
.notif-dropdown {
  width: 360px;
  max-width: 95vw;
}
.notif-dropdown.open {
  display: block;
}

@media (max-width: 768px) {
  .notif-toast {
    width: calc(100vw - 30px);
    margin: 0 5px;
  }
  #notif-toast-container { top: 60px; right: 5px; }
  .notif-dropdown {
    width: calc(100vw - 20px);
    right: 5px;
  }
}

/* ============== BADGE IMC EN FICHA CLÍNICA VISUAL ============== */
.fc-imc-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
}
.fc-imc-value strong {
  font-size: 14px;
}
.fc-imc-categoria {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-left: 10px;
  border-left: 1px solid currentColor;
  opacity: 0.85;
}

/* Al imprimir desde el navegador (Ctrl+P), el IMC se muestra plano,
   sin color ni pill, igual que el resto de los datos de la ficha. */
@media print {
  .fc-imc-value {
    background: transparent !important;
    color: inherit !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline !important;
  }
  .fc-imc-categoria {
    display: none !important;
  }
}

/* ============== MULTI-ROL: checkboxes de roles ============== */
.roles-checkboxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
}
.role-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #e0e9ee;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.role-check:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}
.role-check input[type="checkbox"] {
  margin: 3px 0 0 0;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary);
}
.role-check:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}
.role-check-content { flex: 1; min-width: 0; }
.role-check-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 4px;
}
.role-check-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

@media (max-width: 768px) {
  .roles-checkboxes { grid-template-columns: 1fr; }
}

/* Mejorar visibilidad de los badges de rol en tablas */
.profile-rol-badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* ============== BANNER DE SOLO LECTURA ============== */
.readonly-banner {
  background: linear-gradient(90deg, #fff9e6 0%, #fff3cd 100%);
  border: 1px solid #f0c97a;
  border-left: 5px solid #e0a82e;
  border-radius: 6px;
  padding: 12px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #6b4e0d;
}
.readonly-banner .readonly-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.readonly-banner strong {
  color: #4a3508;
}

/* ============== COMBOBOX (previsión con buscador) ============== */
.combo-picker {
  position: relative;
}
.combo-input-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.combo-input-wrap .form-control {
  padding-right: 30px;
  width: 100%;
}
.combo-arrow {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 28px;
  background: transparent;
  border: none;
  color: #7a8a99;
  cursor: pointer;
  font-size: 12px;
}
.combo-arrow:hover { color: var(--primary); }
.combo-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 1100;
}
.combo-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #f0f2f4;
  transition: background 0.1s;
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.active {
  background: var(--primary-light);
}
.combo-item.selected {
  background: #eaf3f9;
  font-weight: 600;
}
.combo-item.selected::before {
  content: '✓ ';
  color: var(--primary);
  margin-right: 4px;
}
.combo-item-name {
  font-size: 13px;
  color: var(--text-dark);
}
.combo-item mark {
  background: #fff3a0;
  color: var(--text-dark);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}
.combo-item-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}
.combo-item-tag.tipo-publica { background: #e8f3fa; color: #1f6fa3; }
.combo-item-tag.tipo-isapre { background: #fff3e0; color: #b35918; }
.combo-item-tag.tipo-mutual { background: #f3e8fa; color: #7a3f9e; }
.combo-item-tag.tipo-convenio { background: #e8f5e9; color: #2d8d3a; }
.combo-item-tag.tipo-particular { background: #f0f2f5; color: #555; }
.combo-empty {
  padding: 14px;
  text-align: center;
  color: #7a8a99;
  font-size: 13px;
  font-style: italic;
}

/* ============== ANTROPOMETRÍA: Peso, Estatura, IMC ============== */
.antropometria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 12px;
  padding: 14px;
  background: #f8fbfd;
  border: 1px solid #d8e6ee;
  border-radius: 6px;
  border-left: 4px solid var(--primary);
}
.antropometria-grid > div { display: flex; flex-direction: column; }
.antropometria-grid label {
  font-size: 12px;
  font-weight: 500;
  color: #555;
  margin-bottom: 4px;
}
.imc-display {
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  background: #f0f0f0;
  color: #555;
  border-width: 2px;
}
.imc-display.imc-low    { background: #fff3cd; color: #856404; border-color: #f5c842; }
.imc-display.imc-normal { background: #d4edda; color: #155724; border-color: #5cb85c; }
.imc-display.imc-over   { background: #fff3e0; color: #b35918; border-color: #e67e22; }
.imc-display.imc-ob1    { background: #ffe0d3; color: #a93226; border-color: #e74c3c; }
.imc-display.imc-ob2    { background: #ffcfc0; color: #922b21; border-color: #c0392b; }
.imc-display.imc-ob3    { background: #ffbcab; color: #7b241c; border-color: #922b21; }
.imc-label {
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.help-icon {
  color: var(--primary);
  cursor: help;
  margin-left: 4px;
  font-size: 14px;
}

/* ============== FORM GRID 2 COLUMNAS (estilo moderno) ============== */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.form-grid-2 .field {
  display: flex;
  flex-direction: column;
}
.form-grid-2 .field.full {
  grid-column: 1 / -1;
}
.form-grid-2 .field label {
  font-size: 12px;
  color: #444;
  margin-bottom: 4px;
  font-weight: 500;
}
.form-grid-2 .field .req {
  color: #e74c3c;
  font-weight: 700;
}
.form-grid-2 .field .form-control {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-grid-2 .field .form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44, 143, 204, 0.12);
}
.form-grid-2 .field .form-control.invalid {
  border-color: #e74c3c;
}
.form-grid-2 .field textarea.form-control {
  resize: vertical;
  min-height: 60px;
}
.form-grid-2 .field .form-error {
  font-size: 11px;
  color: #e74c3c;
  margin-top: 3px;
  display: none;
}
.form-grid-2 .field .form-error.visible { display: block; }

.form-grid-2 .phone-input-wrap {
  display: flex;
  gap: 0;
  align-items: stretch;
}
.form-grid-2 .phone-input-wrap .flag {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  background: #f8f9fa;
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 12px;
  color: #555;
  white-space: nowrap;
}
.form-grid-2 .phone-input-wrap .phone-country {
  padding: 8px 6px;
  background: #f8f9fa;
  border: 1px solid var(--border-color);
  border-right: none;
  border-radius: 6px 0 0 6px;
  font-size: 12px;
  color: #555;
  min-width: 95px;
  flex-shrink: 0;
  cursor: pointer;
}
.form-grid-2 .phone-input-wrap .phone-country:focus {
  outline: 1px solid var(--primary);
  border-color: var(--primary);
}
.form-grid-2 .phone-input-wrap .form-control {
  border-radius: 0 6px 6px 0;
  flex: 1;
  min-width: 0;
}

/* Botón principal redondeado en el modal de pacientes */
#paciente-modal .modal-footer .btn {
  border-radius: 6px;
  padding: 9px 22px;
  font-weight: 500;
}
#paciente-modal .modal-footer .btn-secondary {
  background: #fff;
  color: #555;
  border: 1px solid var(--border-color);
}
#paciente-modal .modal-footer .btn-secondary:hover {
  background: #f8f9fa;
}

/* Responsive: una columna en móvil */
@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}

/* ============== FICHA CLÍNICA (estilo Ficha General SACMED) ============== */
.fc-doc-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 30px 14px;
  border-bottom: 2px solid var(--primary);
  background: #fff;
}
.fc-empresa-info {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  min-width: 0;
  /* La info de empresa se muestra arriba del logo, en formato compacto */
  flex-direction: column;
  text-align: left;
}
.fc-empresa-logo {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}
.fc-empresa-logo-placeholder {
  width: 70px;
  height: 70px;
  background: var(--primary-light);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fc-empresa-logo-placeholder .fc-logo-icon {
  font-size: 38px;
  color: var(--primary);
  line-height: 1;
}
.fc-empresa-textos {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #444;
}
.fc-empresa-nombre {
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
  margin-bottom: 2px;
}
.fc-empresa-comercial {
  font-style: italic;
  font-size: 11px;
  color: #666;
  margin-bottom: 3px;
}
.fc-empresa-detalle {
  font-size: 11px;
  color: #555;
}
.fc-empresa-detalle-contacto {
  font-size: 11px;
  color: #555;
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fc-empresa-detalle-contacto span {
  white-space: nowrap;
}
/* Título del documento — CENTRADO arriba (estilo Ficha General SACMED) */
.fc-doc-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
  letter-spacing: 0.3px;
  align-self: center;
  justify-self: center;
}
/* Spacer derecho para mantener el título visualmente centrado */
.fc-doc-header-spacer {
  width: 80px;
  flex-shrink: 0;
}

/* Banner de alergias destacado */
.fc-alergias-banner {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border: 2px solid #c0392b;
  border-left: 8px solid #c0392b;
  margin: 14px 30px;
  padding: 14px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(192, 57, 43, 0.15);
  animation: fc-alergia-pulse 2s ease-in-out infinite;
}
@keyframes fc-alergia-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(192, 57, 43, 0.15); }
  50% { box-shadow: 0 2px 18px rgba(192, 57, 43, 0.35); }
}
.fc-alergias-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.fc-alergias-content { flex: 1; }
.fc-alergias-title {
  color: #c0392b;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.fc-alergia-item {
  font-size: 13px;
  color: #2c3e50;
  margin-top: 3px;
  line-height: 1.45;
}
.fc-alergia-item strong { color: #c0392b; margin-right: 4px; }

/* Tablas estilo PDF con bordes */
.fc-table {
  width: calc(100% - 60px);
  margin: 0 30px 6px;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}
.fc-table-title {
  background: #ececec;
  text-align: center;
  font-weight: 600;
  padding: 7px;
  border: 1px solid #999;
  font-size: 13px;
}
.fc-table td {
  padding: 7px 10px;
  border: 1px solid #999;
  vertical-align: top;
  line-height: 1.45;
}
.fc-table .fc-lbl {
  font-weight: 600;
  background: #fafafa;
  width: 23%;
  color: #444;
}
.fc-table .fc-val { color: #2c3e50; }
.fc-table .fc-pre { white-space: pre-wrap; word-wrap: break-word; }

.fc-evento-titulo-row td {
  background: #ececec;
  border-top: 3px solid var(--primary);
}
.fc-evento { margin-top: 16px; }

/* Tabla de especialista (línea naranja arriba como en el PDF) */
.fc-table-evento thead th {
  background: #fff;
  border: 1px solid #999;
  border-top: 3px solid #e8a06b;
  padding: 7px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

/* Acciones por evento (cuando aún no está firmado) */
.fc-acciones-evento {
  margin: 8px 30px 0;
  padding: 8px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 4px;
  display: flex;
  gap: 6px;
  font-size: 12px;
}

/* Firma digital */
.fc-firma {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 20px 30px;
  margin-top: 8px;
}
.fc-firma-stamp {
  border: 1px solid #aaa;
  padding: 10px 16px;
  font-style: italic;
  color: #a00;
  background: #fff;
  border-radius: 3px;
  min-width: 180px;
  text-align: center;
}
.fc-firma-info {
  font-size: 12px;
  line-height: 1.6;
  color: #333;
}

/* Footer estilo PDF */
.fc-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px 30px;
  border-top: 2px solid var(--primary);
  font-size: 11px;
  color: #777;
  margin-top: 20px;
  background: #fff;
}

.fc-empty {
  text-align: center;
  padding: 40px 20px;
  background: #fff;
  margin: 14px 30px;
  border-radius: 4px;
  border: 1px dashed #ddd;
}

/* Editor de prescripciones */
.rx-item {
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px;
  margin-top: 10px;
  background: #fafbfc;
}
.rx-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  color: var(--primary);
}

@media (max-width: 768px) {
  .fc-doc-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .fc-doc-title { text-align: left; font-size: 18px; }
  .fc-empresa-info { flex-direction: column; gap: 8px; }
  .fc-empresa-logo, .fc-empresa-logo-placeholder { max-width: 80px; }
  .fc-table { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; }
  .fc-table td { padding: 6px 8px; font-size: 11px; }
  .fc-firma { flex-direction: column; padding: 14px; }
  .fc-footer { grid-template-columns: 1fr; gap: 4px; text-align: center !important; }
  .fc-footer > div { text-align: center !important; }
}

/* ============== LOGIN — DISEÑO SPLIT ============== */
.login-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
  background: #fff;
  color: #1a2536;
}

/* ===== PANEL IZQUIERDO (branding) ===== */
.login-left {
  position: relative;
  background:
    radial-gradient(circle at 20% 0%, rgba(56,189,248,0.25) 0%, transparent 50%),
    linear-gradient(135deg, #0b3258 0%, #061a35 100%);
  color: #fff;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Logo de alas grande como decoración de fondo (semitransparente) */
.login-left::before {
  content: '';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
  height: 70%;
  background-image: url('../assets/logo_salus.png');
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.18;
  filter: brightness(1.4) saturate(1.2);
  pointer-events: none;
  z-index: 1;
}

/* Patrón de puntos decorativo */
.login-left::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

.login-left-content {
  position: relative;
  z-index: 2;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

/* Header del panel izquierdo: logo + nombre */
.login-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.login-brand-mark {
  width: 64px;
  height: 64px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.login-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.login-brand-text {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.2px;
}
.login-brand-text sup {
  font-size: 0.5em;
  vertical-align: super;
  opacity: 0.85;
}

/* Hero central */
.login-hero {
  max-width: 540px;
  margin: 40px 0;
}
.login-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 22px;
  font-size: 12.5px;
  color: #cfe1f5;
  margin-bottom: 28px;
  backdrop-filter: blur(4px);
}
.login-badge-dot {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(74,222,128,0.25);
}
.login-hero-title {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1px;
  margin: 0 0 22px;
  color: #fff;
}
.login-hero-desc {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 460px;
}
.login-hero-desc sup {
  font-size: 0.5em;
  vertical-align: super;
}

/* Stats */
.login-stats {
  display: flex;
  gap: 56px;
  margin-top: auto;
}
.login-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.login-stat-label {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

/* ===== PANEL DERECHO (formulario) ===== */
.login-right {
  position: relative;
  padding: 32px 56px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.login-support {
  position: absolute;
  top: 28px;
  right: 56px;
  font-size: 13px;
  color: #7a8a99;
}
.login-support-link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.login-support-link:hover { text-decoration: underline; }

.login-form-wrap {
  max-width: 440px;
  width: 100%;
  margin: auto 0;
  padding: 40px 0;
}

.login-form-brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.login-form-brand sup {
  font-size: 0.5em;
  vertical-align: super;
  opacity: 0.85;
}
.login-form-title {
  font-size: 36px;
  font-weight: 700;
  color: #0f1c2e;
  margin: 0 0 8px;
  line-height: 1.1;
  letter-spacing: -0.8px;
}
.login-form-subtitle {
  color: #7a8a99;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 28px;
}

/* Campos */
.login-field {
  margin-bottom: 16px;
}
.login-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #2a3447;
  margin-bottom: 8px;
}
.login-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #d6dde4;
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44,143,204,0.12);
}
.login-input-icon {
  padding: 0 12px;
  color: #9aa5b1;
  font-size: 15px;
  flex-shrink: 0;
}
.login-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 14px 0;
  font-size: 14.5px;
  color: #1a2536;
  font-family: inherit;
  min-width: 0;
}
.login-input-wrap input::placeholder { color: #9aa5b1; }
.login-eye {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 14px;
  color: #9aa5b1;
  font-size: 16px;
  height: 100%;
}
.login-eye:hover { color: #5d6b7c; }

/* Fila checkbox + olvidé */
.login-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0 24px;
  flex-wrap: wrap;
  gap: 10px;
}
.login-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #2a3447;
  cursor: pointer;
  user-select: none;
}
.login-check input { display: none; }
.login-check-box {
  width: 18px;
  height: 18px;
  border: 1.5px solid #c0cad4;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.login-check input:checked + .login-check-box {
  background: var(--primary);
  border-color: var(--primary);
}
.login-check input:checked + .login-check-box::after {
  content: '✓';
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.login-forgot {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.login-forgot:hover { text-decoration: underline; }

/* Botón submit */
.login-submit {
  width: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
  border: none;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 8px 20px rgba(44,143,204,0.28);
}
.login-submit:hover {
  box-shadow: 0 10px 24px rgba(44,143,204,0.35);
  transform: translateY(-1px);
}
.login-submit:active { transform: translateY(0); }
.login-submit-arrow { font-size: 16px; }

/* Error */
.login-error {
  background: #fef0ef;
  color: #c0392b;
  border: 1px solid #f4c5c0;
  padding: 11px 14px;
  font-size: 13px;
  border-radius: 8px;
  margin-bottom: 14px;
  text-align: center;
}
.login-error.hidden { display: none; }

/* Footer */
.login-footer {
  margin-top: 28px;
  border-top: 1px solid #eef0f3;
  padding-top: 18px;
}
.login-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #7a8a99;
}
.login-footer-shield {
  color: #5d6b7c;
  font-weight: 500;
}
.login-footer-legal {
  margin-top: 10px;
  text-align: center;
  font-size: 11.5px;
  color: #9aa5b1;
  line-height: 1.5;
}

/* Responsive: stack en pantallas pequeñas */
@media (max-width: 980px) {
  .login-split { grid-template-columns: 1fr; }
  .login-left { display: none; }
  .login-right { padding: 24px; }
  .login-support { right: 24px; top: 20px; }
  .login-form-wrap { margin: 30px auto; }
}
@media (max-width: 480px) {
  .login-form-title { font-size: 28px; }
  .login-form-subtitle { font-size: 13.5px; }
}

/* ============== PERFIL ============== */
.profile-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: flex-start;
}
.profile-side {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
}
.profile-avatar-big {
  font-size: 80px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 6px 18px rgba(44, 143, 204, 0.3);
}
.profile-side h3 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--text-dark);
}
.profile-rol-badge {
  display: inline-block;
  padding: 4px 14px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.profile-rol-badge.admin { background: #fef0e6; color: #d35400; }
.profile-rol-badge.especialista { background: #e8f3fa; color: #1f6fa3; }
.profile-rol-badge.usuario { background: #e8f7e8; color: #2d8d3a; }
.profile-rol-badge.administrativo { background: #ede7f6; color: #5b3eb8; }
.profile-rol-badge.caja { background: #fff3cd; color: #856404; }

.profile-side-info {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #eef0f2;
  font-size: 12px;
  color: #555;
  text-align: left;
}
.profile-side-info > div {
  padding: 4px 0;
  border-bottom: 1px dotted #eef0f2;
  word-break: break-word;
}
.profile-side-info > div:last-child { border-bottom: none; }

.profile-form-wrapper {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 24px 28px;
}
.profile-form-wrapper h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--primary);
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 6px;
  margin: 0;
}

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

/* ============== AGENDA: badges de rol y leyenda ============== */
.rol-info-badge {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 12px;
  vertical-align: middle;
}
.rol-info-badge.admin {
  background: #fef0e6;
  color: #d35400;
  border: 1px solid #f5cfa8;
}
.rol-info-badge.especialista {
  background: #e8f3fa;
  color: #1f6fa3;
  border: 1px solid #b3d5e8;
}
.rol-info-badge.administrativo {
  background: #eafaf1;
  color: #1e8449;
  border: 1px solid #b7e4c7;
}

.agenda-info-pill {
  display: inline-block;
  padding: 4px 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.agenda-leyenda {
  background: #fafbfc;
  border: 1px solid var(--border-color);
  border-top: none;
  padding: 8px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  font-size: 12px;
}
.leyenda-titulo {
  font-weight: 600;
  color: #555;
}
.leyenda-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #444;
}
.leyenda-color {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Mejoras al bloque de cita */
.cita-block {
  font-size: 11px;
  line-height: 1.3;
  padding: 3px 6px;
  /* La altura mínima viene del inline style (height x duración).
     Si el contenido es más alto, el bloque crece y mantiene legibilidad. */
  height: auto;
  overflow: visible;
  transition: box-shadow 0.15s ease, z-index 0s linear 0.05s;
}
.cita-block:hover {
  /* Subir el bloque sobre los siguientes para que se vea entero si se solapa */
  z-index: 50 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.cita-block-time {
  font-weight: 700;
  font-size: 10px;
  opacity: 0.95;
}
.cita-block-name {
  font-weight: 500;
  /* Permitir que el nombre haga wrap a varias líneas en lugar de cortarse */
  white-space: normal;
  overflow: visible;
  word-break: break-word;
  hyphens: auto;
}
.cita-block-esp {
  font-size: 9.5px;
  opacity: 0.9;
  font-style: italic;
  white-space: normal;
  overflow: visible;
  word-break: break-word;
}

/* Hacer las celdas calendario más interactivas */
.calendar-cell:hover { background: rgba(44, 143, 204, 0.05); }

/* ============== SIDEBAR COLAPSABLE ============== */
/* Botón hamburguesa */
.sidebar-toggle {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-right: auto;
  transition: all 0.2s;
}
.sidebar-toggle:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.sidebar-toggle span {
  width: 18px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}
.sidebar-toggle.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.sidebar-toggle.active span:nth-child(2) {
  opacity: 0;
}
.sidebar-toggle.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
.topbar-spacer { display: none; }
.topbar { justify-content: flex-start; }
.topbar > .topbar-item:nth-child(2),
.topbar > .topbar-item { margin-left: 0; }
.topbar > .topbar-item:nth-child(2) { margin-left: auto; }

/* Estado colapsado del sidebar */
body.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  overflow: hidden;
  border-right: none;
}
body.sidebar-collapsed .session-timer {
  /* Posicionar respecto al main que ya no tiene sidebar al lado */
}
.sidebar {
  transition: width 0.25s ease;
}

/* En móvil el sidebar se hace overlay */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
    transform: translateX(0);
    width: 240px;
  }
  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    width: 240px;
  }
  /* En móvil al colapsar, ocultamos por transform en vez de width */
  body:not(.sidebar-collapsed) .sidebar {
    transform: translateX(0);
  }
  /* Overlay al abrir el sidebar en móvil */
  body:not(.sidebar-collapsed)::after {
    content: '';
    position: fixed;
    z-index: 150;
  }
}

/* ============== TELEMEDICINA: cards de videoconsulta ============== */
.telemed-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  padding: 16px;
}
.telemed-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s;
}
.telemed-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}
.telemed-card.en-vivo {
  border: 2px solid #27ae60;
  background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
  box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.5);
  animation: telemed-pulse 2.2s ease-in-out infinite;
}
@keyframes telemed-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(39, 174, 96, 0); }
}

.telemed-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f2;
}
.telemed-card-fecha {
  flex: 1;
  min-width: 0;
}
.fecha-dia {
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
}
.fecha-hora {
  font-size: 12px;
  color: #555;
  margin-top: 2px;
}
.telemed-en-vivo-badge {
  background: #27ae60;
  color: #fff;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  animation: telemed-blink 1.4s ease-in-out infinite;
}
@keyframes telemed-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.telemed-paciente {
  display: flex;
  gap: 12px;
  align-items: center;
}
.telemed-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.telemed-pac-nombre {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.telemed-pac-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.telemed-detalles {
  font-size: 12px;
  color: #444;
  line-height: 1.65;
}
.telemed-detalles div {
  padding: 2px 0;
}

.telemed-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.telemed-btn-iniciar {
  flex: 1;
  background: var(--primary);
  font-weight: 600;
  padding: 10px 14px;
}
.telemed-btn-iniciar.en-vivo {
  background: #27ae60;
  animation: telemed-button-pulse 1.5s ease-in-out infinite;
}
@keyframes telemed-button-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.telemed-btn-iniciar:hover { background: var(--primary-dark); }
.telemed-btn-iniciar.en-vivo:hover { background: #229954; }

/* ============== SALA VIRTUAL (modal) ============== */
.sala-video-area {
  position: relative;
  background: #1a1a1a;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sala-video-main {
  text-align: center;
  color: #fff;
}
.sala-avatar-grande {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2c8fcc, #1f6fa3);
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1);
}
.sala-nombre {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sala-estado {
  font-size: 12px;
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.conectando-dot {
  width: 8px;
  height: 8px;
  background: #27ae60;
  border-radius: 50%;
  animation: sala-conectando 1s ease-in-out infinite;
}
@keyframes sala-conectando {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.sala-video-self {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 130px;
  height: 100px;
  background: #333;
  border: 2px solid #fff;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.sala-self-label {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sala-self-avatar {
  font-size: 32px;
}

.sala-controles {
  background: #2a2a2a;
  padding: 14px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.sala-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: #444;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sala-btn:hover { background: #555; transform: scale(1.05); }
.sala-btn.off { background: #c0392b; }
.sala-btn.on { background: #27ae60; }
.sala-btn-colgar {
  background: #c0392b !important;
  transform: rotate(135deg);
}
.sala-btn-colgar:hover { background: #a93226 !important; }

.sala-info {
  background: #fafbfc;
  padding: 12px 16px;
  font-size: 12px;
  border-top: 1px solid var(--border-color);
}
.sala-info > div {
  padding: 3px 0;
}
.sala-info code {
  background: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  border: 1px solid var(--border-color);
}

@media (max-width: 768px) {
  .telemed-list-grid { grid-template-columns: 1fr; padding: 10px; }
  .sala-video-area { height: 280px; }
  .sala-avatar-grande { width: 80px; height: 80px; font-size: 28px; }
}

/* ============== CONFIGURACIÓN EMPRESA ============== */
.empresa-config-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: flex-start;
}
.empresa-logo-card {
  background: #fafbfc;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 18px;
  text-align: center;
}
.empresa-logo-card h4 {
  font-size: 13px;
  color: var(--primary);
  margin: 0 0 12px;
  font-weight: 600;
}
.logo-preview {
  width: 100%;
  min-height: 130px;
  background: #fff;
  border: 2px dashed #ccd5dc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 14px;
}
.logo-preview img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
}
.logo-placeholder {
  color: #aab;
  text-align: center;
}
.logo-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.empresa-datos-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 22px 24px;
}
.empresa-datos-card h4 {
  font-size: 14px;
  color: var(--primary);
  margin: 0 0 14px;
  font-weight: 600;
  border-bottom: 2px solid var(--primary-light);
  padding-bottom: 6px;
}

@media (max-width: 768px) {
  .empresa-config-grid { grid-template-columns: 1fr; }
}

/* Sidebar con logo personalizado */
.sidebar-logo img {
  display: block;
  margin: 0 auto;
}

/* ============== PATIENT PICKER (combobox con búsqueda) ============== */
.patient-picker {
  position: relative;
  width: 100%;
}
.patient-picker-input-wrap {
  position: relative;
  width: 100%;
}
.patient-picker-input-wrap .form-control {
  padding-right: 36px;
  padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237a8a99'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 14px;
}
.patient-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #e0e6eb;
  color: #555;
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}
.patient-clear:hover {
  background: #e74c3c;
  color: #fff;
}
.patient-picker-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1100;
}
.patient-result {
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f4;
  transition: background 0.1s;
}
.patient-result:last-child { border-bottom: none; }
.patient-result:hover,
.patient-result.active {
  background: var(--primary-light);
}
.patient-result-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
}
.patient-result-meta {
  display: flex;
  gap: 14px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-muted);
}
.patient-result mark {
  background: #fff3a0;
  color: var(--text-dark);
  padding: 0 2px;
  border-radius: 2px;
  font-weight: 600;
}
.patient-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ============== AGENDA / CALENDAR ============== */
.agenda-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-bottom: none;
  flex-wrap: wrap;
  gap: 10px;
}
.agenda-toolbar h4 { font-size: 15px; font-weight: 500; }
.agenda-nav { display: flex; gap: 4px; align-items: center; }
.btn-icon {
  width: 30px; height: 30px;
  border: 1px solid var(--border-color);
  background: #fff;
  cursor: pointer;
  border-radius: 3px;
  color: var(--primary);
}
.btn-icon:hover { background: var(--primary-light); }
.view-switcher { display: flex; }
.view-switcher button {
  padding: 5px 12px;
  border: 1px solid var(--border-color);
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  border-right: none;
}
.view-switcher button:last-child { border-right: 1px solid var(--border-color); border-radius: 0 3px 3px 0; }
.view-switcher button:first-child { border-radius: 3px 0 0 3px; }
.view-switcher button.active { background: var(--primary); color: #fff; border-color: var(--primary); }

.calendar {
  background: #fff;
  border: 1px solid var(--border-color);
  width: 100%;
}
.calendar-week-header {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  border-bottom: 1px solid var(--border-color);
  background: #f8f9fa;
}
.calendar-week-header > div {
  padding: 8px 4px;
  text-align: center;
  font-size: 12px;
  border-left: 1px solid var(--border-color);
  font-weight: 600;
}
.calendar-week-header > div:first-child { border-left: none; }
.calendar-week-header .weekend { background: #eef0f2; color: var(--text-muted); }

.calendar-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
}
.calendar-time {
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 4px 6px;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  height: 40px;
}
.calendar-cell {
  border-right: 1px solid #eef0f2;
  border-bottom: 1px solid #eef0f2;
  height: 40px;
  position: relative;
  cursor: pointer;
  background: #fff;
}
.calendar-cell:hover { background: #f9fbfc; }
.calendar-cell.weekend { background: #f5f7f8; }
.calendar-cell.today-col { background: #fffce8; }
/* Sesión 19ª (sep-2026): slot fuera de la disponibilidad horaria del
   especialista filtrado. Colocado DESPUÉS de .weekend/.today-col para
   que gane por orden (misma especificidad). El hover se mantiene sutil
   (mismo tono un poco más claro) para indicar visualmente que aunque
   el slot no forma parte del horario del profesional, la celda sigue
   siendo clickeable por administradores para crear una cita manual
   (excepción operativa).
   Cambio C4(19ª): la misma regla se extiende a los <td> de vista Día,
   marcados con class="calendar-day-slot" y los mismos data-fecha/data-hora
   que en Semana. Ver AgendaView._pintarDisponibilidadDia. */
.calendar-cell.no-disponible,
.calendar-day-slot.no-disponible { background: #e6e6e6; }
.calendar-cell.no-disponible:hover { background: #dcdcdc; }
.calendar-day-slot.no-disponible:hover { background: #dcdcdc; }
.cita-block {
  position: absolute;
  left: 2px; right: 2px;
  background: var(--primary);
  color: #fff;
  padding: 2px 6px;
  font-size: 11px;
  border-radius: 2px;
  /* overflow visible: el bloque puede crecer fuera de su slot si el contenido es alto.
     Sobre hover se sube z-index para que no quede tapado */
  overflow: visible;
  cursor: pointer;
  border-left: 3px solid var(--primary-dark);
}
.cita-block.confirmada { background: var(--card-green); border-left-color: #5ba364; }
.cita-block.espera { background: var(--card-yellow); border-left-color: #c69b3e; }
.cita-block.cancelada { background: var(--card-red); border-left-color: #b65b5b; text-decoration: line-through; }

/* ============== UTILS ============== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-12 { margin-top: 12px; }
.mb-12 { margin-bottom: 12px; }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.badge-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.badge-status.activo { background: #d4edda; color: #155724; }
.badge-status.inactivo { background: #f8d7da; color: #721c24; }

/* User dropdown */
.user-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 230px;
  z-index: 200;
  display: none;
}
.user-dropdown.open { display: block; }
.user-dropdown-header {
  padding: 14px;
  text-align: center;
  background: var(--primary-light);
  border-bottom: 1px solid var(--border-color);
}
.user-dropdown-header .org-id {
  font-size: 18px;
  color: var(--primary);
  font-weight: 600;
}
.user-dropdown-header .org-name {
  font-size: 12px;
  color: var(--text-muted);
}
.user-dropdown-item {
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--primary);
  border-bottom: 1px solid #f0f2f4;
}
.user-dropdown-item:hover { background: var(--primary-light); }
.user-dropdown-item:last-child { border-bottom: none; }

/* Notifications dropdown */
.notif-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  width: 320px;
  z-index: 200;
  display: none;
  max-height: 400px;
  overflow-y: auto;
}
.notif-dropdown.open { display: block; }
.notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid #f0f2f4;
  font-size: 12px;
  display: flex;
  gap: 10px;
}
.notif-item:hover { background: var(--primary-light); }
.notif-item .notif-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-item .notif-time { color: var(--text-muted); font-size: 11px; }

/* Toast */
.toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #2c3e50;
  color: #fff;
  padding: 12px 20px;
  border-radius: 4px;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: slideIn 0.3s ease-out;
  max-width: 350px;
}
.toast.success { background: #27ae60; }
.toast.error { background: #e74c3c; }
.toast.warn { background: #f39c12; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Responsive */
@media (max-width: 992px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .sidebar { width: 60px; }
  .sidebar .menu-link span,
  .sidebar .search-bar,
  .sidebar .menu-link .arrow { display: none; }
  :root { --sidebar-width: 60px; }
  .form-group { flex-direction: column; gap: 4px; }
  .form-group label { text-align: left; width: auto; padding-top: 0; }
}

/* ============================================================
   Sesión 19ª C14 (sep-2026) — Dropdown de sugerencias de pacientes
   ------------------------------------------------------------
   Compartido por el buscador del navbar (#topbar-suggestions) y
   el buscador de Administración de Pacientes (#pac-suggestions).
   Se posiciona absoluto respecto al contenedor de la barra
   (que debe ser position: relative).
   ============================================================ */
.pac-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e6ea;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  max-height: 360px;
  overflow-y: auto;
  z-index: 1050;
  padding: 4px 0;
}
.pac-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.1s;
  font-size: 13px;
  color: var(--text-dark);
  border-bottom: 1px solid #f2f4f6;
}
.pac-suggestion:last-child { border-bottom: none; }
.pac-suggestion:hover,
.pac-suggestion.active {
  background: rgba(44, 143, 204, 0.08);
}
.pac-suggestion b {
  color: var(--primary-dark);
  font-weight: 700;
}
.pac-suggestion-avatar {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}
.pac-suggestion-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pac-suggestion-run,
.pac-suggestion-ficha {
  flex-shrink: 0;
  color: #6c757d;
  font-size: 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  white-space: nowrap;
}
.pac-suggestion-empty {
  padding: 12px 14px;
  color: #9aa5b1;
  font-size: 13px;
  text-align: center;
  cursor: default;
}
.pac-suggestion-empty:hover { background: transparent; }

/* En Administración de Pacientes, el input está en el toolbar de la
   tabla — el contenedor natural (.dt-search-wrap o similar) puede no
   ser relative. Aseguramos que el padre directo del dropdown lo sea. */
.dt-search-wrap,
.dt-tools,
.search-input-wrap { position: relative; }