/* ==========================================================================
   PANEL ADMINISTRATIVO & MÉDICO — CLÍNICA DEMO
   ========================================================================== */

:root {
  --primary: #001FD1;
  --primary-dark: #001489;
  --primary-light: #EEF2FF;
  --navy: #06152B;
  
  --bg-app: #F8FAFC;
  --bg-card: #FFFFFF;
  --border: #E2E8F0;
  
  --text-dark: #0F172A;
  --text-main: #334155;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  
  --green: #10B981;
  --green-light: #D1FAE5;
  --yellow: #F59E0B;
  --yellow-light: #FEF3C7;
  --red: #EF4444;
  --red-light: #FEE2E2;
  --purple: #8B5CF6;
  --purple-light: #EDE9FE;
  --blue: #0284C7;
  --blue-light: #E0F2FE;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);

  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --radius: 12px;
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
  font-family: var(--font-body);
  background-color: var(--bg-app);
  color: var(--text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-weight: 700;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

.hidden { display: none !important; }
.w-full { width: 100%; }
.mb-3 { margin-bottom: 0.75rem; }
.mt-3 { margin-top: 0.75rem; }
.text-center { text-align: center; }

/* LAYOUT PRINCIPAL */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

/* SIDEBAR */
.sidebar {
  width: 270px;
  background-color: var(--navy);
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.75rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-logo {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 2px;
}

.sidebar-brand-text h2 {
  color: #FFFFFF;
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.sidebar-brand-text span {
  font-size: 0.72rem;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.sidebar-nav {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex-grow: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 10px;
  background: transparent;
  color: #CBD5E1;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  transition: var(--transition);
  text-align: left;
  width: 100%;
}

.nav-item i {
  width: 20px;
  height: 20px;
  color: #94A3B8;
  transition: var(--transition);
}

.nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
}

.nav-item.active {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 31, 209, 0.35);
}

.nav-item.active i {
  color: #FFFFFF;
}

.sidebar-footer {
  padding: 1.5rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.api-status-card {
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  display: inline-block;
}

.status-dot.online {
  background: var(--green);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.status-dot.error {
  background: var(--red);
}

.api-url-label {
  font-size: 0.7rem;
  background: rgba(255,255,255,0.1);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  color: #94A3B8;
}

.user-profile-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38BDF8;
}

.user-info strong {
  display: block;
  font-size: 0.88rem;
  color: #FFFFFF;
}

.user-info span {
  font-size: 0.75rem;
  color: #94A3B8;
}

/* MAIN CONTENT */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  padding: 2rem 2.5rem;
}

/* TOP HEADER */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.header-title-wrap h1 {
  font-size: 1.85rem;
  letter-spacing: -0.02em;
}

.header-title-wrap p {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 0.15rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

/* BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  border: 1px solid transparent;
}

.btn i {
  width: 17px;
  height: 17px;
}

.btn-sm {
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
}

.btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 31, 209, 0.25);
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

.btn-secondary {
  background: #FFFFFF;
  border-color: var(--border);
  color: var(--text-main);
}

.btn-secondary:hover {
  background: #F1F5F9;
}

.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text-main);
}

.btn-outline:hover {
  background: #FFFFFF;
  border-color: var(--primary);
  color: var(--primary);
}

/* KPI METRICS */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.kpi-card {
  background: #FFFFFF;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.35rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition);
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.kpi-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kpi-icon i {
  width: 24px;
  height: 24px;
}

.kpi-icon.blue { background: var(--blue-light); color: var(--blue); }
.kpi-icon.yellow { background: var(--yellow-light); color: var(--yellow); }
.kpi-icon.green { background: var(--green-light); color: var(--green); }
.kpi-icon.purple { background: var(--purple-light); color: var(--purple); }

.kpi-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kpi-value {
  font-size: 1.75rem;
  line-height: 1.1;
  margin-top: 0.2rem;
}

/* TOOLBAR & SEARCH */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.search-input-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 280px;
  flex: 1;
  max-width: 420px;
}

.search-input-box.w-full {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.search-input-box.large {
  min-width: 320px;
  max-width: 500px;
}

.search-input-box i,
.search-input-box svg {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  width: 17px;
  height: 17px;
  pointer-events: none;
  display: block;
  z-index: 2;
}

.search-input-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 1rem 0.65rem 2.6rem;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-dark);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.search-input-box input::placeholder {
  color: #94A3B8;
  font-size: 0.88rem;
}

.search-input-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 31, 209, 0.12);
}

select {
  padding: 0.65rem 1rem;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  transition: var(--transition);
}

select:focus {
  border-color: var(--primary);
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.medico-filter-box {
  display: inline-flex;
  align-items: center;
}

.select-medico-filter {
  background: #EFF6FF !important;
  border: 1.5px solid #BFDBFE !important;
  color: var(--primary) !important;
  font-weight: 700;
  font-size: 0.86rem;
  border-radius: 8px;
  padding: 0.62rem 0.95rem;
  cursor: pointer;
  outline: none;
  transition: var(--transition);
  box-shadow: 0 1px 3px rgba(0, 31, 209, 0.08);
}

.select-medico-filter:hover, .select-medico-filter:focus {
  border-color: var(--primary) !important;
  background: #DBEAFE !important;
  box-shadow: 0 0 0 3px rgba(0, 31, 209, 0.15);
}

/* DATA TABLE */
.table-container {
  background: #FFFFFF;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.data-table th {
  background: #F8FAFC;
  padding: 1rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.data-table td {
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: #F8FAFC;
}

.loading-row {
  padding: 3rem !important;
  color: var(--text-muted);
  font-size: 1rem !important;
}

.spin {
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* BADGES & ESTADOS */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-pendiente { background: var(--yellow-light); color: #B45309; }
.badge-confirmado { background: var(--green-light); color: #065F46; }
.badge-realizado { background: var(--purple-light); color: #6D28D9; }
.badge-cancelado { background: var(--red-light); color: #991B1B; }

.status-select {
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 6px;
}

/* TAB PANES */
.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HISTORIAS CLÍNICAS LAYOUT */
.historias-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.historias-sidebar-card, .historias-content-card {
  background: #FFFFFF;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.historias-sidebar-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.historias-sidebar-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.patient-selected-box {
  background: var(--primary-light);
  border: 1px solid #C7D2FE;
  border-radius: 10px;
  padding: 1.25rem;
}

.patient-header-mini strong {
  display: block;
  font-size: 1.05rem;
  color: var(--primary-dark);
}

.patient-header-mini span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.patient-meta-mini {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.timeline-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.timeline-card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  background: #FFFFFF;
  transition: var(--transition);
}

.timeline-card:hover {
  box-shadow: var(--shadow-md);
}

.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.65rem;
}

.timeline-head .timeline-actions {
  margin-left: auto;
  flex-shrink: 0;
}


.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.timeline-date {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.timeline-doctor {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.timeline-body h4 {
  font-size: 1rem;
  color: var(--primary-dark);
  margin-bottom: 0.35rem;
}

.timeline-body p {
  font-size: 0.9rem;
  color: var(--text-main);
  margin-bottom: 0.65rem;
}

.timeline-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.timeline-pill {
  background: #F1F5F9;
  border: 1px solid var(--border);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
}

.empty-state-box {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.empty-state-box i {
  width: 48px;
  height: 48px;
  color: var(--text-light);
  margin-bottom: 1rem;
}

/* MODALES */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(6, 21, 43, 0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-box {
  background: #FFFFFF;
  border-radius: var(--radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
}

.modal-box.large {
  max-width: 680px;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8FAFC;
}

.modal-header h3 {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: var(--text-dark);
}

.modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
}

.modal-hc-box {
  max-width: 860px !important;
  width: 95% !important;
  max-height: 92vh;
}

.modal-scrollable {
  max-height: 74vh;
  overflow-y: auto;
  padding: 1.5rem !important;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary);
  background: #F1F5F9;
  padding: 0.5rem 0.85rem;
  border-radius: 6px;
  border-left: 3.5px solid var(--primary);
  margin-top: 0.5rem;
  margin-bottom: 0.6rem;
}

@media (max-width: 600px) {
  .form-row-3 {
    grid-template-columns: 1fr;
  }
}

/* ADJUNTOS COMPACTOS (MINIMALISTA) */
.adjuntos-compact {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.adjuntos-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-adjunto {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: #F8FAFC;
  color: var(--text-dark);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-adjunto:hover {
  border-color: var(--primary);
  background: #EEF2FF;
  color: var(--primary);
}

.btn-adjunto i, .btn-adjunto svg {
  width: 15px;
  height: 15px;
}

.link-input-wrap {
  display: flex;
  gap: 6px;
}

.link-input-wrap input {
  flex: 1;
  padding: 7px 12px;
  font-size: 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: #FFFFFF;
}

.link-input-wrap input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 31, 209, 0.08);
}

.btn-link-add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--primary);
  border-radius: 6px;
  background: var(--primary);
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-link-add:hover {
  opacity: 0.85;
}

.btn-link-add i, .btn-link-add svg {
  width: 16px;
  height: 16px;
}

.link-input-wrap.hidden {
  display: none;
}

.attached-files-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.attached-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.attached-file-chip img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border-radius: 4px;
}

.attached-file-chip .chip-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-dark);
}

.attached-file-chip .btn-chip-remove:hover {
  color: #DC2626;
}

/* VISOR VIRTUAL DE HISTORIA CLÍNICA */
.modal-hc-viewer-box {
  max-width: 920px !important;
  width: 95% !important;
  max-height: 92vh;
}

.hc-virtual-sheet {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 1.25rem;
  color: #1E293B;
  font-size: 13px;
  line-height: 1.5;
}

.hc-virtual-sheet-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 1.5px solid #E2E8F0;
  padding-bottom: 0.45rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.hc-virtual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

@media (max-width: 600px) {
  .hc-virtual-grid {
    grid-template-columns: 1fr;
  }
}

.hc-virtual-item {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
}

.hc-virtual-item strong {
  display: block;
  font-size: 0.76rem;
  color: #64748B;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hc-virtual-item span {
  font-size: 0.92rem;
  color: #0F172A;
}

.attached-file-chip .btn-chip-remove:hover {
  color: #DC2626;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
}

input, select, textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text-dark);
  outline: none;
  transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 31, 209, 0.12);
}

.modal-footer {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  background: #F8FAFC;
}

/* TOAST */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--navy);
  color: #FFFFFF;
  padding: 0.85rem 1.5rem;
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  z-index: 2000;
  font-size: 0.9rem;
  animation: slideUp 0.25s ease-out;
}

.toast i {
  color: var(--green);
  width: 20px;
  height: 20px;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   LOCK SCREEN & SEGURIDAD PRESENCIAL
   ========================================================================== */
.lock-screen-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* El overlay oscuro (zinc-950) encima de la imagen de la clinica */
  background-image: 
    linear-gradient(rgba(9, 9, 11, 0.75), rgba(9, 9, 11, 0.9)),
    url('assets/fondo.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  overflow: hidden;
  padding: 1.5rem;
}

.lock-form-centered {
  background: #09090b; /* zinc-950 */
  padding: 2.5rem;
  border-radius: 1rem;
  border: 1px solid #27272a; /* zinc-800 */
  width: 100%;
  max-width: 420px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.lock-header-modern h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #fafafa;
  margin-bottom: 0.5rem;
  letter-spacing: -0.025em;
}

.lock-header-modern p {
  font-size: 1rem;
  color: #a1a1aa; /* zinc-400 */
}

.form-group-modern {
  margin-bottom: 1rem;
}

.split-input-style {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #18181b; /* zinc-900 */
  border: 1px solid #27272a; /* zinc-800 */
  border-radius: 0.5rem;
  padding: 0 1rem;
  height: 3.5rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.split-input-style:focus-within {
  border-color: #52525b;
  box-shadow: 0 0 0 1px #52525b;
}

.modern-static-label {
  font-size: 0.875rem;
  color: #71717a; /* zinc-500 */
  pointer-events: none;
  order: 2;
  flex-shrink: 0;
}

.lock-select-modern,
.lock-input-modern {
  background: transparent;
  border: none;
  color: #fafafa;
  font-size: 0.95rem;
  outline: none;
  width: 100%;
  flex: 1;
  order: 1;
}

.lock-select-modern {
  cursor: pointer;
  appearance: none;
}

.lock-select-modern option {
  background: #18181b;
  color: #fafafa;
}

.password-input-wrap-modern {
  display: flex;
  align-items: center;
}

.btn-toggle-pwd-modern {
  background: transparent;
  border: none;
  color: #71717a;
  cursor: pointer;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 3;
}

.btn-toggle-pwd-modern:hover {
  color: #fafafa;
}

.btn-login-submit-modern {
  width: 100%;
  background: #fafafa;
  color: #09090b;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.875rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 1rem;
}

.btn-login-submit-modern:hover {
  opacity: 0.9;
}

.login-alert {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #FCA5A5;
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  text-align: left;
}

.login-alert.lockout {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.35);
  color: #FCD34D;
}

.login-alert i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-logout {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #FCA5A5;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: var(--transition);
  width: 100%;
}

.btn-logout:hover {
  background: var(--red);
  color: #FFFFFF;
}

.btn-logout i {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   RESPONSIVE DESIGN PARA MÓVILES (IPHONE / IPAD / SMARTPHONES)
   ========================================================================== */

/* Botón menú hamburguesa */
.btn-menu-mobile {
  display: none;
  background: #FFFFFF;
  border: 1px solid var(--border);
  color: var(--navy);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.btn-menu-mobile i {
  width: 20px;
  height: 20px;
}

.btn-menu-mobile:active {
  background: var(--bg-app);
}

.header-left-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Overlay de fondo cuando se abre el menú en móvil */
.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(3, 10, 20, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1500;
  animation: fadeIn 0.2s ease;
}

@media (max-width: 900px) {
  .btn-menu-mobile {
    display: inline-flex;
  }

  .admin-layout {
    position: relative;
    overflow-x: hidden;
  }

  /* Sidebar convertido en menú deslizable elegante (Drawer) */
  .sidebar {
    position: fixed;
    top: 0;
    left: -310px;
    width: 280px;
    height: 100vh;
    height: 100dvh;
    z-index: 2000;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }

  .sidebar.mobile-open {
    transform: translateX(310px);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.5);
  }

  /* Contenido principal al 100% de la pantalla */
  .main-content {
    width: 100%;
    padding: 1.25rem 0.85rem;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
  }

  .top-header {
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
  }

  .header-title-wrap h1 {
    font-size: 1.3rem;
  }

  .header-title-wrap p {
    font-size: 0.8rem;
  }

  /* KPIs en 2 columnas compactas y limpias en iPhone */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .kpi-card {
    padding: 0.75rem 0.85rem;
    gap: 0.65rem;
    align-items: center;
  }

  .kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }

  .kpi-icon i {
    width: 20px;
    height: 20px;
  }

  .kpi-label {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .kpi-value {
    font-size: 1.4rem;
    margin-top: 0.1rem;
  }

  /* Barra de búsqueda y filtros vertical */
  .table-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .toolbar-left, .toolbar-right {
    width: 100%;
  }

  .search-input-box.large {
    width: 100%;
  }

  /* Tabla con desplazamiento táctil suave */
  .table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table th, .data-table td {
    padding: 0.75rem 0.65rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* Historias clínicas en 1 sola columna para móvil */
  .historias-layout {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .historias-sidebar-card {
    position: static;
  }
}

@media (max-width: 480px) {
  .header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .header-actions .btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
  }
}

/* ==========================================================================
   IMPRESIÓN OFICIAL 2 PÁGINAS (FRENTE Y DORSO) — HISTORIA CLÍNICA CLÍNICA DEMO
   ========================================================================== */
.print-area {
  display: none;
}

@media print {
  .hide-on-print { display: none !important; }
  @page { size: A4 portrait; margin: 5mm; }

  body {
    background: #FFFFFF !important;
    color: #111827 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Ocultar toda la interfaz del panel durante la impresión */
  .admin-layout,
  .sidebar,
  .main-content,
  .lock-screen,
  .lock-screen-backdrop,
  .toast,
  .modal-backdrop,
  .btn-menu-mobile,
  .sidebar-overlay {
    display: none !important;
  }

  body.printing-hc .print-area {
    display: block !important;
    width: 100% !important;
    background: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .hc-page {
    width: 100%;
    min-height: 275mm;
    box-sizing: border-box;
    padding: 10mm 15mm 12mm 15mm;
    position: relative;
    background: #FFFFFF;
    color: #1E293B;
    font-size: 12.5px;
    line-height: 1.4;
  }

  .hc-page-frente {
    page-break-after: always;
    break-after: page;
  }

  .hc-page-dorso {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* Encabezado */
  .hc-top-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
  }

  .hc-header-institution {
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
    color: #334155;
    line-height: 1.3;
  }

  .hc-header-institution strong {
    font-size: 14.5px;
    color: #0F172A;
    font-weight: 700;
  }

  .hc-header-hcnum {
    font-size: 13.5px;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .hc-num-val {
    border-bottom: 1px dotted #1E293B;
    padding-bottom: 1px;
    min-width: 110px;
    display: inline-block;
  }

  /* Título */
  .hc-title-container {
    text-align: center;
    margin: 2px 0 10px 0;
  }

  .hc-main-heading {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 21px;
    font-weight: 700;
    font-style: italic;
    text-decoration: underline;
    margin: 0;
    color: #0F172A;
  }

  /* Ficha de datos */
  .hc-patient-table {
    margin-bottom: 10px;
    font-size: 12px;
    color: #1E293B;
  }

  .hc-row {
    display: flex;
    margin-bottom: 5px;
    align-items: baseline;
  }

  .hc-col-left {
    flex: 1.25;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .hc-col-right {
    flex: 0.95;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .hc-lbl {
    font-weight: 600;
    white-space: nowrap;
    color: #0F172A;
  }

  .hc-val {
    border-bottom: 1px dotted #64748B;
    flex: 1;
    min-height: 15px;
    padding-left: 4px;
    font-weight: 500;
  }

  .hc-egreso-row {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .hc-egreso-options {
    display: flex;
    gap: 14px;
    align-items: center;
  }

  .hc-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
  }

  .hc-box {
    width: 12px;
    height: 12px;
    border: 1.2px solid #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .hc-box-checked {
    background: #0F172A !important;
    color: #FFFFFF !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Secciones clínicas */
  .hc-section-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hc-section-item {
    margin-bottom: 1px;
  }

  .hc-sec-title {
    font-weight: 700;
    font-size: 12.5px;
    color: #0F172A;
    margin-bottom: 2px;
  }

  .hc-sec-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .hc-text-filled {
    font-size: 12px;
    color: #001FD1;
    font-weight: 600;
    padding: 1px 0;
    line-height: 1.35;
  }

  .hc-dot-line {
    border-bottom: 1px dotted #94A3B8;
    height: 14px;
    width: 100%;
  }

  /* Dorso - Signos Vitales */
  .hc-dorso-vitals-box {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .hc-vital-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 5px;
  }

  .hc-vital-main {
    min-width: 155px;
    font-weight: 700;
    color: #0F172A;
  }

  .hc-vital-cell {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: 1;
  }

  .hc-dots {
    border-bottom: 1px dotted #64748B;
    flex: 1;
    display: inline-block;
    min-height: 14px;
  }

  /* Firma médica al pie */
  .hc-signature-footer {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end;
  }

  .hc-sig-line {
    width: 220px;
    border-top: 1px solid #1E293B;
    text-align: center;
    padding-top: 5px;
    font-size: 11.5px;
    color: #0F172A;
    line-height: 1.35;
  }
}

/* ==========================================================================
   PLANILLA DE EVOLUCIÓN MÉDICA (CONSULTORIO AMBULATORIO)
   ========================================================================== */
.patient-consultorio-summary-box {
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.summary-col {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.summary-col small {
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.summary-col strong {
  color: var(--navy);
  font-size: 0.95rem;
}

.badge-consultorio {
  background: #E0F2FE;
  color: #0369A1;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-hc-completa {
  background: #EDE9FE;
  color: #6D28D9;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Estilos de Impresión A4 para la Hoja de Consultorio (Idéntica al Manuscrito) */
@media print {
  .hc-page-consultorio {
    page-break-after: avoid;
    min-height: 275mm;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .hc-consultorio-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 15px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .hc-consultorio-info-grid .info-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }

  .hc-consultorio-info-grid .lbl {
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
  }

  .hc-consultorio-info-grid .val {
    color: #0F172A;
    border-bottom: 1px dotted #94A3B8;
    flex: 1;
    display: inline-block;
    padding-bottom: 1px;
  }

  .hc-consultorio-footer-grid {
    margin-top: auto;
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .footer-left-note {
    font-size: 10px;
    color: #64748B;
  }

  .footer-signature-box {
    text-align: center;
    width: 230px;
  }

  .signature-line-dark {
    border-top: 1.5px solid #0F172A;
    margin-bottom: 5px;
    width: 100%;
  }

  .footer-signature-box strong {
    display: block;
    font-size: 12px;
    color: #0F172A;
  }

  .signature-date {
    font-size: 11px;
    color: #475569;
    margin-top: 3px;
  }
}

/* ==========================================================================
   CALENDARIO MENSUAL & DASHBOARD — CLÍNICA DEMO
   ========================================================================== */

.calendar-section-wrap {
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.calendar-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  padding: 0.85rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
  gap: 1rem;
}

.calendar-month-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #F8FAFC;
  border: 1px solid var(--border);
  padding: 0.35rem 0.6rem;
  border-radius: 12px;
}

.btn-cal-nav {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-main);
  transition: var(--transition);
}

.btn-cal-nav:hover {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

.calendar-month-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
  min-width: 140px;
  text-align: center;
}

.calendar-legend-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.75rem;
  border: 1px solid transparent;
}

.legend-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* Grilla de Días de la Semana */
.calendar-weekdays-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.25rem;
}

.calendar-weekdays-grid .sat {
  color: var(--primary);
}

.calendar-weekdays-grid .sun {
  color: #94A3B8;
}

/* Grilla Mensual de Tarjetas */
.calendar-monthly-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.calendar-day-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.85rem;
  min-height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

.calendar-day-card:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 25px -5px rgba(0, 31, 209, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
}

.calendar-day-card.today {
  border: 2px solid var(--primary) !important;
  background: #F0F4FF !important;
}

.calendar-day-card.inactive {
  background: #F8FAFC;
  border-style: dashed;
  opacity: 0.6;
}

.card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-day-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-dark);
}

.calendar-day-card.today .card-day-num {
  color: var(--primary);
}

.tag-today-badge {
  background: var(--primary);
  color: #FFFFFF;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card-turnos-main {
  margin: 0.4rem 0;
}

.card-turnos-count {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--text-dark);
  line-height: 1.1;
}

.card-turnos-count small {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.card-occupation-track {
  width: 100%;
  height: 4px;
  background: #E2E8F0;
  border-radius: 999px;
  margin-top: 0.35rem;
  overflow: hidden;
}

.card-occupation-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 999px;
}

.card-badges-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Badges de Especialidades */
.badge-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.45rem;
  border-radius: 6px;
  border: 1px solid transparent;
  line-height: 1.2;
}

.badge-spec span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}

.badge-spec.ginecologia {
  background: #FDF2F8;
  color: #BE185D;
  border-color: #FBCFE8;
}

.badge-spec.cardiologia {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}

.badge-spec.traumatologia {
  background: #FFFBEB;
  color: #B45309;
  border-color: #FDE68A;
}

.badge-spec.cirugia {
  background: #EFF6FF;
  color: #001FD1;
  border-color: #BFDBFE;
}

.badge-spec.urologia {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.badge-spec.clinica {
  background: #EEF2FF;
  color: #4338CA;
  border-color: #C7D2FE;
}

/* ==========================================================================
   DRAWER / PANEL LATERAL DESLIZANTE
   ========================================================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 21, 43, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer-content {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 520px;
  background: #FFFFFF;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.drawer-content.active {
  transform: translateX(0);
}
/* Cerrado: sin sombra (se asomaba como una franja gris en el borde derecho del celular) y oculto,
   así sus botones no se alcanzan con Tab. Se oculta recién cuando termina de salir. */
.drawer-content:not(.active) { box-shadow: none; visibility: hidden; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.3s; }

.drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: #F8FAFC;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;
}

.drawer-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.drawer-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
}

.drawer-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-dark);
  margin: 0;
}

.drawer-subtitle {
  font-size: 0.8rem;
  color: var(--primary);
  font-weight: 700;
  margin-top: 2px;
}

.drawer-close-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.drawer-close-btn:hover {
  background: #E2E8F0;
  color: var(--text-dark);
}

.drawer-filter-tabs {
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: #FFFFFF;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  flex-shrink: 0;
}

.drawer-filter-btn {
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid var(--border);
  background: #F8FAFC;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.drawer-filter-btn:hover {
  background: #E2E8F0;
}

.drawer-filter-btn.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 31, 209, 0.25);
}

.drawer-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Card de Paciente en el Drawer */
.drawer-patient-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.drawer-patient-card:hover {
  border-color: #93C5FD;
  box-shadow: var(--shadow-md);
}

.card-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.card-time-tag {
  font-family: monospace;
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--primary);
  background: #EFF6FF;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid #BFDBFE;
}

.status-select-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

.status-select-badge.confirmado {
  background: #ECFDF5;
  color: #047857;
  border-color: #A7F3D0;
}

.status-select-badge.espera {
  background: #EFF6FF;
  color: #1D4ED8;
  border-color: #BFDBFE;
}

.status-select-badge.atendido {
  background: #F1F5F9;
  color: #475569;
  border-color: #CBD5E1;
}

.status-select-badge.cancelado {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}

.patient-info-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.patient-name-title {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.patient-dni-cov {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.patient-doc-room {
  font-size: 0.78rem;
  color: var(--text-main);
  margin-top: 0.35rem;
  font-weight: 600;
}

.btn-whatsapp-direct {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #047857;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-whatsapp-direct:hover {
  background: #D1FAE5;
  color: #065F46;
}

.btn-email-direct {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.btn-email-direct:hover {
  background: #DBEAFE;
  color: #1E40AF;
}

.btn-email-direct.enviado {
  color: #047857;
  background: #F0FDF4;
  border-color: #BBF7D0;
}

.btn-email-direct:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* NATIVE DELETE WRAPPER (2-STEP) */
.native-delete-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

.btn-card-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #FECACA;
  background: #FEF2F2;
  color: #DC2626;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 0 7px;
  flex-shrink: 0;
  white-space: nowrap;
}

.btn-card-trash:hover {
  background: #FEE2E2;
  color: #991B1B;
  border-color: #F87171;
  transform: scale(1.03);
}

.btn-card-trash:active {
  transform: scale(0.95);
}

.btn-card-trash.confirm-mode {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
  padding: 0 10px;
}

.btn-card-trash.confirm-mode:hover {
  background: #B91C1C;
  border-color: #B91C1C;
}

.btn-card-trash svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.del-text-hidden {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 5px;
  opacity: 0;
  animation: fadeInText 0.2s forwards;
}

@keyframes fadeInText {
  to { opacity: 1; }
}

.btn-cancel-trash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #FFFFFF;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  transform: scale(0.8) translateX(-10px);
  opacity: 0;
  flex-shrink: 0;
}

.btn-cancel-trash:hover {
  background: #F1F5F9;
  color: var(--text-dark);
  transform: scale(1.05) translateX(0);
  opacity: 1;
}

.btn-cancel-trash:active {
  transform: scale(0.95) translateX(0);
}

.btn-cancel-trash:not(.hidden) {
  transform: scale(1) translateX(0);
  opacity: 1;
}

.drawer-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  background: #FFFFFF;
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .calendar-section-wrap {
    padding: 1rem;
  }
  .calendar-monthly-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .calendar-weekdays-grid {
    display: none;
  }
  .drawer-content {
    max-width: 100%;
  }
}

/* ==========================================================================
   PATIENT SEARCH & AUTOCOMPLETE EN MODAL DE TURNO
   ========================================================================== */
.patient-picker-wrap {
  position: relative;
  width: 100%;
}

.patient-search-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.patient-search-box .search-icon {
  position: absolute;
  left: 0.85rem;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: none;
}

.patient-search-box input {
  padding-left: 2.5rem;
  padding-right: 1rem;
  width: 100%;
  font-size: 0.92rem;
  border-radius: 10px;
}

.patient-selected-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: #EFF6FF;
  border: 1.5px solid #93C5FD;
  border-radius: 10px;
  margin-top: 0.25rem;
}

.patient-card-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.patient-card-left .patient-icon {
  width: 32px;
  height: 32px;
  color: var(--primary);
  background: #DBEAFE;
  padding: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.patient-selected-card strong {
  font-size: 0.95rem;
  color: var(--navy);
  display: block;
}

.selected-patient-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.patient-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  max-height: 230px;
  overflow-y: auto;
  z-index: 10500;
}

.patient-dropdown-item {
  padding: 0.65rem 0.95rem;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
}

.patient-dropdown-item:last-child {
  border-bottom: none;
}

.patient-dropdown-item:hover, .patient-dropdown-item.highlighted {
  background: #F0F4FF;
}

.patient-item-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text-dark);
}

.patient-item-dni {
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 700;
}

.patient-item-cov {
  font-size: 0.72rem;
  background: #F1F5F9;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-muted);
  margin-left: 6px;
}

.patient-dropdown-empty {
  padding: 1rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.patient-dropdown-create-btn {
  width: 100%;
  padding: 0.65rem 0.95rem;
  background: #EFF6FF;
  border: none;
  border-top: 1px solid #BFDBFE;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: var(--transition);
}

.patient-dropdown-create-btn:hover {
  background: #DBEAFE;
}

/* SHADCN UI DIALOG (REPLICA EN VANILLA CSS) */
.shadcn-dialog {
  max-width: 425px !important;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  padding: 0;
  animation: shadcnDialogZoom 0.2s ease-out forwards;
}

@keyframes shadcnDialogZoom {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.shadcn-dialog-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  padding: 1.5rem 1.5rem 0 1.5rem;
  background: transparent;
  border-bottom: none;
}

.shadcn-dialog-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  color: #020817;
  margin: 0;
  display: flex;
  align-items: center;
}

.shadcn-dialog-description {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0.375rem 0 0 0;
}

.shadcn-dialog-close {
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  color: #020817;
  padding: 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
}

.shadcn-dialog-close:hover {
  opacity: 1;
  background: #f1f5f9;
}

.shadcn-dialog-close svg {
  width: 1rem;
  height: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.shadcn-dialog-body {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.shadcn-grid-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 1rem;
}

.shadcn-label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: #020817;
}

.shadcn-label.text-right {
  text-align: right;
}

.shadcn-input {
  display: flex;
  height: 2.25rem;
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid #e2e8f0;
  background-color: transparent;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: #020817;
}

.shadcn-input:focus {
  outline: none;
  border-color: #020817;
  box-shadow: 0 0 0 1px #020817;
}

.shadcn-input.col-span-3 {
  grid-column: span 3 / span 3;
}

.shadcn-dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 1.5rem 1.5rem 1.5rem;
}

.shadcn-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  height: 2.25rem;
  padding: 0 1rem;
  background-color: #020817;
  color: #f8fafc;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.shadcn-btn-primary:hover {
  background-color: rgba(2, 8, 23, 0.9);
}


/* ==========================================================================
   LABORATORIO PRINTABLE MODAL
   ========================================================================== */
.modal-lab-box {
  max-width: 950px !important;
  width: 95%;
}

.lab-print-container {
  background: white;
  padding: 10px;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: auto;
}

.lab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.lab-table th, .lab-table td {
  border: 1px solid #333;
  padding: 2px;
  text-align: center;
  vertical-align: middle;
}

.lab-header-left { text-align: left !important; padding: 10px !important; }
.lab-title { font-size: 1.1rem; font-weight: bold; }
.lab-subtitle { font-size: 0.85rem; font-weight: normal; }
.lab-header-center { text-align: center !important; }
.lab-logo-box { border: 2px solid #000; display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; font-weight: bold; font-size: 1.2rem; letter-spacing: -2px; }
.lab-header-right { text-align: right !important; padding: 10px !important; font-weight: normal; }

.lab-input-inline {
  border: none;
  border-bottom: 1px dotted #333;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: inherit;
  outline: none;
  width: 180px;
}

.lab-patient-name, .lab-patient-bed {
  background: #f0f0f0;
  padding: 6px !important;
}

.lab-fechas-label { text-align: right !important; font-weight: bold; background: #f0f0f0; }
.lab-date-input {
  width: 100%;
  border: none;
  text-align: center;
  background: transparent;
  outline: none;
  font-weight: bold;
}

.lab-category-vertical {
  width: 30px;
  background: #f9f9f9;
  letter-spacing: 1px;
  line-height: 1.2;
}

.lab-category-rotated {  background: #f9f9f9;  writing-mode: vertical-rl;  transform: rotate(180deg);  text-align: center;  vertical-align: middle;}.lab-category-horizontal {
  background: #f9f9f9;
}

.lab-test-name {
  text-align: left !important;
  font-weight: bold;
  white-space: nowrap;
  padding-left: 8px !important;
}

.lab-normal {
  font-size: 0.7rem;
  color: #555;
  white-space: nowrap;
}

.lab-input-cell {
  padding: 0 !important;
  width: 12%;
}

.lab-input-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 2px 4px;
}

.lab-input-wrapper input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  width: 100%;
}

.lab-unit {
  font-size: 0.65rem;
  color: #777;
  margin-left: 2px;
}

/* REMOVED: Block 3 - conflicting lab modal rules */

/* HARD RESET FOR LAB PRINTING */
/* REMOVED: Block 4 - conflicting lab modal rules */


/* REGLAS ESTRICTAS DE IMPRESIÓN PARA LABORATRIO (1 SOLA HOJA) */
/* REMOVED: Block 5 - conflicting lab modal rules */

.btn-llegada-direct {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #4F46E5; /* Indigo */
  background: #EEF2FF;
  border: 1px solid #C7D2FE;
  padding: 0.35rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-llegada-direct:hover {
  background: #E0E7FF;
}

.btn-llegada-direct.llegada-activa {
  background: #10B981; /* Verde éxito */
  color: #FFFFFF;
  border-color: #10B981;
}

.btn-llegada-direct.llegada-activa:hover {
  background: #059669;
  border-color: #059669;
}

/* DROPDOWN CARGAR DOCUMENTO */
.dropdown-wrapper {
  position: relative;
  display: inline-flex;
}
.dropdown-menu-docs {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-color);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  overflow: hidden;
}
.dropdown-menu-docs.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu-docs a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s ease;
  border-bottom: 1px solid var(--border-color);
}
.dropdown-menu-docs a:last-child {
  border-bottom: none;
}
.dropdown-menu-docs a:hover {
  background: var(--bg-color);
  color: var(--primary);
}
.dropdown-menu-docs a i {
  width: 16px;
  height: 16px;
  color: var(--primary);
}

/* Filtros de Historial */
.timeline-filters {
  padding: 0 5px;
}
.filter-btn {
  background: white;
  border: 1px solid var(--border-color);
  color: var(--text-dark);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}
.filter-btn:hover {
  background: var(--bg-color);
  border-color: var(--primary-light);
}
.filter-btn.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  border-color: var(--primary);
}

/* ==========================================================================
   MÓDULO DE INTERNACIÓN
   ========================================================================== */
.internacion-dashboard {
  padding: 1.5rem;
  max-width: 1600px;
  margin: 0 auto;
  height: calc(100vh - 70px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.internacion-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.internacion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
  overflow-y: auto;
  padding-bottom: 2rem;
}

.sector-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sector-header {
  background: #0F766E; /* Teal color inspired by the spreadsheet header */
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sector-header .bed-count {
  font-size: 0.8rem;
  background: rgba(255,255,255,0.2);
  padding: 2px 8px;
  border-radius: 12px;
}

.bed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.bed-item {
  display: flex;
  align-items: center;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #F1F5F9;
  gap: 10px;
  transition: background 0.2s;
}

.bed-item:last-child {
  border-bottom: none;
}

.bed-item:hover {
  background: #F8FAFC;
}

.bed-number {
  font-weight: 800;
  font-size: 0.9rem;
  color: #475569;
  width: 45px;
  flex-shrink: 0;
  text-align: center;
  background: #F1F5F9;
  padding: 4px;
  border-radius: 6px;
}

.bed-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bed-patient {
  font-weight: 600;
  color: var(--text-dark);
  font-size: 0.9rem;
}

.bed-date {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.bed-empty {
  color: #94A3B8;
  font-style: italic;
  font-size: 0.85rem;
}

.bed-action {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s;
}

.bed-action:hover {
  background: #EFF6FF;
}

.bed-item.occupied .bed-number {
  background: #FEF2F2;
  color: #DC2626;
}

.internacion-observaciones {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.internacion-observaciones h3 {
  color: #0F766E;
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0;
}

.internacion-observaciones textarea {
  width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px;
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  font-size: 0.9rem;
}

/* ==========================================================================
   IMPRESIÓN: PLANILLA DE INTERNACIÓN
   ========================================================================== */
.print-only {
  display: none;
}

/* REMOVED: Block 10 - moved to unified block */




/* REMOVED: Block 7 - conflicting generic modal rules */


/* ==========================================================================
   THE ULTIMATE PRINT FIX (OVERRIDE ALL PREVIOUS BUGS)
   ========================================================================== */
/* REMOVED: Block 8 - the main culprit showing random modals when printing */

/* AUTOCONTROL DE ORIENTACIÓN (PORTRAIT/LANDSCAPE) */
/* REMOVED: Block 9 - conflicting @page */
@page internacionLandscape {
  size: A4 landscape;
  margin: 10mm;
}


/* CRITICAL: Hide internación print layout unless explicitly printing internación */
@media print {
  body:not(.printing-internacion) #printInternacionLayout {
    display: none !important;
  }
  body:not(.printing-internacion) .print-only {
    display: none !important;
  }
}


/* ===========================================================================
   UNIFIED PRINT RULES — v127.0
   This single block controls ALL print behavior.
   Block 1 (HC page CSS) and Block 2 (Consultorio CSS) and Block 6 (Internación)
   remain above. Everything else was removed and consolidated here.
   =========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 5mm;
  }

  /* @page only for non-internación */
  body:not(.printing-internacion) {
    /* Force portrait for HC/Lab */
  }
  
  /* --- BASE: Hide ALL app UI when NOT printing internación --- */
  body:not(.printing-internacion) .admin-layout,
  body:not(.printing-internacion) .sidebar,
  body:not(.printing-internacion) .sidebar-wrap,
  body:not(.printing-internacion) .top-header,
  body:not(.printing-internacion) .main-content,
  body:not(.printing-internacion) .btn-menu-mobile {
    display: none !important;
  }

  /* --- CRITICAL: Hide ALL modals by default when printing --- */
  .modal-backdrop {
    display: none !important;
  }

  /* --- PRINT HC: Show #printArea only --- */
  body.printing-hc .print-area {
    display: block !important;
    width: 100% !important;
    background: #FFFFFF !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
  }

  body.printing-hc #printInternacionLayout {
    display: none !important;
  }

  body.printing-hc .print-only {
    display: none !important;
  }

  /* --- PRINT INTERNACIÓN: Show #printInternacionLayout only --- */
  body.printing-internacion #printInternacionLayout {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    z-index: 999999 !important;
  }

  body.printing-internacion .print-area {
    display: none !important;
  }

  body:not(.printing-internacion) #printInternacionLayout {
    display: none !important;
  }

  body:not(.printing-internacion) .print-only {
    display: none !important;
  }

}

/* ==========================================================================
   LABORATORIO — PLANILLA EN UNA SOLA HOJA A4 (pantalla + impresión)
   Única fuente de estilos de la planilla. Reemplaza las reglas anteriores
   (zoom 0.75 / 0.85 / 0.9 / 0.98, 7pt / 8pt / 9px) que se contradecían.
   A4 = 210 x 297 mm. Margen de impresión 5 mm -> área útil 200 x 287 mm.
   ========================================================================== */

/* ---------- PANTALLA: el modal muestra la planilla como una hoja A4 ---------- */
.modal-lab-box {
  max-width: 900px !important;
}
.modal-lab-box .modal-body {
  background: #E2E8F0;
}
#printLabArea.lab-print-container,
.lab-sheet-screen .lab-print-container {
  width: 100%;
  max-width: 794px;            /* ancho A4 a 96dpi */
  margin: 12px auto;
  padding: 18px 20px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15);
  overflow-x: auto;
}
.lab-print-container .lab-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 11px;
}
.lab-print-container .lab-table th,
.lab-print-container .lab-table td {
  border: 1px solid #333;
  padding: 1px 3px;
  height: 19px;
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}
/* Anchos de columna (9 columnas): categoría | análisis | normal | 6 días */
.lab-print-container .lab-category-vertical,
.lab-print-container .lab-category-horizontal,
.lab-print-container .lab-category-rotated { width: 5%; }
.lab-print-container .lab-test-name { width: 14%; }
.lab-print-container .lab-normal { width: 10%; font-size: 10px; }
.lab-print-container .lab-input-cell { width: 11.8%; }

.lab-print-container .lab-category-vertical {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0;
}
.lab-print-container .lab-category-horizontal {
  font-size: 8px;
  line-height: 1.1;
  word-break: break-word;
}
.lab-print-container .lab-header-left,
.lab-print-container .lab-header-right { padding: 4px 6px !important; }
.lab-print-container .lab-title { font-size: 14px; }
.lab-print-container .lab-subtitle { font-size: 11px; }
.lab-print-container .lab-logo-box img { height: 38px !important; }
.lab-print-container .lab-input-inline { width: 60%; }
.lab-print-container .lab-input-wrapper { padding: 0 2px; height: 100%; }
.lab-print-container .lab-input-wrapper input,
.lab-print-container .lab-input-cell > input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  text-align: center;
  font-size: 11px;
  padding: 0;
}
.lab-print-container .lab-input-cell input:focus,
.lab-print-container .lab-date-input:focus,
.lab-print-container .lab-input-inline:focus {
  background: #EFF6FF;
}
.lab-print-container .lab-unit { font-size: 8px; }
.lab-print-container .lab-date-input { font-size: 10px; }

/* Valores ya guardados (visor / impresión): texto en lugar de inputs */
.lab-print-container .lab-val {
  flex: 1;
  display: inline-block;
  min-width: 0;
  text-align: center;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lab-print-container .lab-val-inline {
  flex: none;
  text-align: left;
  margin-left: 4px;
  min-width: 60px;
  border-bottom: 1px dotted #333;
}
.lab-print-container .lab-val-date { font-weight: 700; }

/* Visor ("Ver") */
.lab-viewer-wrap {
  background: #E2E8F0;
  padding: 6px;
  border-radius: 8px;
  overflow-x: auto;
}

/* ---------- IMPRESIÓN: exactamente 1 hoja A4 vertical ---------- */
@media print {
  body.printing-hc #printArea .lab-print-sheet {
    width: 200mm !important;
    height: 285mm !important;          /* área útil A4 con margen 5mm (margen de seguridad 2mm) */
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    zoom: 1 !important;
  }
  body.printing-hc #printArea .lab-print-sheet-multi {
    page-break-after: always !important;
    break-after: page !important;
  }
  body.printing-hc #printArea .lab-print-sheet .lab-print-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    zoom: 1 !important;
  }
  /* La tabla ocupa toda la hoja: las filas se reparten el alto disponible */
  body.printing-hc #printArea .lab-print-sheet .lab-table {
    width: 100% !important;
    height: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    font-size: 7.5pt !important;
  }
  body.printing-hc #printArea .lab-print-sheet .lab-table th,
  body.printing-hc #printArea .lab-print-sheet .lab-table td {
    padding: 0 2px !important;
    height: auto !important;
    font-size: 7.5pt !important;
    line-height: 1.05 !important;
    color: #000 !important;
    border: 0.6pt solid #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.printing-hc #printArea .lab-print-sheet .lab-category-vertical {
    font-size: 6.5pt !important;
    line-height: 1 !important;
  }
  body.printing-hc #printArea .lab-print-sheet .lab-category-horizontal {
    font-size: 6pt !important;
  }
  body.printing-hc #printArea .lab-print-sheet .lab-normal { font-size: 6.5pt !important; }
  body.printing-hc #printArea .lab-print-sheet .lab-unit { font-size: 5.5pt !important; color: #333 !important; }
  body.printing-hc #printArea .lab-print-sheet .lab-title { font-size: 10pt !important; }
  body.printing-hc #printArea .lab-print-sheet .lab-subtitle { font-size: 7.5pt !important; }
  body.printing-hc #printArea .lab-print-sheet .lab-logo-box img { height: 9mm !important; }
  body.printing-hc #printArea .lab-print-sheet .lab-input-wrapper {
    height: auto !important;
    padding: 0 !important;
  }
}

/* ==========================================================================
   INTERNACIÓN — barra de búsqueda, habitaciones y camas (pantalla)
   ========================================================================== */
.internacion-toolbar {
  flex-wrap: wrap;
  gap: 12px;
}
.internacion-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.internacion-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 260px;
}
.internacion-search > svg,
.internacion-search > i {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.internacion-search input {
  width: 100%;
  padding: 8px 32px 8px 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  background: #fff;
  outline: none;
}
.internacion-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 31, 209, 0.12);
}
.internacion-search input::-webkit-search-cancel-button { display: none; }
.internacion-search-clear {
  position: absolute;
  right: 6px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px;
  display: inline-flex;
}
.internacion-search-clear svg { width: 16px; height: 16px; }
.internacion-search-clear.hidden { display: none; }
.internacion-filter-select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
}
#internacionToggleTodo:disabled { opacity: 0.5; cursor: not-allowed; }

.internacion-grid {
  align-items: start;
}
.internacion-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}
.sector-card .sector-header {
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
}
.sector-card .sector-header:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.7);
  outline-offset: -3px;
}
.sector-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sector-toggle-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.sector-card.is-open .sector-toggle-icon {
  transform: rotate(0deg);
}
.bed-list[hidden] { display: none !important; }
.bed-actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.bed-action svg { width: 18px; height: 18px; }
.bed-info { min-width: 0; }
.bed-patient {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bed-item-empty {
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* Modal asignar / editar cama */
.cama-actual-box {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.cama-actual-box.hidden { display: none; }
#asignarCamaFecha {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
}
.cama-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.btn-danger-outline {
  background: #fff;
  color: #DC2626;
  border: 1px solid #FECACA;
}
.btn-danger-outline:hover { background: #FEF2F2; }
.patient-dropdown-free { border-top: 1px dashed var(--border); }

/* ==========================================================================
   INTERNACIÓN — PLANILLA IMPRESA (A4 apaisada, una hoja)
   ========================================================================== */
#printInternacionLayout { display: none; }

@media print {
  body.printing-internacion #printInternacionLayout {
    display: block !important;
    position: static !important;
    width: 100% !important;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #000 !important;
    background: #fff !important;
  }
  body.printing-internacion .admin-layout,
  body.printing-internacion .modal-backdrop,
  body.printing-internacion .print-area,
  body.printing-internacion .toast,
  body.printing-internacion .drawer-backdrop,
  body.printing-internacion .drawer-content,
  body.printing-internacion .lock-screen-backdrop {
    display: none !important;
  }
  body.printing-internacion #printInternacionLayout * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #printInternacionLayout .print-int-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1.5pt solid #000;
    padding-bottom: 2mm;
    margin-bottom: 2mm;
  }
  #printInternacionLayout .print-int-header h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 16pt;
    margin: 0;
  }
  #printInternacionLayout .print-int-fecha,
  #printInternacionLayout .print-int-turno {
    font-size: 9pt;
    font-weight: bold;
  }
  #printInternacionLayout .print-int-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 3mm;
    align-items: start;
  }
  #printInternacionLayout .print-int-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    page-break-inside: avoid;
  }
  #printInternacionLayout .print-int-table th,
  #printInternacionLayout .print-int-table td {
    border: 0.6pt solid #000;
    padding: 0.6mm 1.2mm;
    font-size: 7.5pt;
    line-height: 1.15;
    height: 5.4mm;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  #printInternacionLayout .th-green {
    background: #D1FAE5 !important;
    font-weight: bold;
    text-align: center;
    font-size: 8.5pt;
  }
  #printInternacionLayout .col-cama { width: 13%; text-align: center; font-weight: bold; }
  #printInternacionLayout .col-paciente { width: 67%; letter-spacing: -0.1pt; }
  #printInternacionLayout .col-fecha { width: 20%; text-align: center; }
  #printInternacionLayout .print-int-obs { margin-top: 3mm; }
  #printInternacionLayout .print-int-obs td {
    height: 16mm;
    vertical-align: top;
    white-space: normal;
  }
}

/* Internación — ajustes de layout */
.internacion-toolbar-actions > * { flex: 0 0 auto; }
.internacion-search { width: 280px; }
.internacion-filter-select { width: auto !important; min-width: 150px; }
.internacion-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.bed-number { width: 58px; white-space: nowrap; font-size: 0.85rem; }
@media (max-width: 700px) {
  .internacion-search { width: 100%; }
  .internacion-toolbar-actions { width: 100%; }
}
.sector-header .bed-count { white-space: nowrap; flex-shrink: 0; }

/* Internación — estado de conexión y observaciones compartidas */
.internacion-aviso {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
}
.internacion-aviso.hidden { display: none; }
.internacion-aviso svg { width: 18px; height: 18px; flex-shrink: 0; }
.internacion-aviso .btn { margin-left: auto; }
.internacion-obs-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.internacion-obs-estado { font-size: 0.78rem; color: var(--text-muted); }
.internacion-obs-estado.is-ok { color: #16A34A; }
.internacion-obs-estado.is-error { color: #DC2626; }
.internacion-observaciones textarea[readonly] { background: #F8FAFC; color: var(--text-muted); }

/* ==========================================================================
   TARJETA DE TURNO (drawer del día)
   ========================================================================== */
.turno-card {
  --spec: #64748B;
  position: relative;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-left: 4px solid var(--spec);
  border-radius: 12px;
  padding: 14px 16px 14px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.turno-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08); }

/* Cabecera: hora · especialidad · estado · menú */
.turno-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.turno-hora {
  font-family: var(--font-heading, inherit);
  font-size: 1.05rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.turno-spec {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--spec);
  background: color-mix(in srgb, var(--spec) 12%, #fff);
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.turno-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Estado como chip de color (select nativo por accesibilidad) */
.turno-estado {
  --c: #B45309; --bg: #FEF3C7;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  color: var(--c);
  border-radius: 999px;
  padding: 0 8px 0 10px;
  height: 28px;
  cursor: pointer;
}
.turno-estado.estado-confirmado { --c: #1D4ED8; --bg: #DBEAFE; }
.turno-estado.estado-realizado  { --c: #15803D; --bg: #DCFCE7; }
.turno-estado.estado-cancelado  { --c: #64748B; --bg: #F1F5F9; }
.turno-estado-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.turno-estado select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0 14px 0 0;
  margin-right: -14px;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 1;
}
.turno-estado svg { width: 14px; height: 14px; pointer-events: none; }
.turno-estado:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }

/* Menú ⋯ */
.turno-menu-wrap { position: relative; }
.turno-menu-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: #64748B;
  border-radius: 8px; cursor: pointer;
}
.turno-menu-btn:hover { background: #F1F5F9; color: #0F172A; }
.turno-menu-btn svg { width: 18px; height: 18px; }
.turno-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 210px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  padding: 4px;
  z-index: 20;
}
.turno-menu.hidden { display: none; }
.turno-menu button {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  border: none; background: transparent;
  padding: 8px 10px;
  font: inherit; font-size: 0.84rem; font-weight: 600; color: #334155;
  border-radius: 7px; cursor: pointer; text-align: left;
}
.turno-menu button:hover { background: #F1F5F9; }
.turno-menu button svg { width: 16px; height: 16px; flex-shrink: 0; }
.turno-menu .turno-menu-danger { color: #DC2626; }
.turno-menu .turno-menu-danger:hover,
.turno-menu .turno-menu-danger[data-confirmar] { background: #FEF2F2; }

/* Cuerpo: nombre y datos */
.turno-nombre {
  display: block;
  font-size: 1.08rem;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.3;
  margin: 0 0 3px;
}
.turno-nombre-link {
  border: none; background: none; padding: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.turno-nombre-link:hover { color: var(--primary, #2563EB); text-decoration: underline; text-underline-offset: 3px; }
.turno-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  font-size: 0.82rem;
  color: #64748B;
  font-variant-numeric: tabular-nums;
}
.turno-meta-sep { color: #CBD5E1; }
.turno-obs {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin: 8px 0 0;
  padding: 6px 10px;
  background: #F8FAFC;
  border-radius: 8px;
  font-size: 0.8rem;
  color: #475569;
}
.turno-obs svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: #94A3B8; }

/* Acciones */
.turno-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
}
.turno-accion {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.turno-accion svg { width: 15px; height: 15px; }
.turno-accion:hover { background: #F8FAFC; border-color: #CBD5E1; }
.turno-accion-primaria { background: var(--primary, #2563EB); border-color: var(--primary, #2563EB); color: #fff; }
.turno-accion-primaria:hover { background: var(--primary-dark, #1D4ED8); border-color: var(--primary-dark, #1D4ED8); }
.turno-accion-llego { background: #DCFCE7; border-color: #BBF7D0; color: #15803D; }
.turno-accion-llego:hover { background: #BBF7D0; border-color: #86EFAC; }
.turno-accion-whatsapp svg { color: #16A34A; }
.turno-accion-email svg { color: #2563EB; }
.turno-accion:disabled { opacity: 0.6; cursor: wait; }

/* Estados de la tarjeta */
.turno-card.estado-realizado { background: #FCFFFD; }
.turno-card.estado-cancelado { opacity: 0.62; border-left-color: #CBD5E1; }
.turno-card.estado-cancelado .turno-nombre { text-decoration: line-through; text-decoration-color: #94A3B8; }
.turno-card.estado-cancelado:hover { opacity: 0.9; }

@media (max-width: 420px) {
  .turno-card-actions { flex-wrap: wrap; }
  .turno-accion { flex: 1 1 45%; }
}

/* ==========================================================================
   PULIDO VISUAL GENERAL
   ========================================================================== */
/* Íconos dentro de botones chicos: tamaño consistente */
.btn-sm svg { width: 15px; height: 15px; }

/* Calendario: días vacíos limpios, días pasados atenuados */
.calendar-day-card.is-empty .card-badges-list { display: none; }
.calendar-day-card.past .card-day-num { opacity: 0.55; }
.calendar-day-card.past.is-empty { background: #FBFCFD; }

/* Pacientes */
.pac-nombre { display: block; color: #0F172A; }
.pac-email { display: block; margin-top: 2px; color: var(--primary-royal, #2563EB); font-size: 0.8rem; }
.pac-sin-dato { color: #94A3B8 !important; }
.pac-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pac-acciones { display: flex; gap: 6px; flex-wrap: nowrap; }
.pac-acciones .btn { white-space: nowrap; }

/* Login: marca de la clínica */
.lock-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: #CBD5E1;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.lock-logo {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: contain;
  background: #fff;
  padding: 3px;
}

/* ==========================================================================
   DOCUMENTO ADJUNTO
   ========================================================================== */
.adj-dropzone {
  border: 2px dashed #CBD5E1;
  border-radius: 12px;
  padding: 16px;
  background: #F8FAFC;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.adj-dropzone.is-drag { border-color: var(--primary, #2563EB); background: #EFF6FF; }
.adj-dropzone-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; padding: 10px 0 2px; color: #64748B; font-size: 0.85rem;
}
.adj-dropzone-vacio svg { width: 34px; height: 34px; color: #94A3B8; margin-bottom: 4px; }
.adj-dropzone-vacio strong { color: #0F172A; font-size: 0.95rem; }
.adj-dropzone-vacio.hidden { display: none; }
.adj-dropzone .adjuntos-actions { justify-content: center; }
.adj-ayuda { color: #94A3B8; font-size: 0.75rem; text-align: center; }

.adj-lista { display: flex; flex-direction: column; gap: 8px; }
.adj-lista:empty { display: none; }
.adj-item {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px 10px;
}
.adj-item.is-subiendo { opacity: 0.7; }
.adj-item-thumb {
  width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #F1F5F9; color: #64748B;
}
.adj-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adj-item-thumb svg { width: 20px; height: 20px; }
.adj-item-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.adj-item-nombre { font-size: 0.85rem; font-weight: 600; color: #0F172A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adj-item-estado { font-size: 0.75rem; color: #64748B; }
.adj-item-quitar {
  border: none; background: transparent; color: #94A3B8; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
}
.adj-item-quitar:hover { background: #FEF2F2; color: #DC2626; }
.adj-item-quitar svg { width: 16px; height: 16px; }
.adj-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .adj-fila { grid-template-columns: 1fr; } }

/* Tarjeta en el historial */
.badge-adjunto {
  display: inline-flex; align-items: center; gap: 5px;
  background: #EDE9FE; color: #6D28D9;
  font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.badge-adjunto svg { width: 13px; height: 13px; }
.timeline-card-adjunto { border-left: 4px solid #8B5CF6; }
.adj-card-pie { font-size: 0.78rem; color: #94A3B8; margin: 8px 0 0; }

.adj-galeria { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.adj-galeria-item {
  width: 120px; display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: #334155;
}
.adj-galeria-item img,
.adj-galeria-icono {
  width: 120px; height: 90px; border-radius: 8px; border: 1px solid #E2E8F0; object-fit: cover;
}
.adj-galeria-icono { display: flex; align-items: center; justify-content: center; }
.adj-galeria-icono svg { width: 30px; height: 30px; }
.adj-galeria-icono.is-pdf  { background: #FEF2F2; color: #DC2626; }
.adj-galeria-icono.is-link { background: #EFF6FF; color: #2563EB; }
.adj-galeria-icono.is-img  { background: #F1F5F9; color: #64748B; }
.adj-galeria-nombre { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adj-galeria-item:hover .adj-galeria-nombre { color: var(--primary, #2563EB); text-decoration: underline; }
.adj-galeria-item.is-error { opacity: 0.6; }
.adj-galeria.is-grande .adj-galeria-item { width: 200px; }
.adj-galeria.is-grande img,
.adj-galeria.is-grande .adj-galeria-icono { width: 200px; height: 150px; }
.adj-sin-archivos { color: #94A3B8; font-size: 0.85rem; }

/* Visor */
.adj-visor { padding: 8px 4px; }
.adj-visor h2 { margin: 10px 0 4px; font-size: 1.3rem; color: #0F172A; }
.adj-visor-meta { color: #64748B; font-size: 0.85rem; margin: 0 0 12px; }
.adj-visor-notas { background: #F8FAFC; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; white-space: pre-wrap; font-size: 0.9rem; }

/* Impresión (Imprimir Todo) */
@media print {
  .adj-print-page { font-family: Arial, Helvetica, sans-serif; color: #000; }
  .adj-print-head { display: flex; justify-content: space-between; border-bottom: 1pt solid #000; padding-bottom: 2mm; margin-bottom: 4mm; font-size: 9pt; }
  .adj-print-page h2 { font-size: 14pt; margin: 0 0 2mm; }
  .adj-print-page p { font-size: 10pt; margin: 0 0 2mm; }
  .adj-print-img { display: block; max-width: 100%; max-height: 220mm; margin: 3mm auto; object-fit: contain; page-break-inside: avoid; }
}

/* ==========================================================================
   FOJA QUIRÚRGICA + ANESTESIA
   ========================================================================== */
/* ---- Formulario ---- */
.foja-tabs {
  display: flex; gap: 6px; padding: 0 24px; border-bottom: 1px solid #E2E8F0; background: #fff;
}
.foja-tab {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: none; cursor: pointer;
  padding: 12px 14px; font: inherit; font-weight: 700; font-size: 0.88rem; color: #64748B;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.foja-tab svg { width: 16px; height: 16px; }
.foja-tab.is-active { color: var(--primary, #2563EB); border-bottom-color: var(--primary, #2563EB); }
.foja-panel.hidden { display: none; }
.foja-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.foja-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
@media (max-width: 640px) { .foja-grid-2, .foja-grid-4 { grid-template-columns: 1fr 1fr; } }
.foja-radios { display: flex; gap: 18px; flex-wrap: wrap; }
.foja-radios label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; cursor: pointer; }
.foja-ayuda { font-size: 0.78rem; color: #64748B; margin: -4px 0 8px; }
.foja-obs-wrap { overflow-x: auto; border: 1px solid #E2E8F0; border-radius: 10px; margin-bottom: 8px; }
.foja-obs-tabla { width: 100%; border-collapse: collapse; min-width: 640px; }
.foja-obs-tabla th {
  background: #F8FAFC; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: #64748B; padding: 6px; text-align: left; border-bottom: 1px solid #E2E8F0;
}
.foja-obs-tabla td { padding: 3px 4px; border-bottom: 1px solid #F1F5F9; }
.foja-obs-tabla input, .foja-obs-tabla select {
  width: 100%; border: 1px solid transparent; background: transparent; border-radius: 6px;
  padding: 5px 6px; font: inherit; font-size: 0.85rem;
}
.foja-obs-tabla input:focus, .foja-obs-tabla select:focus { border-color: var(--primary, #2563EB); background: #fff; outline: none; }
.foja-obs-quitar {
  border: none; background: none; color: #94A3B8; cursor: pointer; width: 26px; height: 26px;
  border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
}
.foja-obs-quitar:hover { background: #FEF2F2; color: #DC2626; }
.foja-obs-quitar svg { width: 14px; height: 14px; }

/* ---- Tarjeta en el historial ---- */
.badge-foja {
  display: inline-flex; align-items: center; gap: 5px;
  background: #FFE4E6; color: #BE123C;
  font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.badge-foja svg { width: 13px; height: 13px; }
.timeline-card-foja { border-left: 4px solid #E11D48; }

/* ---- Hoja (común a visor e impresión) ---- */
.foja-page {
  font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff;
  font-size: 10pt; line-height: 1.25;
}
.foja-membrete { display: flex; align-items: center; gap: 10px; border-bottom: 1.2pt solid #000; padding-bottom: 6px; margin-bottom: 8px; }
.foja-logo { width: 44px; height: 44px; object-fit: contain; }
.foja-membrete-nombre { font-family: Georgia, 'Times New Roman', serif; font-size: 16pt; font-weight: bold; letter-spacing: 0.02em; }
.foja-membrete-dir { font-size: 7.5pt; font-style: italic; }
.foja-membrete-inst { font-size: 10pt; font-weight: bold; letter-spacing: 0.04em; margin-top: 2px; }
.foja-titulo { text-align: center; font-size: 13pt; font-weight: bold; letter-spacing: 0.06em; margin: 4px 0 8px; }
.foja-titulo-izq { text-align: left; margin: 0; flex: 3; }
.foja-fila { display: flex; gap: 12px; border-bottom: 0.7pt solid #000; padding: 4px 0 2px; align-items: flex-end; }
.foja-fila-titulo { align-items: center; }
.foja-campo { flex: 1; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.foja-campo.flex2 { flex: 2; }
.foja-campo.flex3 { flex: 3; }
.foja-lbl { font-size: 8pt; font-weight: bold; white-space: nowrap; }
.foja-val { font-size: 10pt; overflow-wrap: anywhere; }
.foja-bloque { border-bottom: 0.7pt solid #000; padding: 4px 0; }
.foja-multilinea { flex-direction: column; gap: 2px; }
.foja-multilinea .foja-val { min-height: 30px; }
.foja-induccion { justify-content: space-between; }
.foja-induccion span { font-size: 8.5pt; font-weight: bold; }
.foja-chk { font-size: 12pt; }
.foja-cuerpo { display: flex; border-top: 0.7pt solid #000; margin-top: 2px; }
.foja-informe { flex: 1; padding: 8px 10px 8px 0; border-right: 0.8pt solid #000; min-height: 600px; display: flex; flex-direction: column; }
.foja-informe h4 { font-size: 9pt; margin: 8px 0 2px; text-transform: uppercase; }
.foja-informe p { margin: 0 0 4px; white-space: normal; }
.foja-hallazgos { flex: 1; }
.foja-orden { width: 130px; padding: 220px 0 0 10px; font-size: 8.5pt; }
.foja-orden ol { padding-left: 16px; margin: 6px 0 0; }
.foja-orden li { margin-bottom: 8px; }
.foja-firma { margin-top: auto; padding-top: 30px; width: 60%; font-size: 8.5pt; text-align: center; }
.foja-firma-der { margin: 10px 0 8px auto; width: 45%; padding-top: 24px; }
.foja-firma-linea { border-top: 0.8pt dotted #000; margin-bottom: 3px; }
.foja-grafico { border-bottom: 0.7pt solid #000; padding: 4px 0; }
.foja-svg { display: block; width: 100%; height: auto; }
.foja-hemo { display: flex; border-top: 0.8pt solid #000; border-bottom: 0.8pt solid #000; margin-top: 4px; min-height: 90px; }
.foja-hemo-izq { width: 34%; border-right: 0.8pt solid #000; padding: 6px 8px 6px 0; font-size: 9pt; }
.foja-hemo-izq table { border-collapse: collapse; margin-top: 4px; }
.foja-hemo-izq td { padding: 1px 6px 1px 0; font-size: 9pt; }
.foja-hemo-der { flex: 1; padding: 6px 10px; font-size: 9pt; }
.foja-hemo-der p { margin: 4px 0 0; }

/* ---- Visor en pantalla: hojas tipo papel ---- */
.foja-visor { background: #E2E8F0; padding: 14px; border-radius: 10px; display: flex; flex-direction: column; gap: 14px; }
.foja-visor .foja-page { max-width: 794px; width: 100%; margin: 0 auto; padding: 28px 32px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.15); box-sizing: border-box; }

/* ---- Impresión: 2 hojas A4 ---- */
@media print {
  body.printing-hc #printArea .foja-print .foja-page {
    width: 196mm !important;
    min-height: 283mm !important;
    box-sizing: border-box !important;
    padding: 2mm 1mm !important;
    page-break-after: always !important;
    break-after: page !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.printing-hc #printArea .foja-print:not(.foja-print-multi) .foja-page:last-child {
    page-break-after: auto !important; break-after: auto !important;
  }
  body.printing-hc #printArea .foja-informe { min-height: 180mm !important; }
  body.printing-hc #printArea .foja-orden { padding-top: 70mm !important; }
}

/* ==========================================================================
   PLANILLAS: EPICRISIS · ENFERMERÍA · INDICACIONES MÉDICAS
   ========================================================================== */
.dropdown-sep { height: 1px; background: #E2E8F0; margin: 4px 8px; }
.pl-titulo-icono { display: inline-flex; color: var(--primary, #2563EB); vertical-align: middle; }
.pl-titulo-icono svg { width: 20px; height: 20px; }

/* Formulario */
.pl-fila { display: grid; gap: 0 12px; }
.pl-fila-1 { grid-template-columns: minmax(0, 320px); }
.pl-fila-2 { grid-template-columns: repeat(2, 1fr); }
.pl-fila-3 { grid-template-columns: repeat(3, 1fr); }
.pl-fila-4 { grid-template-columns: repeat(4, 1fr); }
#planillaCuerpo .pl-fila:has(> .form-group:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
@media (max-width: 640px) { .pl-fila-3, .pl-fila-4 { grid-template-columns: repeat(2, 1fr); } }
.pl-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; margin-bottom: 12px; }
.pl-checks label { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.88rem; cursor: pointer; }
.pl-accion-barra { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pl-accion-mini {
  margin-top: 6px; border: none; background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--primary, #2563EB); font: inherit; font-size: 0.8rem; font-weight: 600;
}
.pl-accion-mini svg { width: 14px; height: 14px; }
.pl-accion-mini:hover { text-decoration: underline; }
.pl-tabla { min-width: 600px; }

/* Tarjetas del historial */
.badge-epicrisis, .badge-enfermeria, .badge-indicaciones {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
}
.badge-epicrisis svg, .badge-enfermeria svg, .badge-indicaciones svg { width: 13px; height: 13px; }
.badge-epicrisis    { background: #CCFBF1; color: #0F766E; }
.badge-enfermeria   { background: #E0F2FE; color: #0369A1; }
.badge-indicaciones { background: #FEF3C7; color: #B45309; }
.timeline-card-epicrisis    { border-left: 4px solid #14B8A6; }
.timeline-card-enfermeria   { border-left: 4px solid #0EA5E9; }
.timeline-card-indicaciones { border-left: 4px solid #F59E0B; }
.pl-card-detalle { color: #475569; font-size: 0.88rem; margin: 2px 0 6px; }
.pl-card-lista { margin: 4px 0 0; padding-left: 18px; font-size: 0.88rem; color: #334155; }
.pl-card-lista li { margin-bottom: 2px; }
.pl-card-mas { color: #94A3B8; list-style: none; margin-left: -18px; }
.pl-card-texto { white-space: pre-wrap; font-size: 0.88rem; color: #334155; margin: 6px 0 0; }

/* Hoja impresa / visor */
.pl-page { display: flex; flex-direction: column; }
.pl-imp-seccion {
  margin-top: 8px; padding: 2px 6px; background: #F1F5F9; border: 0.6pt solid #000; border-bottom: none;
  font-size: 8.5pt; font-weight: bold; letter-spacing: 0.04em;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pl-imp-bloque { border-bottom: 0.7pt solid #000; padding: 4px 0; }
.pl-imp-texto { font-size: 10pt; margin-top: 2px; }
.pl-imp-checks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; padding: 4px 0; border-bottom: 0.7pt solid #000; font-size: 9pt; }
.pl-imp-tabla { width: 100%; border-collapse: collapse; margin: 2px 0 4px; table-layout: fixed; }
.pl-imp-tabla th, .pl-imp-tabla td { border: 0.6pt solid #000; padding: 2px 4px; font-size: 9pt; text-align: left; overflow-wrap: anywhere; }
.pl-imp-tabla th { font-size: 8pt; background: #F1F5F9; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pl-imp-tabla td { height: 16px; }
.pl-page .foja-firma-der { margin-top: 24px; }
@media print {
  body.printing-hc #printArea .foja-print .pl-page { min-height: 0 !important; }
}
/* Planillas: los datos cortos no se parten en dos renglones */
.pl-page .foja-fila { flex-wrap: wrap; row-gap: 3px; column-gap: 14px; }
.pl-page .foja-campo { flex: 1 1 auto; }
.pl-page .foja-campo.flex3 { flex: 3 1 60%; }
.pl-page .foja-val { white-space: nowrap; }
.pl-page .foja-campo.flex3 .foja-val { white-space: normal; }

/* ==========================================================================
   📱 VERSIÓN CELULAR (≤ 700 px) — no afecta la vista de escritorio
   ========================================================================== */
.card-mobile-resumen { display: none; }
.btn-label-corto { display: none; }

@media (max-width: 700px) {
  /* ---- Base ---- */
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: none; }
  /* 16px en campos: evita que el iPhone haga zoom al tocar un campo */
  input, select, textarea { font-size: 16px !important; }
  input[type="date"], input[type="time"] { min-width: 0; width: 100%; -webkit-appearance: none; appearance: none; }

  .main-content {
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 0.75rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- Cabecera: título y botones en una línea compacta ---- */
  .top-header { gap: 0.6rem !important; margin-bottom: 0.9rem !important; align-items: center; }
  .header-left-wrap { flex: 1 1 100%; min-width: 0; }
  .header-title-wrap { min-width: 0; }
  .header-title-wrap h1 { font-size: 1.2rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-title-wrap p { font-size: 0.75rem !important; }
  .header-actions { width: 100%; display: flex; gap: 8px; justify-content: stretch !important; }
  .header-actions > .btn, .header-actions > .dropdown-wrapper { flex: 1 1 0; }
  .header-actions .btn { width: 100%; justify-content: center; padding: 0.55rem 0.7rem !important; font-size: 0.85rem !important; min-height: 42px; }
  .header-actions .btn-secondary .btn-label { display: none; }
  .header-actions .btn-secondary { flex: 0 0 46px !important; }
  .btn-label-corto { display: inline; }
  .dropdown-wrapper .btn-label { display: none; }
  .dropdown-menu-docs {
    position: fixed !important;
    left: 0.75rem !important; right: 0.75rem !important;
    top: auto !important; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important; max-width: none !important;
    max-height: 70vh; overflow-y: auto;
    border-radius: 16px !important;
    box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.3) !important;
    z-index: 3000 !important;
  }
  .dropdown-menu-docs a { padding: 0.85rem 1rem !important; font-size: 0.95rem !important; }

  /* ---- Calendario: mes completo en una grilla compacta de 7 columnas ---- */
  .calendar-section-wrap { padding: 0.75rem !important; }
  .calendar-weekdays-grid {
    display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important;
    font-size: 0.68rem !important; margin-bottom: 4px;
  }
  .calendar-weekdays-grid > * { padding: 4px 0 !important; text-align: center; }
  .calendar-monthly-grid { grid-template-columns: repeat(7, 1fr) !important; gap: 4px !important; }
  .calendar-day-card {
    min-height: 58px !important; height: auto !important; padding: 5px 4px !important;
    border-radius: 9px !important; gap: 2px !important; position: relative;
  }
  .calendar-day-card .card-turnos-main,
  .calendar-day-card .card-badges-list,
  .calendar-day-card .tag-today-badge,
  .calendar-day-card small { display: none !important; }
  .calendar-day-card .card-top-row { justify-content: center; }
  .calendar-day-card .card-day-num { font-size: 0.85rem !important; }
  .calendar-day-card.today { box-shadow: inset 0 0 0 2px var(--primary, #2563EB); }
  .card-mobile-resumen {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    order: 2; margin-top: auto;
  }
  .card-mobile-count {
    min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
    background: var(--primary, #2563EB); color: #fff; font-size: 0.7rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .card-dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
  .card-dots span { width: 6px; height: 6px; border-radius: 50%; }
  .calendar-day-card .card-top-row { order: 1; }
  .calendar-day-card { display: flex !important; flex-direction: column; }
  /* Leyenda de especialidades: una sola fila deslizable */
  .calendar-legend, .calendar-toolbar-legend, .legend-especialidades {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }

  /* ---- Pacientes: cada fila es una tarjeta ---- */
  .table-container { border: none !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody { display: block; width: 100%; }
  .data-table tr.pac-fila {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
    background: #fff; border: 1px solid #E2E8F0; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  }
  .data-table tr.pac-fila td { display: block; padding: 0 !important; border: none !important; white-space: normal !important; font-size: 0.88rem !important; }
  .data-table tr.pac-fila td[data-label]::before {
    content: attr(data-label); display: block;
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #94A3B8;
  }
  .data-table tr.pac-fila .pac-td-nombre { grid-column: 1 / -1; }
  .data-table tr.pac-fila .pac-nombre { font-size: 1rem; }
  .data-table tr.pac-fila .pac-td-acciones { grid-column: 1 / -1; padding-top: 8px !important; border-top: 1px solid #F1F5F9 !important; margin-top: 2px; }
  .pac-acciones { gap: 8px !important; }
  .pac-acciones .btn { flex: 1; justify-content: center; min-height: 40px; }

  /* ---- Historias clínicas ---- */
  .historias-layout { gap: 0.9rem !important; }
  .timeline-filters {
    flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; margin: 0 -4px 12px !important; padding: 0 4px 4px;
  }
  .timeline-filters::-webkit-scrollbar { display: none; }
  .timeline-filters .filter-btn { flex: 0 0 auto; white-space: nowrap; }
  .timeline-card { padding: 12px !important; }
  .timeline-card-header { flex-direction: column; align-items: flex-start !important; gap: 8px; }
  .timeline-card-header > div { flex-wrap: wrap; width: 100%; }
  .timeline-card-header .btn { flex: 1 1 auto; justify-content: center; min-height: 38px; }
  .timeline-card-header .timeline-doctor { flex: 1 1 100%; }
  .timeline-body h4 { font-size: 0.98rem; }
  .adj-galeria-item, .adj-galeria-item img, .adj-galeria-icono { width: 96px !important; }
  .adj-galeria-item img, .adj-galeria-icono { height: 74px !important; }

  /* ---- Modales: pantalla completa, con cabecera y botones siempre visibles ---- */
  .modal-backdrop { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
  .modal-box, .modal-box.large {
    width: 100% !important; max-width: 100% !important;
    height: 100vh !important; height: 100dvh !important; max-height: none !important;
    margin: 0 !important; border-radius: 0 !important;
    display: flex !important; flex-direction: column; overflow: hidden !important;
  }
  .modal-box > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .modal-header {
    flex: 0 0 auto; padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px !important; gap: 10px;
  }
  .modal-header h3 { font-size: 1.02rem !important; }
  .modal-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    max-height: none !important; padding: 14px !important;
  }
  .modal-footer {
    flex: 0 0 auto; display: flex !important; gap: 8px !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid #E2E8F0; background: #fff;
  }
  .modal-footer .btn { flex: 1 1 0; justify-content: center; min-height: 46px; }
  .modal-close { width: 40px; height: 40px; }

  /* Formularios en 1–2 columnas */
  .form-row, .foja-grid-2, .adj-fila, .pl-fila-2 { grid-template-columns: 1fr !important; }
  .form-row { display: grid !important; gap: 0 !important; }
  .foja-grid-4, .pl-fila-3, .pl-fila-4 { grid-template-columns: 1fr 1fr !important; }
  #planillaCuerpo .pl-fila:has(> .form-group:nth-child(5)) { grid-template-columns: 1fr 1fr !important; }
  .pl-fila-1 { grid-template-columns: 1fr !important; }
  .pl-checks { grid-template-columns: 1fr !important; }
  .pl-checks label, .foja-radios label { min-height: 36px; }
  .form-section-title { font-size: 0.9rem !important; }
  .foja-tabs { padding: 0 8px !important; overflow-x: auto; }
  .foja-tab { flex: 1 0 auto; justify-content: center; padding: 11px 8px !important; }
  .pl-accion-barra { justify-content: stretch; }
  .pl-accion-barra .btn { width: 100%; justify-content: center; min-height: 40px; }
  .adjuntos-actions { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 6px !important; }
  .btn-adjunto { justify-content: center; padding: 9px 4px !important; font-size: 0.78rem !important; }
  .patient-dropdown-list { max-height: 45vh; }

  /* Visor de documentos: hojas tipo papel más compactas */
  .foja-visor { padding: 6px !important; border-radius: 8px; }
  .foja-visor .foja-page { padding: 14px 12px !important; font-size: 9pt; }
  .foja-visor .foja-fila { flex-wrap: wrap; row-gap: 3px; }
  .foja-visor .foja-cuerpo { flex-direction: column; }
  .foja-visor .foja-informe { border-right: none !important; min-height: 0 !important; padding-right: 0 !important; }
  .foja-visor .foja-orden { display: none; }
  .foja-visor .foja-membrete-nombre { font-size: 13pt; }
  .foja-visor .foja-membrete-dir { display: none; }
  .foja-visor .pl-imp-checks { grid-template-columns: 1fr 1fr; }
  .foja-visor .foja-grafico, .foja-visor .pl-imp-tabla { display: block; overflow-x: auto; }
  .foja-visor .foja-svg { min-width: 560px; }
  .lab-viewer-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---- Drawer de turnos del día ---- */
  .drawer-content { width: 100% !important; max-width: 100% !important; }
  .turno-card { padding: 12px !important; }
  .turno-spec { max-width: 38%; }
  .turno-card-actions { flex-wrap: wrap; }
  .turno-accion { flex: 1 1 calc(50% - 4px); min-height: 40px; }
  .turno-menu { right: -6px; }

  /* ---- Internación ---- */
  .internacion-dashboard { padding: 0 !important; gap: 0.9rem !important; height: auto !important; }
  .internacion-toolbar { padding: 12px !important; flex-direction: column; align-items: stretch !important; }
  .internacion-toolbar-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  .internacion-search { grid-column: 1 / -1; width: 100% !important; min-width: 0 !important; }
  .internacion-filter-select { grid-column: 1 / -1; width: 100% !important; }
  .internacion-toolbar-actions .btn { justify-content: center; min-height: 42px; }
  .internacion-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; overflow: visible !important; }
  .internacion-col { gap: 0.75rem !important; }
  .sector-header { padding: 14px !important; min-height: 52px; }
  .bed-item { padding: 10px 12px !important; }
  .bed-action { width: 40px !important; height: 40px !important; }
  .internacion-observaciones { padding: 12px !important; }
  .internacion-obs-head { flex-direction: column; gap: 2px; }
  .internacion-aviso { flex-wrap: wrap; }

  /* ---- Varios ---- */
  .toast { left: 0.75rem !important; right: 0.75rem !important; bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; }
  .lock-card-modern, .login-card { width: calc(100% - 1.5rem) !important; max-width: 420px; }
}

/* Pantallas muy angostas (≤ 360 px) */
@media (max-width: 360px) {
  .foja-grid-4, .pl-fila-3, .pl-fila-4 { grid-template-columns: 1fr !important; }
  .calendar-day-card { min-height: 50px !important; }
  .adjuntos-actions { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  /* Las columnas nunca más anchas que la pantalla */
  .historias-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .historias-layout > *, .tab-pane, .main-content > * { min-width: 0; max-width: 100%; }
  .historias-content-card, .historias-sidebar-card { padding: 14px !important; }
  .historias-content-card > div:first-child { flex-wrap: wrap; gap: 8px; }
  /* Leyenda del calendario en una fila deslizable */
  .calendar-legend-bar { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .calendar-legend-bar::-webkit-scrollbar { display: none; }
  .calendar-legend-bar > * { flex: 0 0 auto; white-space: nowrap; }
  .calendar-day-card.empty-cell, .calendar-day-card.prev-month { visibility: hidden; }
}
@media (max-width: 700px) {
  /* Chip de estado del turno: tamaño normal (no es un campo de formulario) */
  .turno-estado select { font-size: 0.8rem !important; }
  .turno-spec { max-width: 42%; }

  /* Cabecera: el botón Actualizar va al lado del título; la acción principal debajo, a lo ancho */
  .header-actions { display: contents !important; }
  .header-left-wrap { flex: 1 1 0 !important; order: 0; }
  .header-actions > .btn-secondary { order: 1; flex: 0 0 44px !important; width: 44px !important; height: 44px; padding: 0 !important; }
  .header-actions > .btn-primary, .header-actions > .dropdown-wrapper { order: 2; flex: 1 1 100% !important; }
  .header-actions > .dropdown-wrapper > .btn { width: 100%; }

  /* Formularios: aire entre campos */
  .pl-fila .form-group, .foja-grid-2 .form-group, .foja-grid-4 .form-group { margin-bottom: 10px; }
  .modal-footer .btn-primary { flex: 2 1 0 !important; }
  .modal-footer .btn { font-size: 0.92rem !important; line-height: 1.2; }
}
@media (max-width: 700px) {
  /* Tablas editables (signos vitales, medicación): una tarjeta por fila */
  .foja-obs-wrap { border: none !important; overflow: visible !important; }
  .foja-obs-tabla { min-width: 0 !important; display: block; }
  .foja-obs-tabla thead { display: none; }
  .foja-obs-tabla tbody { display: flex; flex-direction: column; gap: 8px; }
  .foja-obs-tabla tr {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px;
    background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px 10px; position: relative;
  }
  .foja-obs-tabla td { display: block; padding: 0 !important; border: none !important; }
  .foja-obs-tabla td[data-label]::before {
    content: attr(data-label); display: block; font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.03em; color: #94A3B8; margin-bottom: 1px;
  }
  .foja-obs-tabla input, .foja-obs-tabla select { background: #fff !important; border: 1px solid #E2E8F0 !important; padding: 7px 8px !important; }
  .foja-obs-tabla .td-evento { grid-column: span 3; }
  .foja-obs-tabla .td-quitar { position: absolute; top: 4px; right: 4px; }
  /* Medicación: la droga y observaciones a lo ancho */
  .pl-tabla tr { grid-template-columns: 1fr 1fr; padding-top: 10px; }
  .pl-tabla td[data-label="Droga"], .pl-tabla td[data-label="Observaciones"] { grid-column: 1 / -1; padding-right: 30px !important; }
  .pl-tabla td[data-label="Observaciones"] { padding-right: 0 !important; }

  /* Visor: datos cortos sin partirse */
  .foja-visor .foja-campo { flex: 1 1 auto !important; }
  .foja-visor .foja-campo.flex3 { flex-basis: 100% !important; }
  .foja-visor .foja-val { white-space: nowrap; }
  .foja-visor .foja-campo.flex3 .foja-val, .foja-visor .foja-multilinea .foja-val { white-space: normal; }
  .foja-visor .foja-lbl { font-size: 7pt; }
  .modal-hc-viewer-box .modal-header .btn { padding: 6px 10px !important; font-size: 0.8rem !important; }
}
@media (max-width: 700px) {
  .foja-tabs { flex: 0 0 auto; }
  /* Laboratorio: la hoja a tamaño real, se desliza de costado (como una planilla de cálculo) */
  .modal-lab-box .modal-body { overflow-x: auto !important; padding: 8px !important; }
  .modal-lab-box #printLabArea.lab-print-container { min-width: 760px; margin: 0 !important; padding: 12px !important; }
  .modal-lab-box .modal-body::before {
    content: '← Deslizá de costado para ver toda la planilla →';
    display: block; position: sticky; left: 0; width: calc(100vw - 16px);
    text-align: center; font-size: 0.75rem; color: #64748B; margin-bottom: 6px;
  }
  .lab-viewer-wrap .lab-print-container { min-width: 760px; }
}

/* ==========================================================================
   INDICACIONES: carga rápida de medicamentos (escribir + Enter)
   ========================================================================== */
.pl-rapida {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 2px solid var(--primary, #2563EB); border-radius: 10px;
  padding: 4px 4px 4px 12px; margin-bottom: 10px;
}
.pl-rapida > svg { width: 18px; height: 18px; color: var(--primary, #2563EB); flex-shrink: 0; }
.pl-rapida-input { flex: 1; min-width: 0; border: none !important; outline: none; background: transparent; padding: 9px 4px !important; font: inherit; font-size: 0.95rem; box-shadow: none !important; }
.pl-rapida .btn { flex-shrink: 0; }
.pl-tabla-vacia { color: #94A3B8; font-size: 0.85rem; text-align: center; padding: 14px 8px; border: 1px dashed #CBD5E1; border-radius: 10px; margin: 0 0 8px; }
.pl-tabla-vacia.hidden, .foja-obs-wrap.hidden { display: none; }
.pl-tabla .td-num { font-weight: 800; color: var(--primary, #2563EB); text-align: center; font-size: 0.9rem; }
.pl-tabla tr.fila-nueva { animation: filaNueva 1.2s ease; }
@keyframes filaNueva { from { background: #DBEAFE; } to { background: transparent; } }

@media (max-width: 700px) {
  .pl-rapida { padding-left: 10px; }
  .pl-rapida-input::placeholder { font-size: 0.85rem; }
  .pl-tabla-numerada tr { padding-left: 36px !important; }
  .pl-tabla .td-num {
    position: absolute; left: 8px; top: 10px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary, #2563EB); color: #fff; font-size: 0.75rem;
    display: flex !important; align-items: center; justify-content: center;
  }
  .pl-tabla tr.fila-nueva { animation: none; box-shadow: 0 0 0 2px #93C5FD; }
}
/* La tabla de medicación entra completa en el recuadro (el ✕ siempre visible) */
@media (min-width: 701px) {
  .pl-tabla { min-width: 0 !important; width: 100%; table-layout: fixed; }
  .pl-tabla th:last-child, .pl-tabla td.td-quitar { width: 36px; }
  .pl-tabla input, .pl-tabla select { min-width: 0; }
}

/* ==========================================================================
   🎨 TEMA "SEÑALÉTICA" — CLÍNICA DEMO
   Un solo azul de marca (el del logo), fondo papel frío, placas azul tinta
   como los carteles de un hospital y una paleta de categorías apagada y pareja.
   Tipografía: Barlow (texto) + Barlow Semi Condensed (títulos y placas).
   ========================================================================== */
:root {
  /* Marca */
  --primary: #2A35B5;          /* azul del logo: acciones, foco, selección */
  --primary-dark: #1D2690;
  --primary-light: #ECEEFA;
  --navy: #101838;             /* tinta: barra lateral, placas, títulos */
  /* Superficies */
  --bg-app: #F2F4F8;           /* papel frío */
  --bg-card: #FFFFFF;
  --border: #DCE0EA;
  --border-strong: #C6CCDA;
  /* Texto */
  --text-dark: #141B33;
  --text-main: #2E3650;
  --text-muted: #5E6781;
  --text-light: #8A92A8;
  /* Estados (apagados, misma intensidad) */
  --green: #2F7D52;  --green-light: #E6F2EB;
  --yellow: #A86F12; --yellow-light: #F8EFDD;
  --red: #B23A34;    --red-light: #F8E6E4;
  --purple: #6B4FBB; --purple-light: #EFEBF8;
  --blue: #1F7EAA;   --blue-light: #E4F0F6;
  /* Tipos de documento (mismo peso visual) */
  --doc-consultorio: #2A35B5;
  --doc-hc: #4F6B8F;
  --doc-lab: #B07A1E;
  --doc-indicaciones: #3E8A45;
  --doc-enfermeria: #1F7EAA;
  --doc-foja: #A8385F;
  --doc-epicrisis: #12837F;
  --doc-adjunto: #6B4FBB;
  /* Forma */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 0 rgba(16, 24, 56, 0.04);
  --shadow-md: 0 1px 2px rgba(16, 24, 56, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 24, 56, 0.16);
  --shadow-xl: 0 24px 60px rgba(16, 24, 56, 0.24);
  --focus: 0 0 0 3px rgba(42, 53, 181, 0.22);
  --font-heading: 'Barlow Semi Condensed', 'Barlow', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Base tipográfica ---------- */
body {
  font-family: var(--font-body);
  font-size: 15.5px;
  color: var(--text-main);
  background: var(--bg-app);
  font-feature-settings: "tnum" 1, "lnum" 1;   /* números tabulares: DNI, TA, dosis alineados */
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-dark); letter-spacing: 0; }
::selection { background: #D6DAF6; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Barra lateral: la "placa" activa ---------- */
.sidebar { background: var(--navy); border-right: none; }
.sidebar-header { border-bottom-color: rgba(255,255,255,0.07); }
.sidebar-brand-text h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.01em; }
.sidebar-brand-text span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; color: #9AA3C7; }
.nav-item {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em;
  color: #B9C0DC; border-radius: var(--radius-sm); padding: 0.75rem 0.9rem;
}
.nav-item i, .nav-item svg { color: #7F89B3; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: #fff; color: var(--navy); box-shadow: none; }
.nav-item.active i, .nav-item.active svg { color: var(--primary); }
.sidebar-footer { border-top-color: rgba(255,255,255,0.07); }
.api-status-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.06); }

/* ---------- Cabecera de página: título como cartel ---------- */
.header-title-wrap h1 {
  font-family: var(--font-heading); font-weight: 600; font-size: 2.1rem; line-height: 1.05;
  color: var(--navy); letter-spacing: -0.005em;
}
.header-title-wrap p { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }

/* ---------- Botones ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0;
  border-radius: var(--radius-sm); box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); transform: none; }
.btn-secondary, .btn-outline { background: #fff; color: var(--text-dark); border: 1px solid var(--border-strong); }
.btn-secondary:hover, .btn-outline:hover { background: #F6F7FB; border-color: #AEB6CA; color: var(--navy); transform: none; }
.btn:active { transform: translateY(1px); }

/* ---------- Campos ---------- */
input, select, textarea, .shadcn-input {
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background-color: #fff; color: var(--text-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input::placeholder, textarea::placeholder { color: #9AA1B5; }
input:focus, select:focus, textarea:focus, .shadcn-input:focus { border-color: var(--primary); box-shadow: var(--focus); outline: none; }
.form-group label, label { color: var(--text-dark); font-weight: 600; }
.form-section-title {
  font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; letter-spacing: 0.01em;
  color: var(--navy) !important; background: transparent !important; border: none !important;
  border-bottom: 1px solid var(--border) !important; border-radius: 0 !important;
  padding: 0 0 6px 0 !important; margin-top: 18px;
}
.form-section-title svg, .form-section-title i { color: var(--primary); }

/* ---------- Contenedores: bordes finos, sin sombras de "tarjeta genérica" ---------- */
.calendar-section-wrap, .table-container, .historias-sidebar-card, .historias-content-card,
.internacion-toolbar, .internacion-observaciones, .sector-card, .kpi-card {
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.historias-content-card h3, .historias-sidebar-card h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; }

/* ---------- Tablas ---------- */
.data-table th {
  text-transform: none; letter-spacing: 0; font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted); background: #F7F8FB; border-bottom: 1px solid var(--border);
}
.data-table td { border-bottom-color: #EDF0F5; }
.data-table tbody tr:hover { background: #FAFBFD; }

/* ---------- Filtros (pastillas): activo = placa tinta ---------- */
.filter-btn, .drawer-filter-btn {
  font-family: var(--font-body); font-weight: 600; font-size: 0.86rem; letter-spacing: 0;
  background: #fff; color: var(--text-main); border: 1px solid var(--border); border-radius: 999px; box-shadow: none;
}
.filter-btn:hover, .drawer-filter-btn:hover { border-color: var(--border-strong); color: var(--navy); }
.filter-btn.active, .drawer-filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.filter-btn.active svg, .drawer-filter-btn.active svg { color: #fff; }

/* ---------- Historial: una sola familia de insignias; el tipo lo dice el color ---------- */
.timeline-card { --doc: var(--doc-hc); border: 1px solid var(--border) !important; border-left: 4px solid var(--doc) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; }
.timeline-card-consultorio  { --doc: var(--doc-consultorio); }
.timeline-card-hc           { --doc: var(--doc-hc); }
.timeline-card-lab          { --doc: var(--doc-lab); }
.timeline-card-indicaciones { --doc: var(--doc-indicaciones); }
.timeline-card-enfermeria   { --doc: var(--doc-enfermeria); }
.timeline-card-foja         { --doc: var(--doc-foja); }
.timeline-card-epicrisis    { --doc: var(--doc-epicrisis); }
.timeline-card-adjunto      { --doc: var(--doc-adjunto); }
.badge-consultorio, .badge-hc-completa, .badge-lab, .badge-adjunto, .badge-foja,
.badge-epicrisis, .badge-enfermeria, .badge-indicaciones {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--doc, var(--primary)) 9%, #fff) !important;
  color: color-mix(in srgb, var(--doc, var(--primary)) 78%, #000) !important;
  border: none !important; text-transform: none !important; letter-spacing: 0 !important;
  font-family: var(--font-body); font-size: 0.8rem !important; font-weight: 600 !important;
  padding: 3px 10px !important; border-radius: 999px !important;
}
.badge-consultorio svg, .badge-hc-completa svg, .badge-lab svg, .badge-adjunto svg, .badge-foja svg,
.badge-epicrisis svg, .badge-enfermeria svg, .badge-indicaciones svg { width: 13px !important; height: 13px !important; color: var(--doc, var(--primary)); }
.timeline-body h4 { font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; color: var(--navy) !important; }
.timeline-date { font-weight: 600; color: var(--text-dark); }
.timeline-doctor { color: var(--text-muted); }

/* ---------- Calendario ---------- */
.calendar-legend-bar .legend-titulo { font-weight: 600; color: var(--text-muted); font-size: 0.85rem; }
.legend-chip {
  background: #fff !important; color: var(--text-main) !important; border: 1px solid var(--border) !important;
  font-weight: 600; border-radius: 999px;
}
.legend-chip .dot { background: var(--spec, var(--primary)) !important; }
.calendar-day-card { border: 1px solid var(--border); border-radius: 10px; box-shadow: none; background: #fff; }
.calendar-day-card:hover { border-color: var(--border-strong); background: #FAFBFD; transform: none; box-shadow: none; }
.calendar-day-card.inactive { background: transparent; border-style: dashed; }
.calendar-day-card.today { border: 2px solid var(--primary) !important; background: #fff; }
.calendar-day-card .card-day-num { font-family: var(--font-heading); font-weight: 600; font-size: 1.05rem; color: var(--text-dark); }
.tag-today-badge { background: var(--primary); border-radius: 4px; font-family: var(--font-heading); letter-spacing: 0.02em; }
.card-turnos-count { font-family: var(--font-heading); font-weight: 700; color: var(--navy); }
.badge-spec {
  background: color-mix(in srgb, var(--spec, #4F6B8F) 9%, #fff) !important;
  color: color-mix(in srgb, var(--spec, #4F6B8F) 80%, #000) !important;
  border: none !important; border-left: 3px solid var(--spec, #4F6B8F) !important; border-radius: 4px !important;
}
.calendar-weekdays-grid > * { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--font-heading); font-weight: 600; }

/* ---------- Turnos del día ---------- */
.turno-card { border-color: var(--border); border-radius: var(--radius); }
.turno-hora, .turno-nombre { font-family: var(--font-heading); }
.turno-hora { font-weight: 700; font-size: 1.15rem; color: var(--navy); }
.turno-nombre { font-weight: 600; font-size: 1.15rem; color: var(--navy); }
.turno-estado.estado-pendiente  { --c: #8A5A0E; --bg: var(--yellow-light); }
.turno-estado.estado-confirmado { --c: var(--primary-dark); --bg: var(--primary-light); }
.turno-estado.estado-realizado  { --c: #23613F; --bg: var(--green-light); }
.turno-estado.estado-cancelado  { --c: #5E6781; --bg: #EEF0F4; }
.turno-accion-llego { background: var(--green-light); border-color: #C9E3D3; color: #23613F; }

/* ---------- Internación: los pisos como carteles ---------- */
.sector-card { overflow: hidden; }
.sector-header {
  background: var(--navy) !important; color: #fff;
  box-shadow: inset 5px 0 0 var(--sector, var(--primary));
  font-family: var(--font-heading) !important; font-weight: 600; font-size: 1.12rem; letter-spacing: 0.01em;
}
.sector-header .bed-count { background: rgba(255,255,255,0.12); color: #DDE2F5; font-family: var(--font-body); font-weight: 600; }
.bed-item.occupied .bed-number { background: color-mix(in srgb, var(--sector, var(--primary)) 10%, #fff); color: var(--navy); font-weight: 700; }
.bed-item.free .bed-number { background: #F1F3F7; color: var(--text-light); }
.bed-number { font-family: var(--font-heading); border-radius: 6px; }
.bed-patient { color: var(--navy); font-weight: 600; }
.bed-action { color: var(--text-muted); border-radius: var(--radius-sm); }
.bed-action:hover { background: var(--primary-light); color: var(--primary); }
.internacion-toolbar h2 { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem !important; color: var(--navy) !important; }
.internacion-observaciones h3 { font-family: var(--font-heading); font-weight: 600; color: var(--navy); }

/* ---------- Modales y menús ---------- */
.modal-backdrop { background: rgba(16, 24, 56, 0.48); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal-box { border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-xl); }
.modal-header { background: #fff; border-bottom: 1px solid var(--border); }
.modal-header h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; color: var(--navy); }
.modal-footer { background: #F7F8FB; border-top: 1px solid var(--border); }
.dropdown-menu-docs { border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); }
.dropdown-menu-docs a { font-weight: 600; color: var(--text-dark); border-radius: 8px; }
.dropdown-menu-docs a:hover { background: var(--primary-light); color: var(--navy); }
.dropdown-menu-docs a svg { color: var(--primary); }
.turno-menu, .patient-dropdown-list { border-color: var(--border); box-shadow: var(--shadow-lg); }

/* Pestañas de la Foja y carga rápida */
.foja-tab { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; }
.foja-tab.is-active { color: var(--navy); border-bottom-color: var(--navy); }
.pl-rapida { border-color: var(--primary); }

/* ---------- Avisos ---------- */
.toast { background: var(--navy); color: #fff; border-radius: 10px; box-shadow: var(--shadow-lg); font-weight: 500; }
.empty-state-box h4 { font-family: var(--font-heading); font-weight: 600; color: var(--navy); }

/* ---------- Pantalla de acceso: mismo idioma que el panel ---------- */
.lock-screen-backdrop {
  background-image: linear-gradient(rgba(16, 24, 56, 0.86), rgba(16, 24, 56, 0.94)), url('assets/fondo.svg') !important;
}
.lock-form-centered { background: #fff; border: none; border-radius: 16px; box-shadow: var(--shadow-xl); }
.lock-header-modern h2 { color: var(--navy); font-family: var(--font-heading); font-weight: 600; font-size: 2.2rem; letter-spacing: 0; }
.lock-header-modern p { color: var(--text-muted); }
.lock-brand { color: var(--text-muted); }
.lock-logo { box-shadow: inset 0 0 0 1px var(--border); }
.split-input-style { background: #fff; border: 1px solid var(--border-strong); }
.split-input-style:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.split-input-style input, .split-input-style select { color: var(--text-dark) !important; background: transparent !important; border: none !important; box-shadow: none !important; }
.split-input-style select option { color: var(--text-dark); background: #fff; }
.modern-static-label { color: var(--text-light); }
.lock-form-centered button[type="submit"], #btnLoginSubmit { background: var(--primary) !important; color: #fff !important; border: none !important; font-weight: 600; }
.lock-form-centered button[type="submit"]:hover, #btnLoginSubmit:hover { background: var(--primary-dark) !important; }

/* ---------- Movimiento: respetar a quien lo reduce ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* Detalles del tema */
#historiaTotalCount { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600; color: var(--text-muted); font-size: 0.85rem; background: #F1F3F7; padding: 2px 10px; border-radius: 999px; }
.timeline-date { white-space: nowrap; }
.timeline-card-header .timeline-date svg { width: 16px; height: 16px; color: var(--text-muted); }
.timeline-doctor strong { font-weight: 600; color: var(--text-muted); }
.patient-selected-box { background: var(--primary-light) !important; border: 1px solid #D3D8F4 !important; }
#historiaNombrePaciente { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; color: var(--navy) !important; }
/* Los bloques de un formulario nunca se aplastan: el que se desplaza es el cuerpo del modal.
   (Arregla la tabla de medicamentos / signos vitales que quedaba "invisible", con 2 px de alto) */
.modal-body > *, .foja-panel > *, #planillaCuerpo > * { flex-shrink: 0; }
.foja-obs-wrap { flex-shrink: 0; min-height: min-content; }
/* Modales en computadora: cabecera y botones siempre visibles; solo se desplaza el contenido */
@media (min-width: 701px) {
  .modal-box { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
  .modal-box > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
  .modal-header, .modal-footer, .foja-tabs { flex: 0 0 auto; }
  .modal-box > .modal-body, .modal-box > form > .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
}
.foja-obs-tabla th { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.8rem !important; font-weight: 600; color: var(--text-muted); }
/* H.C.: fila H.C. N° / Edad / Sexo */
.hc-fila-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px) { .hc-fila-3 { grid-template-columns: 1fr 1fr !important; } .hc-fila-3 .form-group:first-child { grid-column: 1 / -1; } }
/* Planillas selladas (Evolución de Enfermería) */
.pl-aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--primary-light); color: var(--navy); border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; margin-bottom: 12px; }
.pl-aviso svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); margin-top: 1px; }
.pl-sello { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px dashed var(--border-strong); border-radius: 8px; color: var(--text-muted); font-size: 0.9rem; background: #F7F8FB; }
.pl-sello svg { width: 15px; height: 15px; }
.pl-card-sello { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); margin: 8px 0 0; }
.pl-card-sello svg { width: 13px; height: 13px; }

/* ==========================================================================
   CUENTAS INDIVIDUALES: usuario logueado, Mi cuenta, Guardia y Administración
   ========================================================================== */
#btnGroupCargarDocumento[data-sin-documentos="1"] { display: none !important; }

/* Recuadro del usuario (barra lateral) */
.user-profile-btn { width: 100%; border: none; background: rgba(255,255,255,0.05); border-radius: 10px; padding: 10px; cursor: pointer; text-align: left; font: inherit; color: inherit; display: flex; align-items: center; gap: 10px; }
.user-profile-btn:hover { background: rgba(255,255,255,0.1); }
.user-profile-btn .user-info { min-width: 0; }
.user-profile-btn .user-info strong { display: block; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-profile-btn .user-info span { color: #9AA3C7; font-size: 0.8rem; }
.user-id-chip { display: inline-block; background: #fff; color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 0.75rem; padding: 1px 6px; border-radius: 4px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.user-id-chip.grande { font-size: 0.9rem; padding: 2px 8px; background: var(--primary-light); }

/* Autoría */
.autor-linea { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-muted); margin: 0 0 8px; }
.autor-linea svg { width: 14px; height: 14px; }
.autor-linea strong { color: var(--text-dark); font-weight: 600; }
.autor-id { display: inline-block; background: #EEF0F6; color: var(--navy); font-weight: 700; font-size: 0.72rem; padding: 0 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.adj-con-autor { display: inline-flex; flex-direction: column; gap: 3px; max-width: 170px; }
.adj-autor { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--text-muted); line-height: 1.25; white-space: normal; }
.adj-autor svg { width: 11px; height: 11px; flex-shrink: 0; }
.adj-galeria-item .adj-autor { font-size: 0.68rem; }

/* Mi cuenta */
.cuenta-cabecera { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.cuenta-id { background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; padding: 10px 14px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.cuenta-nombre { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; color: var(--navy); }
.cuenta-meta { color: var(--text-muted); font-size: 0.88rem; }
.cuenta-permisos { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 6px; }
.cuenta-permisos li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; }
.cuenta-permisos svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; margin-top: 2px; }
.cuenta-ayuda { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 8px; }
.cuenta-error { color: var(--red); background: var(--red-light); border-radius: 8px; padding: 8px 10px; font-size: 0.85rem; margin: 0 0 10px; }
.cuenta-error.hidden { display: none; }
.cuenta-aviso { display: flex; gap: 8px; align-items: flex-start; font-size: 0.85rem; color: var(--text-muted); }
.cuenta-aviso svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.hc-fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 700px) { .hc-fila-2 { grid-template-columns: 1fr !important; } }

/* Contraseña temporal */
.temp-datos { display: grid; gap: 10px; background: #F7F8FB; border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin: 12px 0; }
.temp-datos div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.temp-datos span { color: var(--text-muted); font-size: 0.85rem; }
.temp-clave { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.08em; color: var(--navy); background: #fff; border: 1px dashed var(--border-strong); padding: 4px 10px; border-radius: 6px; user-select: all; }

/* Modal usuario */
#usrServicioWrap.hidden { display: none; }
.usr-permisos-preview { background: var(--primary-light); border-radius: 10px; padding: 10px 14px; font-size: 0.85rem; color: var(--navy); margin-bottom: 10px; }
.usr-permisos-preview ul { margin: 6px 0 0; padding-left: 18px; }
.usr-permisos-preview li { margin-bottom: 2px; }
.usr-activo { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 4px 0 8px; cursor: pointer; }
.usr-activo.hidden { display: none; }
.usr-estado { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.usr-estado.activo { background: var(--green-light); color: #23613F; }
.usr-estado.inactivo { background: #EEF0F4; color: var(--text-muted); }
.usr-estado.bloqueado { background: var(--red-light); color: var(--red); }
.usr-estado.pendiente { background: var(--yellow-light); color: #8A5A0E; }

/* Administración */
.admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.admin-tabs .filter-btn svg { width: 15px; height: 15px; }
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.admin-card.hidden { display: none; }
.admin-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.admin-card-head h3 { font-family: var(--font-heading); font-weight: 600; font-size: 1.35rem; color: var(--navy); margin: 0; }
.admin-card-head p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.88rem; }
.admin-filtros { display: flex; gap: 8px; }
.admin-filtros select { min-width: 220px; }
.admin-tabla .pac-acciones { flex-wrap: wrap; }
.audit-lista { display: flex; flex-direction: column; }
.audit-item { display: flex; gap: 14px; padding: 10px 4px; border-bottom: 1px solid #EDF0F5; }
.audit-item.alerta { background: #FFF8F7; }
.audit-fecha { width: 84px; flex-shrink: 0; font-size: 0.8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.audit-fecha strong { color: var(--text-dark); font-size: 0.95rem; }
.audit-datos { display: flex; flex-direction: column; gap: 2px; font-size: 0.9rem; }
.audit-datos span { color: var(--text-muted); }

/* Guardia */
.guardia-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .guardia-grid { grid-template-columns: 1fr; } }
/* Sin esto, cada tarjeta de la grilla mide al menos lo que su contenido más largo y en el celular se sale 28 px de la pantalla */
.guardia-grid > * { min-width: 0; }
.guardia-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.guardia-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.guardia-card-head h3 { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 600; font-size: 1.3rem; color: var(--navy); margin: 0; }
.guardia-card-head h3 svg { width: 20px; height: 20px; color: var(--primary); }
.guardia-card-head p { margin: 2px 0 0; color: var(--text-muted); font-size: 0.85rem; }
.guardia-lista { display: flex; flex-direction: column; gap: 8px; }
.guardia-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--sector, var(--border-strong)); border-radius: 10px; }
.guardia-item.llego { border-left-color: var(--green); background: #FBFEFC; }
.guardia-hora { width: 76px; flex-shrink: 0; }
.guardia-estado { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.guardia-estado.llego { color: #23613F; }
.guardia-estado svg { width: 15px; height: 15px; }
.guardia-cama { display: inline-block; background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.guardia-datos { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.guardia-datos strong { font-family: var(--font-heading); font-weight: 600; font-size: 1.08rem; color: var(--navy); }
.guardia-datos span { font-size: 0.82rem; color: var(--text-muted); }
.guardia-datos .guardia-nota { color: var(--text-main); font-style: italic; }
.guardia-tag { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); background: #F1F3F7; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.guardia-item.llego .guardia-tag { background: var(--green-light); color: #23613F; }
.guardia-vacio { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-light); padding: 24px; font-size: 0.9rem; }
.guardia-vacio svg { width: 18px; height: 18px; }

/* ==========================================================================
   RAYOS — placas del día
   ========================================================================== */
.rx-ok-txt { color: #23613F; font-weight: 600; }
.rx-falta-txt { color: #A4262C; font-weight: 600; }
.rx-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-left: 5px solid var(--sector, var(--border-strong)); border-radius: 12px; background: #fff; }
.rx-item.is-falta { background: #FFFBFA; }
.rx-item.is-sin { opacity: 0.75; }
.rx-cama { width: 88px; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.rx-cama span { background: var(--navy); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; padding: 2px 10px; border-radius: 6px; }
.rx-cama small { font-size: 0.72rem; color: var(--text-muted); line-height: 1.2; }
.rx-datos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rx-datos strong { font-family: var(--font-heading); font-weight: 600; font-size: 1.12rem; color: var(--navy); }
.rx-datos > span { font-size: 0.82rem; color: var(--text-muted); }
.rx-estado { display: inline-flex !important; align-items: center; gap: 5px; width: fit-content; font-size: 0.82rem !important; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-top: 2px; }
.rx-estado svg { width: 14px; height: 14px; }
.rx-estado.rx-ok { background: var(--green-light); color: #23613F !important; }
.rx-estado.rx-falta { background: var(--red-light); color: #A4262C !important; }
.rx-estado.rx-sinpadron { background: #F1F3F7; color: var(--text-muted) !important; }
.rx-detalle { font-size: 0.78rem !important; }
.rx-acciones { display: flex; gap: 8px; flex-shrink: 0; }
.rx-mini { display: inline-block; font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px; }
.rx-mini.ok { background: var(--green-light); color: #23613F; }
.rx-mini.falta { background: var(--red-light); color: #A4262C; }
#rayos-tab .timeline-filters { margin-bottom: 12px; }
@media (max-width: 700px) {
  .rx-item { flex-wrap: wrap; gap: 10px; }
  .rx-cama { width: auto; flex-direction: row; align-items: center; gap: 8px; }
  .rx-datos { flex-basis: 100%; }
  .rx-acciones { width: 100%; }
  .rx-acciones .btn { flex: 1; justify-content: center; min-height: 42px; }
}

/* ==========================================================================
   TURNOS — sala de espera por médico
   ========================================================================== */
.campo-ayuda { display: block; font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }
#turnoMedicoId:disabled { background: #F7F8FB; color: var(--text-dark); opacity: 1; }
.guardia-card.hidden { display: none; }
.guardia-grid:has(#guardiaInternadosCard.hidden) { grid-template-columns: 1fr; }
.sala-hora { color: var(--text-light); font-weight: 400; }
.guardia-item.sala-en-sala { border-left-color: var(--green); background: #FBFEFC; }
.guardia-item.sala-llamado { border-left-color: var(--primary); background: #F7F8FE; }
.guardia-item.sala-esperado { border-left-color: var(--border-strong); }
.guardia-item.sala-atendido { opacity: 0.6; border-left-color: #CBD2DE; }
.sala-en-sala .guardia-estado { color: #23613F; }
.sala-llamado .guardia-estado { color: var(--primary); }
.guardia-estado svg { width: 15px; height: 15px; }
.sala-en-sala .guardia-tag { background: var(--green-light); color: #23613F; }
.sala-llamado .guardia-tag { background: var(--primary-light); color: var(--primary); }
.sala-medico { color: var(--text-main) !important; font-weight: 500; }
.sala-aviso { display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; background: var(--primary); color: #fff !important; font-weight: 700; font-size: 0.82rem !important; padding: 4px 10px; border-radius: 999px; animation: salaPulso 1.6s ease-in-out infinite; }
.sala-aviso svg { width: 14px; height: 14px; }
@keyframes salaPulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(42, 53, 181, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(42, 53, 181, 0); } }
.sala-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.sala-acciones { display: flex; gap: 6px; }
.btn-ojo { width: 36px; padding: 0 !important; justify-content: center; }
.turno-accion-llamado { background: var(--primary-light); border-color: #D3D8F4; color: var(--primary); cursor: default; }
@media (max-width: 700px) {
  .guardia-item { flex-wrap: wrap; }
  .sala-lado { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
  .sala-acciones .btn { min-height: 40px; }
}

/* Administración — pantalla de la sala */
#usrConsultorioWrap.hidden { display: none; }
.pantalla-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; background: #F7F8FB; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; user-select: all; color: var(--navy); }
.pantalla-botones { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.pantalla-pasos { background: var(--primary-light); border-radius: 10px; padding: 12px 16px; color: var(--navy); font-size: 0.9rem; }
.pantalla-pasos.hidden { display: none; }
.pantalla-pasos ol { margin: 6px 0 4px; padding-left: 20px; }
.pantalla-pasos li { margin-bottom: 4px; }
.pantalla-pasos code { background: #fff; padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }

/* ---------- Consultorio del día (sala de espera del médico) ---------- */
.consultorio-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; padding: 12px 14px; background: #F3F5FF; border: 1px solid #D5DAF5; border-radius: 12px; }
.consultorio-bar.hidden { display: none; }
.consultorio-bar-titulo { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--navy); }
.consultorio-bar-titulo svg { width: 20px; height: 20px; color: var(--primary); }
.consultorio-bar-titulo label { font-size: 0.95rem; }
.consultorio-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.consultorio-chip { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid #C9D0F0; background: #fff; color: var(--navy); font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: background .15s, border-color .15s; }
.consultorio-chip:hover { border-color: var(--primary); }
.consultorio-chip.activo { background: var(--primary); border-color: var(--primary); color: #fff; }
.consultorio-chip:focus-visible { outline: 3px solid rgba(42,53,181,.35); outline-offset: 2px; }
.consultorio-bar-campo { display: flex; gap: 8px; flex: 1 1 240px; min-width: 0; }
.consultorio-bar-campo input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #C9D0F0; border-radius: 10px; font: inherit; background: #fff; }
.consultorio-bar-campo input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(42,53,181,.15); }
.consultorio-estado { flex-basis: 100%; margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.consultorio-estado.ok { color: #1F7A4D; font-weight: 600; }
.consultorio-estado.aviso { color: #9A6412; font-weight: 600; }
.consultorio-estado.error { color: #B42318; font-weight: 600; }
@media (max-width: 700px) { .consultorio-bar-campo { flex-basis: 100%; } }

/* Acciones del turno: con "WhatsApp familiar" pueden ser 4 → pasan a una segunda línea */
.turno-card-actions { flex-wrap: wrap; }
.turno-card-actions .turno-accion { flex: 1 1 auto; white-space: nowrap; }

/* ==========================================================================
   APP DEL PACIENTE — modal de recepción y marca de turnos pedidos por la app
   ========================================================================== */
.modal-sub { margin: 2px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.app-pac-estado { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 16px;
  background: var(--bg-app); border: 1px solid var(--border); color: var(--text-main); font-size: 0.92rem; line-height: 1.45; }
.app-pac-estado svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.app-pac-estado.is-ok { background: var(--green-light); border-color: #A7F3D0; color: #065F46; }
.app-pac-estado.is-pendiente { background: var(--yellow-light); border-color: #FDE68A; color: #92400E; }
.app-pac-estado.is-error { background: var(--red-light); border-color: #FECACA; color: #991B1B; }
.app-pac-codigo { margin-top: 12px; padding: 14px; border-radius: 10px; background: var(--primary-light); border: 1px solid #C7D2FE; font-size: 0.9rem; color: var(--text-main); }
.app-pac-codigo p { margin: 0 0 8px; }
.app-pac-codigo p:last-child { margin: 8px 0 0; }
.app-pac-codigo-num { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.35em; text-align: center;
  background: #fff; border-radius: 8px; padding: 10px 0; color: var(--text-dark); }
.app-pac-quitar { margin-right: auto; color: var(--red); border-color: #FECACA; }
.turno-app-pill { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 2px; padding: 2px 8px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary); font-size: 0.72rem; font-weight: 600; white-space: nowrap; width: fit-content; }
.turno-app-pill svg { width: 12px; height: 12px; }

/* ==========================================================================
   HORARIOS LIBRES · AGENDA DE LOS MÉDICOS · REPROGRAMAR · NOTIFICACIONES
   ========================================================================== */

/* ---------- Chips de horarios ---------- */
.horarios-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-app);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 230px;
  overflow-y: auto;
}
.horarios-fila { display: flex; gap: 10px; align-items: flex-start; }
.horarios-franja {
  flex: 0 0 58px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); padding-top: 7px;
}
.horarios-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hora-chip {
  min-width: 58px; height: 32px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: #fff; color: var(--text-dark);
  font: inherit; font-size: 0.86rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.hora-chip:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.hora-chip:focus-visible { outline: none; box-shadow: var(--focus); }
.hora-chip.elegido { background: var(--primary); border-color: var(--primary); color: #fff; }
.hora-chip.ocupado {
  background: transparent; border-style: dashed; border-color: var(--border);
  color: var(--text-light); text-decoration: line-through; cursor: not-allowed;
}
.hora-chip.es-actual:not(.elegido) { box-shadow: inset 0 -3px 0 var(--yellow); }
.horarios-msg { margin: 0; font-size: 0.86rem; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.horarios-msg svg { width: 16px; height: 16px; flex: none; }
.horarios-msg.is-aviso { color: var(--yellow); font-weight: 600; }
.horarios-msg.is-error { color: var(--red); }
.horarios-nota { margin: 0; font-size: 0.76rem; color: var(--text-muted); }

.horario-manual { margin-top: 8px; font-size: 0.84rem; color: var(--text-muted); }
.horario-manual summary { cursor: pointer; font-weight: 600; width: fit-content; }
.horario-manual input { margin-top: 6px; max-width: 160px; }

/* ---------- Reprogramar ---------- */
.reprog-resumen {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--radius-sm); background: var(--primary-light);
  color: var(--text-main); font-size: 0.88rem;
}
.reprog-resumen strong { font-family: var(--font-heading); font-size: 1.05rem; color: var(--text-dark); }
.reprog-actual { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--primary-dark); }
.reprog-actual svg { width: 14px; height: 14px; }
.reprog-notas { font-size: 0.8rem; color: var(--text-muted); }
.check-linea { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.88rem; font-weight: 500; cursor: pointer; }
.check-linea input { width: 16px; height: 16px; accent-color: var(--primary); }

/* ---------- Agenda del médico ---------- */
.agenda-card { margin-bottom: 18px; }
.agenda-medico-sel { display: flex; flex-direction: column; gap: 4px; min-width: 240px; }
.agenda-medico-sel label { font-size: 0.76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.agenda-semana { display: flex; flex-direction: column; }
.agenda-dia {
  display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start;
  padding: 12px 4px; border-top: 1px solid var(--border);
}
.agenda-dia:first-child { border-top: none; }
.agenda-dia-nombre { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; color: var(--text-muted); padding-top: 7px; }
.agenda-dia.atiende .agenda-dia-nombre { color: var(--text-dark); }
.agenda-dia-nombre input { width: 18px; height: 18px; accent-color: var(--primary); }
.agenda-dia-franjas { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.agenda-no { color: var(--text-light); font-size: 0.88rem; padding-top: 8px; }
.agenda-franja { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.agenda-franja label { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-muted); }
.agenda-franja input, .agenda-franja select { height: 36px; padding: 0 8px; width: auto; }
.agenda-cupos {
  font-size: 0.78rem; font-weight: 700; color: var(--green);
  background: var(--green-light); border-radius: 999px; padding: 3px 10px;
}
.agenda-quitar {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--text-light); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.agenda-quitar:hover { color: var(--red); background: var(--red-light); }
.agenda-quitar svg { width: 16px; height: 16px; }
.agenda-agregar {
  border: none; background: none; color: var(--primary); font: inherit; font-size: 0.84rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 0;
}
.agenda-agregar svg { width: 15px; height: 15px; }
.agenda-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: 14px; margin-top: 6px;
}
.agenda-resumen { font-size: 0.88rem; color: var(--text-muted); }
.agenda-sin-guardar { color: var(--yellow); }
.agenda-vacio { color: var(--text-muted); font-size: 0.9rem; padding: 8px 0; margin: 0; }
.agenda-vacio.is-error { color: var(--red); }
.agenda-bloqueo-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; margin-bottom: 12px; }
.agenda-bloqueo-form .form-group { margin: 0; min-width: 150px; }
.agenda-bloqueo-motivo { flex: 1; min-width: 200px; }
.agenda-bloqueos { display: flex; flex-direction: column; gap: 6px; }
.agenda-bloqueo {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 12px; border-radius: var(--radius-sm);
  background: var(--yellow-light); color: var(--text-main); font-size: 0.9rem;
}
.agenda-bloqueo > svg { width: 17px; height: 17px; color: var(--yellow); flex: none; }
.agenda-bloqueo span { flex: 1; }

/* ---------- Campanita ---------- */
.btn-notif { position: relative; padding-left: 12px; padding-right: 12px; }
.notif-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; border: 2px solid var(--bg-app);
  font-size: 0.7rem; font-weight: 700; line-height: 16px; text-align: center;
}
.btn-notif.sonando svg { animation: notif-sonar 0.9s ease-in-out 2; transform-origin: 50% 0; }
@keyframes notif-sonar { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .btn-notif.sonando svg { animation: none; } }

/* ---------- Panel de notificaciones ---------- */
.notif-overlay { position: fixed; inset: 0; background: rgba(16, 24, 56, 0.28); z-index: 1090; }
.notif-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
  width: min(440px, 100vw); background: var(--bg-card);
  box-shadow: var(--shadow-xl); display: flex; flex-direction: column;
  transform: translateX(105%); transition: transform 0.22s ease; visibility: hidden;
}
.notif-panel.abierto { transform: none; visibility: visible; }
.notif-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 18px 10px; }
.notif-head h3 { display: flex; align-items: center; gap: 8px; font-size: 1.25rem; margin: 0; }
.notif-head h3 svg { width: 20px; height: 20px; color: var(--primary); }
.notif-head p { margin: 2px 0 0; font-size: 0.84rem; color: var(--text-muted); }
.notif-filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; border-bottom: 1px solid var(--border); align-items: center; }
.notif-filtros .filter-btn { font-size: 0.8rem; padding: 5px 10px; }
.notif-leer-todas {
  margin-left: auto; border: none; background: none; color: var(--primary);
  font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 0;
}
.notif-leer-todas:disabled { color: var(--text-light); cursor: default; }
.notif-leer-todas svg { width: 15px; height: 15px; }
.notif-lista { flex: 1; overflow-y: auto; padding: 8px 10px 20px; }
.notif-vacio { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 50px 20px; color: var(--text-muted); text-align: center; font-size: 0.92rem; }
.notif-vacio svg { width: 34px; height: 34px; color: var(--text-light); }
.notif-vacio.is-error { color: var(--red); }
.notif-item {
  display: flex; gap: 12px; padding: 12px 10px; border-radius: 10px; cursor: default;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item.no-leida { background: var(--primary-light); cursor: pointer; }
.notif-icono {
  flex: none; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-app); color: var(--text-muted);
}
.notif-icono svg { width: 18px; height: 18px; }
.tipo-turno_pedido .notif-icono { background: var(--yellow-light); color: var(--yellow); }
.tipo-turno_cancelado .notif-icono { background: var(--red-light); color: var(--red); }
.tipo-turno_nuevo .notif-icono { background: var(--green-light); color: var(--green); }
.tipo-turno_reprogramado .notif-icono { background: var(--blue-light); color: var(--blue); }
.notif-cuerpo { flex: 1; min-width: 0; }
.notif-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.notif-top strong { font-size: 0.95rem; color: var(--text-dark); }
.notif-item.no-leida .notif-top strong::before {
  content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary); margin-right: 6px; vertical-align: middle;
}
.notif-top time { flex: none; font-size: 0.75rem; color: var(--text-light); }
.notif-detalle { margin: 3px 0 0; font-size: 0.86rem; color: var(--text-main); overflow-wrap: anywhere; }
.notif-turno { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 0.8rem; color: var(--text-muted); }
.notif-tel { display: inline-flex; align-items: center; gap: 4px; }
.notif-tel svg { width: 13px; height: 13px; }
.turno-estado-mini { font-weight: 700; font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; }
.turno-estado-mini.estado-pendiente { color: #8A5A0E; background: var(--yellow-light); }
.turno-estado-mini.estado-confirmado { color: var(--primary-dark); background: #DDE1F7; }
.turno-estado-mini.estado-realizado { color: #23613F; background: var(--green-light); }
.turno-estado-mini.estado-cancelado { color: #5E6781; background: #EEF0F4; }
.notif-comentario { margin: 6px 0 0; font-size: 0.82rem; font-style: italic; color: var(--text-main); }
.notif-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.notif-acciones .turno-accion { flex: 0 1 auto; height: 32px; }
.turno-accion-peligro { color: var(--red); }
.turno-accion-peligro:hover { background: var(--red-light); border-color: var(--red-light); }
.notif-sin-turno { margin: 6px 0 0; font-size: 0.8rem; color: var(--text-light); }

@media (max-width: 720px) {
  .agenda-dia { grid-template-columns: 1fr; gap: 6px; }
  .agenda-dia-nombre { padding-top: 0; }
  .agenda-medico-sel { min-width: 0; width: 100%; }
  .horarios-fila { flex-direction: column; gap: 4px; }
  .horarios-franja { padding-top: 0; }
  .btn-notif { padding-left: 10px; padding-right: 10px; }
  .notif-panel { width: 100vw; }
}

/* Administración → Tótem de llegada */
.totem-bloque { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.totem-bloque h3 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; color: var(--navy); margin-bottom: 6px; }
.totem-bloque h3 svg { width: 18px; height: 18px; color: var(--primary); }
.totem-bloque .cuenta-ayuda { margin-bottom: 12px; }
.totem-bloque .pantalla-pasos code { overflow-wrap: anywhere; }
.totem-bloque kbd { background: #fff; border: 1px solid var(--border-strong); border-radius: 4px; padding: 0 5px; font-size: 0.82em; font-family: inherit; }

/* ==========================================================================
   FIRMA DIGITAL — Mi cuenta y pie de los documentos
   ========================================================================== */
.firma-actual { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; margin-bottom: 10px; min-height: 64px; justify-content: center; }
.firma-actual img { max-width: 260px; max-height: 90px; object-fit: contain; }
.firma-fecha { font-size: 0.78rem; color: var(--text-muted); }
.firma-vacia { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; color: var(--text-muted); }
.firma-vacia svg { width: 15px; height: 15px; flex-shrink: 0; }
.firma-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.firma-botones.hidden, .firma-editor.hidden { display: none; }
.firma-subir { position: relative; overflow: hidden; cursor: pointer; }
.firma-subir input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.firma-editor { margin-bottom: 10px; }
.firma-instruccion { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 6px; }
#firmaCanvas {
  display: block; width: 100%; aspect-ratio: 3 / 1; border: 1.5px dashed var(--border-strong); border-radius: 10px; margin-bottom: 8px;
  background: #fff linear-gradient(to top, transparent 22%, #CBD5E1 22%, #CBD5E1 calc(22% + 1px), transparent calc(22% + 1px));
  touch-action: none; cursor: crosshair;
}
.firma-editor.es-foto #firmaCanvas { cursor: default; background-image: none; background-color: #F8FAFC; }
.autor-firmado { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #E8F5EE; color: #1E7A4C; font-size: 0.72rem; font-weight: 600; vertical-align: middle; }
.autor-firmado svg { width: 12px; height: 12px; }

/* Imagen de la firma sobre la línea de firma (pantalla e impresión) */
.doc-firma-img { display: block; margin: 0 auto -6px; max-width: 85%; max-height: 17mm; object-fit: contain; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-firma-col { display: flex; flex-direction: column; align-items: center; }
.foja-firma .doc-firma-img { max-height: 16mm; }

/* ==========================================================================
   RECETARIO
   ========================================================================== */
:root { --doc-receta: #7C3A9E; }
.timeline-card-receta { --doc: var(--doc-receta); border-left: 4px solid var(--doc) !important; }
.badge-receta {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: color-mix(in srgb, var(--doc-receta) 9%, #fff) !important;
  color: color-mix(in srgb, var(--doc-receta) 78%, #000) !important;
  font-family: var(--font-body); font-size: 0.8rem !important; font-weight: 600 !important;
  padding: 3px 10px !important; border-radius: 999px !important;
}
.badge-receta svg { width: 13px !important; height: 13px !important; color: var(--doc-receta); }

/* Letra manuscrita del recetario: viene con el panel (no depende de Google).
   Si faltara, cae en una letra de imprenta seria, nunca en Comic Sans. */
@font-face { font-family: 'Pinyon Script Passo'; font-style: normal; font-weight: 400; font-display: block;
  src: url('assets/fonts/pinyon-script.woff2') format('woff2'); }

/* Hoja de la receta (en el visor y al imprimir) */
.receta-page { display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif; color: #111; background: #fff; }
.foja-visor .receta-page { min-height: 1040px; }
.receta-cab { text-align: center; padding-top: 6px; }
.receta-nombre { font-family: 'Pinyon Script Passo', 'Edwardian Script ITC', 'Palace Script MT', 'Monotype Corsiva', 'Times New Roman', serif; font-size: 30pt; line-height: 1.1; color: #111; }
.receta-sub { font-size: 10.5pt; letter-spacing: 0.04em; margin-top: 2px; }
.receta-mat { font-size: 8.5pt; margin-top: 8px; }
.receta-doble-linea { border-top: 1.6pt solid #111; border-bottom: 0.6pt solid #111; height: 2.5pt; margin: 8px 0 10px; }

/* Datos del paciente: más grandes, con el rótulo chico arriba */
.receta-paciente { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 2px 0 6px; }
.receta-dato { display: flex; flex-direction: column; }
.receta-dato span { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em; color: #555; }
.receta-dato strong { font-size: 12.5pt; font-weight: 700; line-height: 1.3; }
.receta-dato-nombre strong { font-size: 13.5pt; }

.receta-rp { font-family: 'Pinyon Script Passo', 'Edwardian Script ITC', 'Palace Script MT', 'Monotype Corsiva', 'Times New Roman', serif; font-size: 26pt; margin: 12px 0 6px; }
.receta-cuerpo { font-size: 12.5pt; line-height: 1.7; padding-left: 8mm; overflow-wrap: anywhere; }

/* Diagnóstico: debajo del texto, separado */
.receta-dx { margin: 12mm 0 0 8mm; padding-top: 6px; border-top: 0.5pt solid #bbb; width: 60%; font-size: 11pt; line-height: 1.5; }
.receta-dx span { display: block; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em; color: #555; margin-bottom: 1px; }

/* Fecha y firma: dos columnas iguales, con la línea a la misma altura */
.receta-bajo { margin-top: auto; padding-top: 12mm; display: flex; justify-content: space-between; align-items: flex-end; gap: 20mm; }
.receta-col { width: 62mm; text-align: center; }
.receta-col-arriba { height: 22mm; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1.5mm; }
.receta-col-arriba .doc-firma-img { display: block; margin: 0; max-width: 100%; max-height: 22mm; object-fit: contain; object-position: center bottom; }
.receta-fecha { font-size: 12.5pt; font-weight: 600; letter-spacing: 0.02em; }
.receta-col-linea { border-top: 0.8pt solid #111; }
.receta-col-txt { font-size: 9pt; padding-top: 3px; color: #222; }

.receta-pie { border-top: 0.8pt solid #111; margin-top: 8mm; padding-top: 4px; text-align: center; font-size: 8.5pt; }
@media print {
  body.printing-hc #printArea .foja-print .receta-page { display: flex !important; flex-direction: column !important; }
}

/* ==========================================================================
   RUEDITA DE CARGA (misma en el panel y en el portal de pacientes)
   8 puntos que giran; toma el color del texto donde está (azul por defecto).
   ========================================================================== */
.spinner {
  --s: 28px;
  position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle;
  width: var(--s); height: var(--s); color: var(--primary);
}
.spinner::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(var(--s) * .17); height: calc(var(--s) * .17); margin: calc(var(--s) * -.085);
  border-radius: 50%;
  /* respaldo para navegadores viejos: todos los puntos iguales */
  box-shadow:
    0 calc(var(--s) * -.38) currentColor, calc(var(--s) * -.269) calc(var(--s) * -.269) currentColor,
    calc(var(--s) * -.38) 0 currentColor, calc(var(--s) * -.269) calc(var(--s) * .269) currentColor,
    0 calc(var(--s) * .38) currentColor, calc(var(--s) * .269) calc(var(--s) * .269) currentColor,
    calc(var(--s) * .38) 0 currentColor, calc(var(--s) * .269) calc(var(--s) * -.269) currentColor;
  box-shadow:
    0 calc(var(--s) * -.38) currentColor,
    calc(var(--s) * -.269) calc(var(--s) * -.269) color-mix(in srgb, currentColor 86%, transparent),
    calc(var(--s) * -.38) 0 color-mix(in srgb, currentColor 72%, transparent),
    calc(var(--s) * -.269) calc(var(--s) * .269) color-mix(in srgb, currentColor 58%, transparent),
    0 calc(var(--s) * .38) color-mix(in srgb, currentColor 44%, transparent),
    calc(var(--s) * .269) calc(var(--s) * .269) color-mix(in srgb, currentColor 32%, transparent),
    calc(var(--s) * .38) 0 color-mix(in srgb, currentColor 22%, transparent),
    calc(var(--s) * .269) calc(var(--s) * -.269) color-mix(in srgb, currentColor 14%, transparent);
  animation: spinner-gira .85s steps(8) infinite;
}
@keyframes spinner-gira { to { transform: rotate(360deg); } }
.spinner-sm { --s: 16px; }
.spinner-lg { --s: 48px; }
button .spinner, .btn .spinner { color: inherit; }
.loading-row .spinner, .patient-dropdown-empty .spinner, .firma-vacia .spinner { margin-right: 6px; }
@media (prefers-reduced-motion: reduce) { .spinner::before { animation-duration: 2.4s; } }

/* Bloque "cargando" centrado dentro de una sección */
.carga-bloque { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: var(--text-muted); text-align: center; }
.carga-bloque h4 { margin: 0; }

/* Pantalla completa al abrir el panel */
.pantalla-carga {
  position: fixed; inset: 0; z-index: 10000; width: 100%; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--bg-app, #F2F4F8); color: var(--text-muted, #64748B); font-size: 0.95rem; text-align: center; padding: 24px;
  transition: opacity .25s ease;
}
.pantalla-carga.saliendo { opacity: 0; pointer-events: none; }

/* ==========================================================================
   SELLO (3 líneas) con la firma superpuesta — documentos y Mi cuenta
   ========================================================================== */
.doc-sello-firma { position: relative; display: flex; justify-content: center; align-items: center; margin: 0 auto 2px; padding-top: 7mm; }
.doc-sello { text-align: center; font-family: Arial, Helvetica, sans-serif; color: #111; line-height: 1.18; white-space: nowrap; }
.doc-sello strong { display: block; font-size: 10.5pt; font-weight: 700; }
.doc-sello span { display: block; font-size: 8.5pt; }
/* la firma pasa por encima del sello, como en papel */
.doc-sello-firma .doc-firma-img {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  margin: 0 !important; max-width: 95%; max-height: 17mm; object-fit: contain; mix-blend-mode: multiply; pointer-events: none;
}
.doc-sello-firma:not(.con-firma) { padding-top: 0; }
.receta-col-arriba .doc-sello-firma { width: 100%; }
.receta-col-arriba .doc-sello-firma .doc-firma-img { max-height: 16mm; }
.foja-firma .doc-sello-firma, .hc-sig-line .doc-sello-firma { margin-bottom: 3px; }

/* Vista previa en Mi cuenta */
.sello-previa { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 14px; margin-bottom: 10px; display: flex; justify-content: center; }
.sello-previa-hoja { width: 240px; text-align: center; }
.sello-previa-linea { border-top: 1px solid #111; margin-top: 2px; }
.sello-previa-txt { font-size: 0.75rem; color: #475569; padding-top: 3px; }

/* Obra social: lista + "¿Cuál?" cuando es OTRA */
.obra-otra { margin-top: 6px; }
.obra-grupo { display: flex; flex-direction: column; }
/* Médico de guardia: sin elegir consultorio (la pantalla dice GUARDIA) */
.consultorio-guardia .consultorio-chips, .consultorio-guardia .consultorio-bar-campo, .consultorio-guardia .consultorio-bar-titulo { display: none; }

/* Dos teles: consultorios y guardia */
.pantalla-teles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 8px 0 16px; }
.pantalla-tele { border: 1px solid var(--border, #e2e5ee); border-left: 4px solid #2A35B5; border-radius: 10px; padding: 14px 16px; min-width: 0; }
.pantalla-tele-guardia { border-left-color: #C62828; }
.pantalla-tele h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 1rem; }
.pantalla-tele h4 svg { width: 18px; height: 18px; }
.pantalla-tele .pantalla-link { margin: 8px 0; }

/* Finalizar consulta con el código de atención del paciente */
.modal-finalizar { max-width: 460px; }
.fin-paciente { font-weight: 600; font-size: 1.05rem; margin: 0 0 6px; }
.fin-ayuda { color: var(--text-secondary, #5b6275); margin: 0 0 16px; line-height: 1.45; }
.fin-codigo { display: block; width: 100%; max-width: 240px; margin: 0 auto; text-align: center; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.5em; padding: 10px 0 10px 0.5em; font-variant-numeric: tabular-nums; border-radius: 12px; }
.fin-error { min-height: 1.3em; color: #c62828; text-align: center; font-size: 0.92rem; margin: 8px 0 4px; }
.fin-sin { margin-top: 10px; border-top: 1px solid var(--border, #e2e5ee); padding-top: 10px; }
.fin-sin summary { cursor: pointer; color: var(--text-secondary, #5b6275); font-size: 0.92rem; }
.fin-sin[open] summary { margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atencion-ok, .atencion-sin { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; font-weight: 600; margin-top: 4px; }
.atencion-ok { color: #1b7f4b; }
.atencion-sin { color: #b26a00; }
.atencion-ok svg, .atencion-sin svg { width: 15px; height: 15px; }

/* ---------- Farmacia ---------- */
.far-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.far-kpi { display: flex; flex-direction: column; gap: 2px; text-align: left; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; font: inherit; color: inherit; }
button.far-kpi { cursor: pointer; transition: var(--transition); }
button.far-kpi:hover { border-color: var(--primary); }
.far-kpi span { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.far-kpi strong { font-family: var(--font-heading); font-size: 1.7rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.far-kpi-bajo.alerta { border-left: 4px solid var(--yellow); }
.far-kpi-bajo.alerta strong { color: #B45309; }
.far-kpi-sin.alerta { border-left: 4px solid var(--red); }
.far-kpi-sin.alerta strong { color: #B91C1C; }
.far-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.far-acciones { flex: 0 1 auto; flex-wrap: nowrap; }
.far-acciones input[type=search] { width: 240px; min-width: 0; margin: 0; }
.far-acciones select { width: auto; min-width: 140px; margin: 0; }
.far-acciones .btn { white-space: nowrap; }
.far-tabla td, .far-tabla th { vertical-align: middle; }
.far-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.far-sub { display: block; font-size: 0.82rem; color: var(--text-muted); }
.far-sub-in { font-size: 0.82rem; color: var(--text-muted); }
.far-stock { font-size: 1.05rem; color: var(--navy); }
.far-estado, .far-tipo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.far-ok { background: var(--green-light); color: #047857; }
.far-bajo { background: var(--yellow-light); color: #92400E; }
.far-sin { background: var(--red-light); color: #B91C1C; }
.far-t-entrada { background: var(--green-light); color: #047857; }
.far-t-salida { background: var(--red-light); color: #B91C1C; }
.far-t-ajuste { background: var(--blue-light); color: #075985; }
.far-cant.mas { color: #047857; font-weight: 700; }
.far-cant.menos { color: #B91C1C; font-weight: 700; }
.far-acc { text-align: right; white-space: nowrap; }
.far-acc .btn { margin-left: 4px; }
.far-acc .btn svg { width: 15px; height: 15px; }
.far-btn-entrada { background: var(--green-light); color: #047857; border: 1px solid #A7F3D0; }
.far-btn-salida { background: var(--red-light); color: #B91C1C; border: 1px solid #FECACA; }
.far-btn-salida[disabled] { opacity: .45; cursor: not-allowed; }
.far-fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.far-vacio { text-align: center; color: var(--text-muted); padding: 28px 12px !important; }
.far-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.far-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.far-filtros select { min-width: 200px; }
.far-resumen { margin: 0 0 10px; color: var(--text-main); font-size: 0.9rem; }
.mov-stock { margin: -4px 0 12px; color: var(--text-muted); }
.mov-tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mov-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.mov-tipo span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: 10px; font-weight: 600; cursor: pointer; transition: var(--transition); }
.mov-tipo span svg { width: 16px; height: 16px; }
.mov-tipo input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.mov-entrada input:checked + span { background: var(--green-light); border-color: #10B981; color: #047857; }
.mov-salida input:checked + span { background: var(--red-light); border-color: #EF4444; color: #B91C1C; }
.mov-ajuste input:checked + span { background: var(--blue-light); border-color: #0284C7; color: #075985; }
.far-btn-guardar-salida { background: #DC2626 !important; border-color: #DC2626 !important; }
@media (max-width: 700px) {
  .far-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .far-kpi { padding: 10px; min-width: 0; }
  .far-kpi span { font-size: 0.68rem; letter-spacing: 0; }
  .far-kpi strong { font-size: 1.3rem; }
  .far-acciones { flex-wrap: wrap; width: 100%; }
  .far-acciones input[type=search], .far-acciones select, .far-filtros select { width: 100%; min-width: 0; }
  .far-filtros label { flex: 1 1 140px; }
}

/* Farmacia: ubicación y "¿Dónde está?" */
.far-ubic { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 8px; background: var(--primary-light); color: var(--primary-dark); font-weight: 700; font-size: 0.88rem; white-space: nowrap; letter-spacing: .02em; }
.far-ubic svg { width: 14px; height: 14px; }
.far-ubic.vacia { background: transparent; color: var(--text-light); font-weight: 500; font-size: 0.8rem; padding-left: 0; }
.far-btn-donde { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.far-btn-donde:hover { background: #0B2347; }
.modal-donde { max-width: 520px; }
.donde-input { width: 100%; font-size: 1.25rem; padding: 14px 16px; border-radius: 12px; }
.donde-resultados { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow-y: auto; }
.donde-ayuda { color: var(--text-muted); text-align: center; margin: 18px 0; }
.donde-item { display: flex; align-items: center; gap: 14px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; }
.donde-lugar { flex: none; min-width: 84px; height: 64px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; background: var(--primary); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1.6rem; letter-spacing: .02em; text-align: center; line-height: 1; }
.donde-item.sin .donde-lugar { background: var(--border); color: var(--text-muted); }
.donde-med { display: flex; flex-direction: column; min-width: 0; }
.donde-med strong { font-size: 1.05rem; color: var(--navy); }
.donde-med span { font-size: 0.86rem; color: var(--text-muted); }
.donde-stock.ok { color: #047857 !important; font-weight: 600; }
.donde-stock.bajo { color: #B45309 !important; font-weight: 600; }
.donde-stock.sin_stock { color: #B91C1C !important; font-weight: 600; }
.donde-lugar.largo { font-size: 1rem; max-width: 150px; overflow-wrap: anywhere; }
/* Tabla de stock más compacta para que entren las acciones */
.far-tabla th, .far-tabla td { padding-left: 12px !important; padding-right: 12px !important; }
.far-acc .btn { padding: 6px 9px; margin-left: 3px; }
@media (max-width: 1500px) {
  .far-btn-entrada .far-txt, .far-btn-salida .far-txt { display: none; }
}

/* Corrección de Administración sobre documentos inmodificables */
.aviso-correccion { display: flex; align-items: flex-start; gap: 8px; background: var(--yellow-light); border: 1px solid #FCD34D; color: #92400E; border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: 0.88rem; line-height: 1.4; }
.aviso-correccion svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.btn-correccion { background: var(--yellow-light); color: #92400E; border-color: #FCD34D; }

/* Padrón PAMI */
.padron-estado { margin-bottom: 16px; }
.padron-ok, .padron-vacio { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; }
.padron-ok { background: var(--green-light); border: 1px solid #A7F3D0; }
.padron-ok svg { width: 26px; height: 26px; color: #047857; flex: none; }
.padron-ok strong { display: block; color: #065F46; font-size: 1.05rem; }
.padron-ok span { font-size: 0.86rem; color: #047857; }
.padron-vacio { background: var(--yellow-light); border: 1px solid #FCD34D; }
.padron-vacio svg { width: 26px; height: 26px; color: #92400E; flex: none; }
.padron-vacio strong { display: block; color: #92400E; }
.padron-vacio span { font-size: 0.86rem; color: #92400E; }
.padron-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 34px 20px; border: 2px dashed var(--primary-soft, #C7D2FE); border-radius: 14px; background: var(--primary-light); cursor: pointer; transition: var(--transition); }
.padron-drop:hover, .padron-drop:focus-visible { border-color: var(--primary); background: #E6ECFF; outline: none; }
.padron-drop.arrastrando { border-color: var(--primary); background: #DCE4FF; transform: scale(1.01); }
.padron-drop.ocupado { pointer-events: none; opacity: 0.7; }
.padron-drop svg { width: 40px; height: 40px; color: var(--primary); }
.padron-drop strong { font-size: 1.1rem; color: var(--navy); }
.padron-drop span { color: var(--text-muted); font-size: 0.9rem; }
.padron-drop u { color: var(--primary); }
.padron-progreso { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--bg-app); font-size: 0.95rem; color: var(--text-main); }
.padron-progreso svg { width: 20px; height: 20px; flex: none; }
.padron-progreso.ok { background: var(--green-light); color: #065F46; }
.padron-progreso.ok svg { color: #047857; }
.padron-progreso.error { background: var(--red-light); color: #B91C1C; }
.padron-progreso.error svg { color: #B91C1C; }
.padron-ayuda { margin-top: 16px; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }

/* Marca meps en la barra lateral */
.sidebar-marca { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.sidebar-marca img { height: 26px; width: auto; display: block; }
.sidebar-marca sup { font-size: 9px; font-weight: 600; color: #fff; align-self: flex-start; margin: 0 4px 0 -4px; }
.sidebar-demo { font-family: inherit; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .8px !important; color: #fff !important; text-transform: uppercase !important;
  background: rgba(8,14,40,.65); border: 1px solid rgba(255,255,255,.18); padding: 2px 8px; border-radius: 999px; line-height: 1.4; }