@charset "UTF-8";

:root {
      --bg-main: #ECEDEF;
      --bg-card: rgba(255, 255, 255, 0.65);
      --bg-sidebar: rgba(255, 255, 255, 0.6);
      --text-main: #121418;
      --text-muted: #2F4C8A;
      --text-subtle: #4A6FB5;
      --border-color: rgba(47, 76, 138, 0.15);

      --primary-blue: #2F4C8A;
      --primary-blue-light: rgba(47, 76, 138, 0.08);
      --primary-blue-hover: #1C2F57;

      --accent-green: #059669;
      --accent-green-bg: rgba(5, 150, 105, 0.08);
      --accent-green-pill: rgba(5, 150, 105, 0.15);
      --accent-green-text: #065F46;

      --accent-orange: #EA580C;
      --accent-orange-bg: rgba(234, 88, 12, 0.08);

      --accent-red: #DC2626;
      --accent-red-bg: rgba(220, 38, 38, 0.08);

      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-full: 9999px;

      --shadow-subtle: 0 4px 6px -1px rgba(47, 76, 138, 0.02), 0 2px 4px -2px rgba(47, 76, 138, 0.02);
      --shadow-card: 0 10px 30px -10px rgba(31, 38, 135, 0.07);
      --sidebar-width: 260px;
      --sidebar-collapsed-width: 80px;
      --transition-speed: 0.25s;
    }

    [data-theme="dark"] {
      color-scheme: dark;
      --bg-main: #0B0F17;
      --bg-card: #151D2A;
      --bg-sidebar: #111827;
      --text-main: #F8FAFC;
      --text-muted: #94A3B8;
      --text-subtle: #64748B;
      --border-color: #1E293B;

      --primary-blue-light: rgba(47, 76, 138, 0.15);
      --accent-green-bg: rgba(16, 185, 129, 0.15);
      --accent-green-pill: rgba(16, 185, 129, 0.25);
      --accent-green-text: #34D399;

      --accent-orange-bg: rgba(249, 115, 22, 0.15);
      --accent-red-bg: rgba(239, 68, 68, 0.15);

      --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
      --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    }

    * { box-sizing: border-box; }
    html { overflow-x: hidden; }
    body { margin: 0; overflow-x: hidden; }
    img, svg { max-width: 100%; height: auto; display: block; }

    /* ================= BACKGROUND PARTICLES ANIMATED ================= */
    .particles-bg {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: 100vh;
      z-index: -1;
      pointer-events: none;
      display: block;
    }

    /* =========================================
       DARK MODE COMPONENT OVERRIDES
       ========================================= */
      [data-theme="dark"] .theme-logo-light { display: none !important; }
      [data-theme="dark"] .theme-logo-dark { display: block !important; }

      /* Sidebar flotante: el vidrio claro (rgba blancos) del modo claro se
         pierde contra el fondo casi negro del modo oscuro — se reemplaza
         por una versión oscura del mismo efecto, con suficiente contraste
         para que el menú siga siendo legible. */
      [data-theme="dark"] .sidebar {
        background-color: rgba(17, 24, 39, 0.85);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.6);
      }
      [data-theme="dark"] .grid-btn {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
      }
      [data-theme="dark"] .toggle-sidebar-btn {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.12);
      }
      [data-theme="dark"] .nav-item:hover { background-color: rgba(255, 255, 255, 0.06); }
      [data-theme="dark"] .nav-item.active {
        background-color: rgba(255, 255, 255, 0.92);
        border-color: rgba(47, 76, 138, 0.4);
      }
      [data-theme="dark"] .sidebar.collapsed .toggle-sidebar-btn { background: rgba(255, 255, 255, 0.08); }

      /* Badge pills — use semi-transparent dark variants */
      [data-theme="dark"] .badge-pill.salida { background-color: rgba(239, 68, 68, 0.15); }
      [data-theme="dark"] .badge-pill.listo { background-color: rgba(34, 197, 94, 0.15); color: #4ADE80; }
      [data-theme="dark"] .badge-pill.sin-cobrar { background-color: rgba(239, 68, 68, 0.15); }
      [data-theme="dark"] .badge-pill.en-proceso { background-color: rgba(37, 99, 235, 0.15); }
      [data-theme="dark"] .badge-aprobado { background: rgba(34, 197, 94, 0.15); color: #4ADE80; border-color: rgba(34, 197, 94, 0.3); }
      [data-theme="dark"] .badge-nuevo { background: rgba(37, 99, 235, 0.15); color: #60A5FA; border-color: rgba(37, 99, 235, 0.3); }
      [data-theme="dark"] .badge-desfasado { background: rgba(219, 39, 119, 0.15); color: #F472B6; border-color: rgba(219, 39, 119, 0.3); }
      [data-theme="dark"] .badge-en_progreso { background: rgba(139, 92, 246, 0.15); color: #A78BFA; border-color: rgba(139, 92, 246, 0.3); }
      [data-theme="dark"] .badge-finalizado { background: rgba(100, 116, 139, 0.2); color: #94A3B8; border-color: rgba(100, 116, 139, 0.3); }
      [data-theme="dark"] .badge-compartido { background: rgba(147, 51, 234, 0.15); color: #C084FC; border-color: rgba(147, 51, 234, 0.3); }
      [data-theme="dark"] .badge-nocheckin { background: rgba(100, 116, 139, 0.2); color: #94A3B8; }
      [data-theme="dark"] .badge-aplicacion-en-proceso { background: rgba(249, 115, 22, 0.15); color: #FB923C; }
      [data-theme="dark"] .badge-aplicacion-aplicado { background: rgba(16, 185, 129, 0.15); color: #34D399; }
      [data-theme="dark"] .badge-aplicacion-solicitado { background: rgba(59, 130, 246, 0.15); color: #60A5FA; }
      [data-theme="dark"] .badge-aplicacion-preparacion { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
      [data-theme="dark"] .badge-aplicacion-listo { background: rgba(16, 185, 129, 0.15); color: #34D399; }
      [data-theme="dark"] .badge-borrador { background-color: rgba(217, 119, 6, 0.15); color: #FBBF24; }
      [data-theme="dark"] .badge-pill.activo { background-color: rgba(34, 197, 94, 0.15); color: #4ADE80; }

      /* Patient avatar placeholder */
      [data-theme="dark"] .patient-avatar-placeholder { background-color: #1E293B; }
      [data-theme="dark"] .avatar-circle { background-color: #1E293B; }

      /* Calendar cells */
      [data-theme="dark"] .calendar-hour-row td { background-color: var(--bg-card); border-color: var(--border-color); }
      [data-theme="dark"] .calendar-hour-row:hover td { background-color: rgba(37, 99, 235, 0.05); }

      /* Empty states */
      [data-theme="dark"] .empty-state-icon { background: rgba(37, 99, 235, 0.1); }
      [data-theme="dark"] .empty-state-fullwidth { background: var(--bg-card); border-color: var(--border-color); }

      /* Custom selects — inline backgrounds */
      [data-theme="dark"] .custom-select { background: var(--bg-main) !important; color: var(--text-main); border-color: var(--border-color); }

      /* Accordion */
      [data-theme="dark"] .accordion-header { background: var(--bg-main); }
      [data-theme="dark"] .accordion-header:hover { background: rgba(37, 99, 235, 0.05); }

      /* Editor pagination (Anterior/Siguiente) */
      [data-theme="dark"] .editor-bottom-pagination { background: var(--bg-card) !important; }

      /* Checkbox grids */
      [data-theme="dark"] .checkbox-grid label { color: var(--text-main); }

      /* Toggle buttons (No Patológicos) */
      [data-theme="dark"] .toggle-btn { background: var(--bg-main); color: var(--text-muted); border-color: var(--border-color); }
      [data-theme="dark"] .toggle-btn.active { background: var(--primary-blue); color: white; }

      /* Nav item pill icon containers */
      [data-theme="dark"] .nav-item-icon-container { background-color: rgba(37, 99, 235, 0.1); }

      /* Table rows */
      [data-theme="dark"] table tr { border-color: var(--border-color); }
      [data-theme="dark"] table th { background-color: var(--bg-main); color: var(--text-muted); border-color: var(--border-color); }
      [data-theme="dark"] table td { border-color: var(--border-color); color: var(--text-main); }

      /* Search input */
      [data-theme="dark"] .search-input { background: var(--bg-main); color: var(--text-main); }

      /* View toggle buttons */
      [data-theme="dark"] .view-toggle-btn { background: var(--bg-main); color: var(--text-muted); }
      [data-theme="dark"] .view-toggle-btn.active { background: var(--primary-blue); color: white; }

      /* Patient card footer */
      [data-theme="dark"] .patient-card-footer { border-color: var(--border-color); }

      /* Content cards inside sections */
      [data-theme="dark"] .content-card { background: var(--bg-card); border-color: var(--border-color); }

      /* Textarea and select elements */
      [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-main); color: var(--text-main); border-color: var(--border-color); }

      /* Calendar header day columns */
      [data-theme="dark"] .calendar-day-header { background: var(--bg-main); color: var(--text-main); }

      /* Scrollbar styling */
      [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-main); }
      [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; }

      /* Red themed elements in dark mode */
      [data-theme="dark"] .red-badge { background: rgba(239, 68, 68, 0.15); color: #FCA5A5; }

      /* Tratamientos filter pills */
      [data-theme="dark"] .filter-pill { background: var(--bg-main); color: var(--text-muted); }
      [data-theme="dark"] .filter-pill.active { background: var(--primary-blue); color: white; }

      /* Modal field inputs */
      [data-theme="dark"] .modal-field input, [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select {
        background-color: var(--bg-main);
        color: var(--text-main);
        border-color: var(--border-color);
      }

      /* Info médico cards */
      [data-theme="dark"] .medico-stat-card { background: var(--bg-main); }

      /* Tab buttons */
      [data-theme="dark"] .tab-btn { color: var(--text-muted); }
      [data-theme="dark"] .tab-btn.active { color: var(--primary-blue); }
      [data-theme="dark"] .theme-logo-light { display: none !important; }
      [data-theme="dark"] .theme-logo-dark { display: block !important; }

    /* =========================================
       LOGIN SCREEN
       ========================================= */
    /* Fondo del <body> en login.html: el mismo tono oscuro del
       login, no el morado de Clivora (body más abajo), para que nunca asome
       el fondo de Clivora durante las transiciones. */
    body.login-page { background: #0F172A; }
    .login-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #0F172A 0%, #1E293B 40%, #0F172A 100%);
      transition: opacity 0.6s ease, transform 0.6s ease;
      overflow: hidden;
    }
    .login-overlay.hidden {
      opacity: 0;
      transform: scale(1.05);
      pointer-events: none;
    }
    .login-overlay.removed { display: none; }

    /* Animated particles background */
    .login-particles {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    .login-particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: rgba(37, 99, 235, 0.3);
      border-radius: 50%;
      animation: floatParticle linear infinite;
    }
    @keyframes floatParticle {
      0% { transform: translateY(100vh) scale(0); opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    /* Login card */
    .login-card {
      position: relative;
      z-index: 2;
      width: 400px;
      max-width: 90vw;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 24px;
      padding: 48px 40px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
      animation: loginCardEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes loginCardEntrance {
      from { opacity: 0; transform: translateY(30px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Logo */
    .login-logo {
      text-align: center;
      margin-bottom: 40px;
    }
    .login-logo-icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 16px;
    }
    .login-logo-icon svg {
      width: 100%;
      height: 100%;
    }
    .login-brand {
      font-size: 32px;
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: -1px;
    }
    .login-brand-sub {
      font-size: 10px;
      font-weight: 700;
      color: #64748B;
      letter-spacing: 3px;
      margin-top: 4px;
    }

    /* Form */
    .login-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .login-field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .login-field label {
      font-size: 11px;
      font-weight: 700;
      color: #94A3B8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .login-field label svg {
      color: #3B82F6;
    }
    .login-field input {
      height: 48px;
      padding: 0 16px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 500;
      outline: none;
      transition: all 0.2s ease;
    }
    .login-field input::placeholder {
      color: #475569;
    }
    .login-field input:focus {
      border-color: #3B82F6;
      background: rgba(37, 99, 235, 0.08);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

    /* Error message */
    .login-error {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 10px;
      color: #FCA5A5;
      font-size: 12px;
      font-weight: 600;
      animation: shakeError 0.4s ease;
    }
    .login-error.visible {
      display: flex;
    }
    @keyframes shakeError {
      0%, 100% { transform: translateX(0); }
      20% { transform: translateX(-8px); }
      40% { transform: translateX(8px); }
      60% { transform: translateX(-4px); }
      80% { transform: translateX(4px); }
    }

    /* Submit button */
    .login-submit {
      height: 48px;
      background: linear-gradient(135deg, #2563EB, #1D4ED8);
      border: none;
      border-radius: 12px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.2s ease;
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .login-submit:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35);
    }
    .login-submit:active {
      transform: translateY(0);
    }
    .login-submit.loading .login-btn-text { opacity: 0; }
    .login-submit.loading .login-btn-spinner { opacity: 1; }

    .login-btn-spinner {
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: white;
      border-radius: 50%;
      opacity: 0;
      animation: spin 0.6s linear infinite;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .login-forgot-link {
      align-self: flex-end;
      font-size: 12px;
      font-weight: 600;
      color: #60A5FA;
      text-decoration: none;
    }
    .login-forgot-link:hover {
      color: #93C5FD;
      text-decoration: underline;
    }

    /* Restablecer contraseña (templates/reset_password.html) */
    .reset-heading { text-align: center; }
    .reset-heading h2,
    .reset-result h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #FFFFFF; }
    .reset-heading p,
    .reset-result p { margin: 0; font-size: 13px; line-height: 1.5; color: #94A3B8; }
    .reset-result { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .reset-result[hidden], .reset-step[hidden] { display: none; }
    .reset-result-icon {
      width: 56px; height: 56px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
    }
    .reset-result-icon.is-success { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
    .reset-result-icon.is-error { background: rgba(239, 68, 68, 0.15); color: #F87171; }
    .reset-link-btn {
      display: flex; align-items: center; justify-content: center;
      width: 100%; margin-top: 8px; text-decoration: none; box-sizing: border-box;
    }
    .reset-back-link { display: block; margin-top: 24px; text-align: center; }

    .login-footer-text {
      text-align: center;
      margin-top: 32px;
      font-size: 11px;
      color: #475569;
      font-weight: 500;
    }


    /* ===== Success overlay — Spectacular transition ===== */
    .login-success-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: radial-gradient(ellipse at center, #1D4ED8 0%, #1E3A8A 40%, #0F172A 100%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
      overflow: hidden;
    }
    .login-success-overlay.active {
      opacity: 1;
      pointer-events: all;
    }

    /* Radial pulse rings */
    .success-pulse-ring {
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(59, 130, 246, 0.3);
      opacity: 0;
    }
    .login-success-overlay.active .ring-1 {
      animation: pulseRing 2s 0.2s ease-out forwards;
    }
    .login-success-overlay.active .ring-2 {
      animation: pulseRing 2s 0.5s ease-out forwards;
    }
    .login-success-overlay.active .ring-3 {
      animation: pulseRing 2s 0.8s ease-out forwards;
    }
    @keyframes pulseRing {
      0% { width: 60px; height: 60px; opacity: 0.8; border-color: rgba(96, 165, 250, 0.6); }
      100% { width: 600px; height: 600px; opacity: 0; border-color: rgba(96, 165, 250, 0); }
    }

    /* Logo animation */
    .success-logo-anim {
      width: 56px;
      height: 56px;
      opacity: 0;
      margin-bottom: 20px;
    }
    .success-logo-anim svg {
      width: 100%;
      height: 100%;
    }
    .login-success-overlay.active .success-logo-anim {
      animation: logoReveal 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    @keyframes logoReveal {
      from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
      to { opacity: 1; transform: scale(1) rotate(0deg); }
    }

    /* Checkmark */
    .login-success-check {
      width: 72px;
      height: 72px;
      margin-bottom: 28px;
    }
    .login-success-check svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.5));
    }
    .login-check-circle {
      stroke: #60A5FA;
      stroke-width: 2;
      stroke-dasharray: 166;
      stroke-dashoffset: 166;
      stroke-linecap: round;
    }
    .login-success-overlay.active .login-check-circle {
      animation: drawCircle 0.6s 0.3s ease forwards;
    }
    @keyframes drawCircle {
      to { stroke-dashoffset: 0; }
    }
    .login-check-path {
      stroke: #FFFFFF;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 48;
      stroke-dashoffset: 48;
    }
    .login-success-overlay.active .login-check-path {
      animation: drawCheck 0.4s 0.7s ease forwards;
    }
    @keyframes drawCheck {
      to { stroke-dashoffset: 0; }
    }

    /* User name y role */
    .login-success-name {
      color: #FFFFFF;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
      opacity: 0;
      text-align: center;
    }
    .login-success-overlay.active .login-success-name {
      animation: fadeInUp 0.6s 0.9s ease forwards;
    }
    .login-success-role {
      color: rgba(191, 219, 254, 0.8);
      font-size: 14px;
      font-weight: 600;
      margin-top: 8px;
      opacity: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-align: center;
    }
    .login-success-overlay.active .login-success-role {
      animation: fadeInUp 0.5s 1.1s ease forwards;
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Bottom loading bar */
    .success-bottom-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: rgba(255,255,255,0.1);
    }
    .success-bar-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #60A5FA, #FFFFFF, #60A5FA);
      border-radius: 2px;
    }
    .login-success-overlay.active .success-bar-fill {
      animation: barFill 1.8s 0.5s ease-in-out forwards;
    }
    @keyframes barFill {
      0% { width: 0%; }
      100% { width: 100%; }
    }

    /* Success particles */
    .success-particles {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .success-particle {
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      opacity: 0;
    }
    @keyframes particleBurst {
      0% { transform: translate(0, 0) scale(1); opacity: 1; }
      100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
    }


    /* Login responsive */
    @media (max-width: 480px) {
      .login-card {
        padding: 32px 24px;
        border-radius: 20px;
      }
      .login-brand { font-size: 28px; }
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif; }

    html { scroll-behavior: smooth; }

    body {
      background: linear-gradient(135deg, #E6E0FF 0%, #C5B6FF 100%);
      background-attachment: fixed;
      color: var(--text-main);
      display: flex;
      min-height: 100vh;
      overflow-x: hidden;
      transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    }
    [data-theme="dark"] body {
      background: var(--bg-main);
      background-attachment: fixed;
    }

    /* ================= SIDEBAR ================= */
    .sidebar {
      width: var(--sidebar-width);
      height: calc(100vh - 40px);
      background-color: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.45);
      border-radius: 28px;
      display: flex; flex-direction: column; justify-content: space-between;
      padding: 24px 18px; position: fixed; top: 20px; bottom: 20px; left: 20px; z-index: 70 !important;
      transition: width var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1),
                  left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1);
      user-select: none;
      box-shadow: 0 10px 40px -10px rgba(31, 38, 135, 0.08);
    }

    .sidebar.collapsed { width: var(--sidebar-collapsed-width); }
    .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding: 0 4px; gap: 8px; }
    .logo-container { display: flex; align-items: center; gap: 10px; overflow: hidden; white-space: nowrap; }
    .logo-icon { width: 38px; height: 38px; flex-shrink: 0; }
    .logo-text { display: flex; flex-direction: column; }
    .logo-text-title { font-size: 20px; font-weight: 800; color: var(--primary-blue); line-height: 1; letter-spacing: -0.5px; }
    .logo-text-sub { font-size: 8px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; margin-top: 2px; }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .grid-btn {
      background: rgba(47, 76, 138, 0.08);
      border: 1px solid rgba(47, 76, 138, 0.15);
      border-radius: 10px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary-blue);
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 4px 10px rgba(47, 76, 138, 0.05);
      padding: 0;
    }
    .grid-btn:hover {
      background: rgba(47, 76, 138, 0.15);
      transform: translateY(-1px);
    }
    .toggle-sidebar-btn {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(224, 231, 255, 0.6);
      border-radius: 8px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.2s ease;
      padding: 0;
    }
    .toggle-sidebar-btn:hover {
      background: #FFFFFF;
      border-color: var(--primary-blue);
      color: var(--primary-blue);
      box-shadow: 0 2px 8px rgba(47, 76, 138, 0.1);
      transform: translateY(-1px);
    }

    /* Botón de cerrar el menú móvil: solo tiene sentido dentro del drawer
       (.sidebar.mobile-open) por debajo de 900px — ver la regla que lo
       muestra más abajo. En escritorio se queda oculto siempre. */
    .mobile-close-sidebar-btn {
      display: none;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(224, 231, 255, 0.6);
      border-radius: 8px;
      width: 28px;
      height: 28px;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
    }

    /* min-height: 0 — sin esto el menú nunca se encoge por debajo de su
       contenido: en ventanas bajas (o con zoom) empujaba el pie del sidebar
       (usuario) fuera del borde inferior en vez de hacer scroll
       él mismo. .sidebar-top (logo + menú, templates/index.html) es el hijo
       flex de .sidebar: también tiene que poder encogerse y pasarle el
       espacio a .sidebar-nav. Encabezado y pie no se encogen. */
    .sidebar-top { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .sidebar-nav { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 20px; }
    .sidebar-header, .sidebar-footer { flex-shrink: 0; }
    /* Ventanas bajas: espaciado más compacto para que quepa todo el menú sin
       scroll. */
    @media (max-height: 760px) {
      .sidebar { padding-top: 18px; padding-bottom: 14px; }
      .sidebar-header { margin-bottom: 18px; }
      .sidebar-nav { gap: 12px; }
      .nav-item { padding-top: 8px; padding-bottom: 8px; }
      .sidebar .sidebar-footer { gap: 10px; margin-top: 12px; padding-top: 12px; }
    }
    .nav-section { display: flex; flex-direction: column; gap: 4px; }
    .nav-section-title { font-size: 11px; font-weight: 700; color: var(--text-subtle); letter-spacing: 0.05em; padding: 0 12px; margin-bottom: 6px; text-transform: uppercase; }

    .nav-item {
      display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-md);
      color: var(--text-muted); text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease;
    }
    .nav-item:hover { background-color: rgba(47, 76, 138, 0.08); color: var(--primary-blue); }
    .nav-item.active {
      background-color: rgba(255, 255, 255, 0.85);
      color: #2E1A47;
      font-weight: 700;
      border-radius: var(--radius-md);
      border: 1px solid rgba(47, 76, 138, 0.2);
      box-shadow: 0 4px 15px rgba(47, 76, 138, 0.1);
    }
    .nav-item svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 2; }

    .sidebar-footer { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); }
    .theme-toggle-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background-color: var(--bg-card); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }

    .user-profile-card { display: flex; align-items: center; justify-content: space-between; background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 10px; cursor: pointer; }
    .user-info { display: flex; align-items: center; gap: 10px; overflow: hidden; }
    .avatar-badge { width: 36px; height: 36px; border-radius: var(--radius-full); background-color: var(--primary-blue-light); color: var(--primary-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .user-details { display: flex; flex-direction: column; overflow: hidden; }
    .user-name { font-size: 13px; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .user-role { font-size: 11px; color: var(--text-muted); }
    .user-dept { font-size: 10px; color: var(--primary-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .sidebar.collapsed .logo-text, .sidebar.collapsed .nav-section-title, .sidebar.collapsed .nav-item span, .sidebar.collapsed .user-details, .sidebar.collapsed .user-chevron, .sidebar.collapsed .grid-btn { display: none; }
    .sidebar.collapsed .nav-item, .sidebar.collapsed .user-profile-card { justify-content: center; padding: 8px; }
    .sidebar.collapsed .sidebar-header { justify-content: center; padding: 0; }
    .sidebar.collapsed .logo-container { justify-content: center; }
    .sidebar.collapsed .toggle-sidebar-btn { position: relative; margin: 0 auto; width: 32px; height: 32px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 2px 6px rgba(0,0,0,0.05); z-index: 10; }
    .sidebar.collapsed .sidebar-footer { align-items: center; }

    /* ================= MAIN CONTENT WRAPPER ================= */
    /* min-width: 0 — <body> es flex y, sin esto, .main-wrapper nunca se
       encoge por debajo del ancho mínimo de su contenido: la tabla de
       Tratamientos (min-width: 1200px) lo ensanchaba más que la ventana y,
       con overflow-x: hidden en <body>, el lado derecho de toda la vista
       (encabezado, filtros, tabla) quedaba recortado en vez de que la tabla
       hiciera scroll dentro de .tratamientos-table-wrapper. */
    .main-wrapper {
      margin-left: calc(var(--sidebar-width) + 40px); flex: 1; min-width: 0; padding: 32px 40px 32px 20px;
      transition: margin-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1); max-width: 1800px;
    }
    .main-wrapper.sidebar-collapsed { margin-left: calc(var(--sidebar-collapsed-width) + 40px); }

    /* ================= PANTALLAS GRANDES =================
       Hasta ahora toda la responsividad de la app era hacia abajo (900px,
       768px, 600px, 480px) — nunca hacia arriba. En un monitor grande, un
       ultrawide, o simplemente al hacer zoom-out del navegador (que
       agranda el viewport efectivo en px CSS), el contenido se quedaba
       pegado al ancho fijo de 1800px con todo el resto de la pantalla en
       blanco. Estos dos escalones lo dejan aprovechar más espacio en vez
       de topar siempre con el mismo límite. */
    @media (min-width: 1920px) {
      .main-wrapper { max-width: 2200px; }
    }
    @media (min-width: 2560px) {
      .main-wrapper { max-width: 3000px; }
    }

    .page-view { display: none; animation: fadeIn 0.25s ease-in-out; }
    .page-view.active-view { display: block; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

    /* COMMON HEADERS y TABS */
    .dashboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 32px;
      gap: 20px;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .welcome-title {
      font-size: 26px;
      font-weight: 800;
      color: var(--text-main);
      letter-spacing: -0.5px;
      margin-bottom: 0;
    }
    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .header-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.6);
      border-radius: var(--radius-full);
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(31, 38, 135, 0.02);
    }
    .header-pill svg {
      color: var(--primary-blue);
      flex-shrink: 0;
    }
    .date-subtitle-container {
      display: flex;
      align-items: center;
      gap: 6px;
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      margin-top: 4px;
    }
    .date-subtitle-container svg {
      color: var(--primary-blue);
      flex-shrink: 0;
    }
    .header-profile-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.6);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(31, 38, 135, 0.02);
      transition: all 0.2s ease;
      color: var(--text-main);
    }
    .header-profile-avatar:hover {
      background: rgba(255, 255, 255, 0.85);
      transform: scale(1.05);
    }
    .header-profile-avatar svg { color: var(--text-main); }
    .tab-pills { display: inline-flex; background-color: rgba(226, 232, 240, 0.5); padding: 4px; border-radius: var(--radius-md); gap: 4px; margin-bottom: 24px; }
    [data-theme="dark"] .tab-pills { background-color: #1E293B; }
    .tab-btn { padding: 8px 20px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 700; cursor: pointer; text-transform: uppercase; }
    .tab-btn.active { background-color: var(--bg-card); color: var(--text-main); box-shadow: var(--shadow-subtle); }

    /* SUB-DASHBOARDS */
    .sub-dashboard { display: none; animation: fadeIn 0.2s ease-in-out; }
    .sub-dashboard.active-sub { display: block; }

    .metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 24px; }
    /* Inicio en pantallas medianas (laptops o navegador con zoom): con las 5
       tarjetas en una fila, ícono y texto lado a lado no cabían — "Citas Hoy"
       y "de 4 programadas" se partían en dos renglones. Ahí el ícono va
       arriba del texto y los textos no se parten. */
    .metric-label, .metric-pill { white-space: nowrap; }
    .metric-content { min-width: 0; }
    @media (min-width: 1201px) and (max-width: 1600px) {
      .metrics-grid { gap: 14px; }
      .metric-card { flex-direction: column; gap: 10px; padding: 16px; }
      .metric-icon-box { width: 38px; height: 38px; }
    }
    /* Encabezado: la fecha, la ciudad y la hora no se parten en dos renglones;
       si no caben junto al saludo, bajan a otra fila. */
    .dashboard-header { flex-wrap: wrap; }
    .header-left { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
    .header-right { flex-wrap: wrap; margin-left: auto; }
    .header-pill span, .date-subtitle-container span { white-space: nowrap; }
    .metric-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-card); display: flex; align-items: flex-start; gap: 16px; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
    .metric-card:hover { transform: translateY(-2px); }

    /* Tarjetas de métricas usadas como filtro de "Agenda de hoy" — Citas Hoy
       (todas) / Confirmadas / Pendientes / Canceladas. La tarjeta activa
       queda resaltada con el color primario para indicar qué filtro se está
       aplicando a la lista de abajo. */
    .metric-card-filter { cursor: pointer; }
    .metric-card-filter.metric-card-active { border-color: var(--primary-blue); box-shadow: 0 0 0 2px var(--primary-blue-light); }

    .metric-icon-box { width: 44px; height: 44px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .metric-icon-box.blue { background-color: var(--primary-blue-light); color: var(--primary-blue); }
    .metric-icon-box.green { background-color: var(--accent-green-bg); color: var(--accent-green); }
    .metric-icon-box.orange { background-color: var(--accent-orange-bg); color: var(--accent-orange); }
    .metric-icon-box.red { background-color: var(--accent-red-bg); color: var(--accent-red); }
    .metric-icon-box.purple { background-color: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
    [data-theme="dark"] .metric-icon-box.purple { background-color: rgba(139, 92, 246, 0.18); }

    .metric-content { display: flex; flex-direction: column; gap: 4px; }
    .metric-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
    .metric-value { font-size: 26px; font-weight: 800; color: var(--text-main); line-height: 1.2; }

    .metric-pill { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; width: fit-content; }
    .metric-pill.grey { background-color: var(--bg-main); color: var(--text-muted); border: 1px solid var(--border-color); }
    .metric-pill.green { background-color: var(--accent-green-pill); color: var(--accent-green-text); }
    .metric-pill.red { background-color: var(--accent-red-bg); color: var(--accent-red); }

    .dashboard-grid { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 20px; }
    .dashboard-grid-equal { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

    /* Dona "Estado de citas hoy" */
    .dash-donut-body { align-items: center; gap: 20px; }
    .dash-donut-wrap { position: relative; width: 100%; max-width: 190px; aspect-ratio: 1 / 1; margin: 0 auto; }
    .dash-donut-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
    .dash-donut-center-value { font-size: 24px; font-weight: 800; color: var(--text-main); line-height: 1.1; }
    .dash-donut-center-label { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
    .dash-donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; }
    .dash-donut-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); font-weight: 600; }
    .dash-donut-legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .grid-column { display: flex; flex-direction: column; gap: 20px; }

    .content-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; overflow: hidden; }
    .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
    .card-title-group { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text-main); }
    .card-title-group svg { width: 18px; height: 18px; color: var(--primary-blue); }
    .card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }

    .activity-boxes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .activity-stat-box { background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: center; gap: 14px; }
    .activity-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background-color: var(--primary-blue-light); color: var(--primary-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .activity-info { display: flex; flex-direction: column; }
    .activity-num { font-size: 20px; font-weight: 800; color: var(--text-main); line-height: 1; }
    .activity-name { font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 2px; }

    .timeline-list { display: flex; flex-direction: column; gap: 0; }
    .timeline-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border-color); }
    .timeline-item:last-child { border-bottom: none; }
    .timeline-left { display: flex; align-items: center; gap: 12px; }
    .timeline-icon { width: 32px; height: 32px; border-radius: 50%; background-color: var(--accent-green-bg); color: var(--accent-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .timeline-icon.blue { background-color: var(--primary-blue-light); color: var(--primary-blue); }
    .timeline-icon.red { background-color: var(--accent-red-bg); color: var(--accent-red); }
    .timeline-icon.orange { background-color: var(--accent-orange-bg); color: var(--accent-orange); }
    .timeline-icon.purple { background-color: rgba(139, 92, 246, 0.12); color: #8B5CF6; }
    .timeline-icon.pink { background-color: rgba(219, 39, 119, 0.12); color: #DB2777; }
    .timeline-icon.gray { background-color: rgba(100, 116, 139, 0.12); color: #64748B; }
    .timeline-details { display: flex; flex-direction: column; }
    .timeline-title { font-size: 13px; font-weight: 700; color: var(--text-main); }
    .timeline-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
    .timeline-time { font-size: 11px; color: var(--text-subtle); font-weight: 500; }

    .table-container { width: 100%; overflow-x: auto; }
    .custom-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
    .custom-table th { padding: 12px 16px; font-size: 11px; font-weight: 700; color: var(--text-subtle); letter-spacing: 0.05em; border-bottom: 1px solid var(--border-color); text-transform: uppercase; }
    .custom-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-main); font-weight: 500; white-space: nowrap; }
    .custom-table tbody tr:hover { background-color: rgba(37, 99, 235, 0.02); }

    .badge-pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: 10px; font-weight: 800; letter-spacing: 0.03em; }
    .badge-pill.salida { background-color: #FEF2F2; color: #EF4444; }
    .badge-pill.listo { background-color: #DCFCE7; color: #15803D; }
    .badge-pill.sin-cobrar { background-color: #FEF2F2; color: #EF4444; }
    .badge-pill.en-proceso { background-color: #EFF6FF; color: #2563EB; }

    .link-action { color: var(--primary-blue); font-weight: 700; text-decoration: none; cursor: pointer; }
    .link-action:hover { text-decoration: underline; }

    /* ================= PACIENTES DIRECTORY ================= */
    /* flex-wrap: mismo motivo que .filter-row (ver ahí) — sin esto, el
       grupo de botones (ej. "No validados" + "+ Agregar Tratamiento" en
       Tratamientos) se salía del ancho disponible y quedaba recortado sin
       forma de llegar a verlo (overflow-x:hidden en html/body). Con wrap,
       ese grupo baja debajo del título en vez de desaparecer. */
    .pacientes-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
    .pacientes-title-group h1 { font-size: 28px; font-weight: 800; color: var(--primary-blue); }
    .pacientes-title-group span { font-size: 11px; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; }
    .btn-primary { background-color: var(--primary-blue); color: #FFFFFF; border: none; padding: 10px 20px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }

    .search-filter-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 24px 28px; margin-bottom: 28px; display: flex; align-items: center; gap: 40px; }
    .search-radio-group { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
    .search-label { font-size: 13px; font-weight: 700; color: var(--text-main); }
    .radio-option { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); cursor: pointer; }
    .radio-option input { accent-color: var(--primary-blue); }

    .search-input-wrapper { flex: 1; position: relative; display: flex; align-items: center; }
    .search-input-wrapper input { width: 100%; height: 44px; padding: 10px 50px 10px 18px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 14px; outline: none; }
    .search-btn { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); margin: 0; padding: 0; width: 32px; height: 32px; background: transparent; color: var(--primary-blue); border: none; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; line-height: 0; cursor: pointer; transition: color 0.2s, transform 0.15s ease; }
    .search-btn:hover { color: #1d4ed8; transform: translateY(-50%) scale(1.1); }
    .search-btn svg { display: block; }

    .patient-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .patient-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transition: transform 0.2s ease; cursor: pointer; }
    .patient-card:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.3); }
    .patient-card-header { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; }
    .patient-id { font-size: 12px; font-weight: 600; color: var(--text-subtle); }
    .status-badge-active { background-color: var(--accent-green-pill); color: var(--accent-green-text); font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); }
    .patient-card-body { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
    .patient-avatar { width: 64px; height: 64px; border-radius: 50%; background-color: var(--primary-blue); color: #FFFFFF; font-size: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
    .patient-name { font-size: 14px; font-weight: 800; color: var(--text-main); text-transform: uppercase; line-height: 1.35; min-height: 38px; display: flex; align-items: center; justify-content: center; }
    .patient-card-footer { padding: 16px; background-color: var(--bg-main); border-top: 1px solid var(--border-color); display: flex; justify-content: center; }
    .btn-view-patient { background-color: var(--bg-card); border: 1px solid var(--primary-blue); color: var(--primary-blue); padding: 6px 16px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; }

    /* ================= PACIENTE DETAIL y EXPEDIENTE ================= */
    .patient-detail-header { margin-bottom: 24px; }
    .patient-top-card { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
    
    .patient-avatar-large {
      width: 90px; height: 90px; border-radius: 50%; background-color: #E2E8F0;
      display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0;
    }
    
    .avatar-camera-btn {
      position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-radius: 50%;
      background-color: #1D4ED8; color: white; border: 2px solid #FFFFFF;
      display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    .avatar-camera-btn svg { width: 14px; height: 14px; fill: white; }

    .patient-title-group h2 { font-size: 24px; font-weight: 800; color: var(--text-main); text-transform: uppercase; margin-bottom: 4px; }
    .patient-title-group p { font-size: 14px; color: var(--text-muted); }

    .patient-info-pills-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .info-pill-box {
      background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
      padding: 16px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-card);
    }
    
    .info-pill-icon-container {
      width: 42px; height: 42px; border-radius: var(--radius-md); background-color: #F1F5F9;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    
    .info-pill-content { display: flex; flex-direction: column; flex: 1; }
    .info-pill-label { font-size: 11px; color: var(--text-subtle); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .info-pill-value { font-size: 13px; font-weight: 800; color: var(--text-main); margin-top: 2px; }

    .pill-edit-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 6px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      opacity: 0.6;
      transition: all 0.2s ease;
    }
    .pill-edit-btn:hover {
      opacity: 1;
      color: var(--primary-blue);
      background-color: var(--primary-blue-light);
    }

    .patient-actions-row { display: flex; gap: 16px; margin-bottom: 28px; }
    .btn-action-pill {
      background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-full);
      padding: 10px 24px; font-size: 13px; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 10px; cursor: pointer;
      box-shadow: var(--shadow-card); transition: all 0.2s ease; text-decoration: none;
    }
    .btn-action-pill:hover { border-color: var(--primary-blue); color: var(--primary-blue); }

    .accordion-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
    .accordion-item { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); }
    .accordion-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
    .accordion-title { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 700; color: var(--text-main); }
    .accordion-title svg { width: 20px; height: 20px; color: var(--primary-blue); }
    .accordion-badge { font-size: 11px; font-weight: 700; background-color: var(--bg-main); color: var(--text-muted); border: 1px solid var(--border-color); padding: 2px 10px; border-radius: var(--radius-full); }
    .accordion-content { padding: 0 24px 24px 24px; display: none; border-top: 1px solid var(--border-color); margin-top: 10px; padding-top: 20px; }
    .accordion-item.open .accordion-content { display: block; }
    .accordion-item.open .accordion-chevron { transform: rotate(180deg); }

    .sticky-bottom-save-container { display: flex; justify-content: center; margin-bottom: 48px; margin-top: 12px; }
    .btn-save-floating { background-color: var(--primary-blue); color: white; border: none; padding: 14px 40px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35); cursor: pointer; transition: all 0.2s ease; }
    .btn-save-floating:hover { background-color: var(--primary-blue-hover); transform: translateY(-2px); }

    .expediente-scroll-section { border-top: 2px dashed var(--border-color); padding-top: 40px; margin-top: 20px; }
    .expediente-header { margin-bottom: 20px; }
    .expediente-title-group { display: flex; align-items: center; gap: 12px; }
    .expediente-title-group h1 { font-size: 22px; font-weight: 800; color: var(--text-main); }
    
    .expediente-subtabs-bar { display: flex; gap: 12px; border-bottom: 1px solid var(--border-color); overflow-x: auto; padding-bottom: 8px; margin-bottom: 24px; }
    .expediente-subtab { padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; transition: all 0.2s ease; }
    .expediente-subtab.active { color: var(--primary-blue); border-bottom-color: var(--primary-blue); }

    /* Cada pestaña del expediente (Historia Clínica, Notas, Aseguradoras,
       etc.) tenía un alto totalmente distinto según cuánto contenido real
       traía — una vacía junto a una larga con muchos registros. Al cambiar
       de una a otra, la página encogía o crecía de golpe y el navegador
       recortaba el scroll al nuevo máximo, sintiéndose como un brinco fuerte
       (intentar corregirlo solo reposicionando el scroll en el momento del
       clic no resolvía el fondo del problema: igual saltaba, solo que
       siempre al mismo lugar). Con una altura mínima compartida, cambiar de
       pestaña ya no cambia tan bruscamente el alto total de la página. */
    .expediente-tab-content { min-height: 60vh; }
    .expediente-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; }
    .expediente-sidebar { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; justify-content: flex-start; box-shadow: var(--shadow-card); position: sticky; top: 100px; align-self: start; }
    .expediente-sidebar-title { font-size: 11px; font-weight: 800; color: var(--text-subtle); letter-spacing: 0.05em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .hc-sections-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: 480px; padding-right: 4px; }
    /* Pestaña "Archivos" del expediente — antes listaba TODOS los archivos
       del paciente sin límite; con 30-50 archivos subidos la columna se
       volvía enorme. Se topa la altura a ~5 tarjetas visibles (.file-card
       mide ~68px con su margin-bottom) y el resto se ve haciendo scroll
       dentro del propio contenedor, en vez de que crezca la página entera. */
    #archivosListContainer { max-height: 340px; overflow-y: auto; padding-right: 4px; }
    /* Igual que en la pestaña Notas (ver más abajo): la izquierda se estira
       para poder medirse por JS, y la derecha (#archivoPreviewCard) toma esa
       misma altura via syncArchivoPreviewCardHeight en vez de una altura fija
       en CSS, para que ambas columnas queden siempre parejas sin importar
       cuántos archivos haya en la lista ni cuánto contenido tenga la vista
       previa. */
    #tab-archivos .expediente-sidebar { align-self: stretch; }
    #archivoPreviewCard { overflow-y: auto; }
    .hc-section-item { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; }
    .hc-section-item:hover { background-color: var(--bg-main); color: var(--primary-blue); }
    .hc-section-item.active { background-color: var(--primary-blue); color: white; }

    /* Pestaña "Notas" del expediente — con muchas consultas/notas la lista
       izquierda crecía sin límite y terminaba más alta que la tarjeta de
       edición de la derecha ("disparejos"). La izquierda topa a ~5
       tarjetas visibles (.file-card acá mide ~95px con su margin-bottom,
       por las 4 líneas de texto que trae — tipo, paciente, médico y
       fecha) con scroll para ver el resto. La derecha (#consultaDetailCard)
       NO lleva una altura fija en CSS a propósito: un valor fijo (ej. los
       540px de .hc-section-content) no necesariamente coincide con lo que
       mide esta columna izquierda una vez que suma buscador + filtro +
       botón + lista topada — así que su alto se sincroniza por JS al de
       .expediente-sidebar (ver syncConsultaDetailCardHeight en app.js) para
       que ambas columnas midan exactamente lo mismo. overflow-y:auto es lo
       único que sí hace falta aquí para que ese alto (el que sea) scrollee
       en vez de desbordarse. */
    #tab-consultas .expediente-sidebar { align-self: stretch; }
    #consultasListContainer { max-height: 470px; overflow-y: auto; padding-right: 4px; }
    #consultaDetailCard { overflow-y: auto; }

    /* Pestañas "Órdenes Médicas" y "Recetas" — mismo criterio que Notas de
       arriba: la lista izquierda topa altura con scroll interno en vez de
       crecer sin límite, y la derecha (labOrderDetailPanel/recipeDetailCard)
       se sincroniza por JS al alto real de .expediente-sidebar (ver
       syncLabOrderDetailPanelHeight/syncRecipeDetailCardHeight en app.js). */
    #tab-laboratorio .expediente-sidebar { align-self: stretch; }
    #labOrdersListContainer { max-height: 470px; overflow-y: auto; padding-right: 4px; }
    #labOrderDetailPanel { overflow-y: auto; }

    #tab-recetas .expediente-sidebar { align-self: stretch; }
    #recipesListContainer { max-height: 470px; overflow-y: auto; padding-right: 4px; }
    #recipeDetailCard { overflow-y: auto; }

    .expediente-sidebar-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-color); }
    .btn-hc-action { width: 100%; padding: 8px; border-radius: var(--radius-md); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
    .btn-hc-action.red-outline { border: 1px solid #EF4444; color: #EF4444; background: transparent; }
    .btn-hc-action.blue-outline { border: 1px solid var(--primary-blue); color: var(--primary-blue); background: transparent; }
    .btn-hc-action.blue-filled { border: none; color: white; background: var(--primary-blue); }

    /* .expediente-editor-card se reusa para MUCHAS tarjetas distintas
       (Notas/#consultaDetailCard, Recetas, Esquemas, Órdenes de laboratorio,
       Archivos...) que sí deben crecer libremente con su contenido — la
       altura fija es SOLO para las 9 secciones de Historia Clínica
       (.hc-section-content), ver esa regla más abajo. */
    .expediente-editor-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-card); display: flex; flex-direction: column; padding: 24px; min-height: 540px; }

    /* height fija (no min-height) + scroll interno — antes cada sección de
       Historia Clínica cambiaba el alto real del contenedor según su propia
       cantidad de campos, haciendo que la página "saltara" al navegar entre
       secciones (ej. de "Motivo de Consulta", corta, a "Exploración", larga). */
    .expediente-editor-card.hc-section-content { height: 540px; overflow-y: auto; }

    /* Animación suave al cambiar de sección HC */
    @keyframes hcFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .hc-fade-in {
      animation: hcFadeIn 0.25s ease-out forwards;
    }
    .editor-top-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; }
    .editor-title-box { display: flex; align-items: center; gap: 12px; }
    .editor-title-box h2 { font-size: 16px; font-weight: 800; color: var(--text-main); text-transform: uppercase; }
    .badge-borrador { background-color: #FEF3C7; color: #D97706; font-size: 10px; font-weight: 800; padding: 2px 10px; border-radius: var(--radius-full); }

    .btn-record-mic { background-color: #E3EAF6; border: 1px solid #C9D6EC; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: #2F4C8A; display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .btn-record-mic:hover { background-color: #C9D6EC; }
    /* El svg de Limpiar se encogía a 1x1px como hijo flex del botón (sin flex-shrink:0 el icono desaparece). */
    .btn-clear-hc-field svg { flex-shrink: 0; width: 13px; height: 13px; }
    /* Ocultos a pedido: la función de dictado por voz de Historia Clínica
       (botón "Grabar"/"Grabar audio" junto a cada campo) queda apagada en
       toda la app. :not(.btn-clear-hc-field) porque el botón "Limpiar"
       (initializeHCClearButtons en app.js) reutiliza esta misma clase solo
       por el estilo de píldora — ocultarla completa se habría llevado
       también a "Limpiar". */
    .btn-record-mic:not(.btn-clear-hc-field),
    .btn-record-audio {
      display: none !important;
    }
    .editor-textarea { width: 100%; height: 260px; padding: 16px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-card); color: var(--text-main); font-size: 14px; outline: none; resize: vertical; margin-top: 16px; }
    /* Sin esto el placeholder ("Ej: ...") se ve casi igual de oscuro que un
       valor real ya escrito, y se confunde con contenido ya guardado por
       default en vez de solo un ejemplo — pasa en cualquier .editor-textarea,
       lo más notorio en Premedicación/Postmedicación Estándar de la receta
       oncológica por lo largo del texto de ejemplo. */
    .editor-textarea::placeholder { color: var(--text-muted); opacity: 0.6; font-style: italic; }

    /* ================= EDITOR DE TEXTO ENRIQUECIDO (.rich-text-editor) =================
       Reemplaza un <textarea> por un contenteditable + barra de herramientas
       (fuente, tamaño, negrita/cursiva/tachado, color de texto/resaltado,
       alineación, listas). El contenido vive en un div[contenteditable] con
       el mismo id que antes tenía el <textarea> — el resto del código lee/
       escribe su HTML con .innerHTML en vez de .value. */
    .rich-text-editor { width: 100%; margin-top: 8px; container-type: inline-size; }
    .rich-text-toolbar {
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
      background: var(--bg-main); border: 1px solid var(--border-color);
      border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0;
      padding: 8px 10px; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
    }
    /* Los <select>/<input> de esta barra sobreescriben con !important el
       select{} y input{} genéricos de la app (pensados para campos de
       formulario grandes, con hasta 40px de padding derecho reservado para
       su propia flecha) — sin este !important, esas reglas genéricas ganan
       por ser más específicas que las de abajo... salvo que también sean
       !important, así que hay que igualar esa especificidad para que el
       tamaño compacto de esta barra de herramientas realmente se aplique
       (si no, el texto de la fuente/tamaño queda invisible: la caja se
       vuelve angosta con el sobrante de esos 40px de padding fantasma). */
    .rich-text-toolbar select.rt-cmd-select {
      flex: 0 0 auto !important;
      height: 30px !important;
      padding: 0 8px !important;
      border: 1px solid var(--border-color) !important;
      border-radius: var(--radius-sm) !important;
      background-color: var(--bg-card) !important;
      background-image: none !important;
      appearance: auto !important; -webkit-appearance: menulist !important; -moz-appearance: menulist !important;
      color: var(--text-main) !important;
      font-size: 12px !important; font-weight: 600 !important;
      box-shadow: none !important; transform: none !important;
      cursor: pointer;
    }
    /* El <select> nativo de esta barra NO se envuelve con el widget de
       select personalizado de la app a propósito (ver enhanceCustomSelect:
       envolverlo rompía su tamaño compacto en una barra angosta) — su lista
       desplegable queda con el estilo nativo del navegador. background-color
       en las <option> SÍ es respetado por Chrome/Edge (no por Firefox/Safari,
       que ignoran estilos de <option> en el popup nativo), así que al menos
       en esos dos se ve la opción activa con el morado de la app en vez del
       gris genérico por defecto. */
    .rich-text-toolbar select.rt-cmd-select option {
      background-color: var(--bg-card);
      color: var(--text-main);
    }
    .rich-text-toolbar select.rt-cmd-select option:checked {
      background-color: #2F4C8A;
      color: #FFFFFF;
    }
    .rich-text-toolbar select.rt-cmd-select[data-cmd="fontName"] { width: 132px !important; }
    .rich-text-toolbar select.rt-cmd-select[data-cmd="fontSize"] { width: 60px !important; }
    /* Este toolbar se diseñó para un editor a ancho completo (un modal, una
       sección de Historia Clínica de una sola columna) — metido en un
       contenedor angosto (ej. las tarjetas de 3 columnas de Aparatos y
       Sistemas, ~220-260px de ancho real) el <select> de fuente (132px) ya
       ocupa casi todo el ancho disponible él solo, así que flex-wrap no
       logra acomodar más de un control por fila: el toolbar completo
       terminaba apilado en una sola columna altísima en vez de 2-3 filas
       compactas. .rich-text-editor trae container-type:inline-size para
       que esta regla reaccione al ancho real del editor, sin importar si
       está en un modal ancho o en una tarjeta angosta. */
    @container (max-width: 300px) {
      .rich-text-toolbar select.rt-cmd-select[data-cmd="fontName"] { width: 96px !important; }
      .rich-text-toolbar select.rt-cmd-select[data-cmd="fontSize"] { width: 48px !important; }
    }
    /* Widget compacto (enhanceRichTextSelect en app.js) que reemplaza
       visualmente el <select> nativo de arriba — mismo lenguaje visual que
       .custom-select-container/.custom-select-menu del resto de la app
       (morado, bordes redondeados, opción resaltada), pero a la escala de
       una barra de herramientas de 30px de alto en vez de un campo de
       formulario. El <select> real sigue existiendo oculto (display:none
       puesto por JS) como fuente de verdad. */
    .rich-text-toolbar .rt-select-container {
      position: relative;
      flex: 0 0 auto;
    }
    .rich-text-toolbar .rt-select-trigger {
      height: 30px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 0 8px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      background-color: var(--bg-card);
      color: var(--text-main);
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      box-sizing: border-box;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .rich-text-toolbar .rt-select-container[data-cmd="fontName"] .rt-select-trigger { width: 132px; }
    .rich-text-toolbar .rt-select-container[data-cmd="fontSize"] .rt-select-trigger { width: 60px; }
    @container (max-width: 300px) {
      .rich-text-toolbar .rt-select-container[data-cmd="fontName"] .rt-select-trigger { width: 96px; }
      .rich-text-toolbar .rt-select-container[data-cmd="fontSize"] .rt-select-trigger { width: 48px; }
    }
    .rich-text-toolbar .rt-select-trigger:hover {
      border-color: var(--primary-blue);
      background-color: rgba(47, 76, 138, 0.04);
    }
    .rich-text-toolbar .rt-select-container.is-open .rt-select-trigger {
      border-color: var(--primary-blue);
      box-shadow: 0 0 0 3px rgba(47, 76, 138, 0.15);
    }
    .rich-text-toolbar .rt-select-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      text-align: left;
    }
    .rich-text-toolbar .rt-select-arrow {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--primary-blue);
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .rich-text-toolbar .rt-select-container.is-open .rt-select-arrow { transform: rotate(180deg); }
    .rich-text-toolbar .rt-select-menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      width: max-content;
      min-width: 100%;
      max-width: 220px;
      z-index: 999999;
      background-color: #FFFFFF;
      border: 1.5px solid rgba(47, 76, 138, 0.25);
      border-radius: var(--radius-md);
      box-shadow: 0 12px 32px rgba(47, 76, 138, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
      padding: 4px;
      max-height: 220px;
      overflow-y: auto;
      opacity: 0;
      visibility: hidden;
      transform: scale(0.96) translateY(-6px);
      transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.15s ease;
      pointer-events: none;
      box-sizing: border-box;
    }
    .rich-text-toolbar .rt-select-container.is-open .rt-select-menu {
      opacity: 1;
      visibility: visible;
      transform: scale(1) translateY(0);
      pointer-events: auto;
    }
    .rich-text-toolbar .rt-select-option {
      padding: 6px 10px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-main);
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
      margin-bottom: 1px;
    }
    .rich-text-toolbar .rt-select-option:last-child { margin-bottom: 0; }
    .rich-text-toolbar .rt-select-option:hover { background-color: #F3E8FF; color: #1C2F57; }
    .rich-text-toolbar .rt-select-option.selected {
      background: #E3EAF6;
      color: #5B21B6;
      font-weight: 800;
      border-left: 3px solid var(--primary-blue);
    }
    .rich-text-toolbar button.rt-cmd-btn {
      flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center;
      justify-content: center; border: 1px solid transparent; border-radius: var(--radius-sm);
      background: transparent; color: var(--text-main); cursor: pointer; font-size: 13px;
    }
    .rich-text-toolbar button.rt-cmd-btn:hover { background: var(--bg-card); border-color: var(--border-color); }
    .rich-text-toolbar button.rt-cmd-btn.active { background: #E3EAF6; border-color: #C9D6EC; color: #2F4C8A; }
    .rich-text-toolbar .rt-sep { flex: 0 0 auto; width: 1px; height: 20px; background: var(--border-color); margin: 0 2px; }
    /* .form-group input:not([type="checkbox"]) (más abajo en este mismo
       archivo) tiene EXACTA la misma especificidad que este selector
       (.clase + input + :not([attr])), así que sin !important gana esa
       regla por venir después en el archivo — cuando este color picker
       vive dentro de un .form-group (ej. "Crear Orden Médica"), su
       width:100%/height:44px lo convertía en una barra gigante en vez del
       swatch de 26x26px que sí se ve bien en modales sin ese wrapper. */
    .rich-text-toolbar input.rt-cmd-color {
      flex: 0 0 auto !important; width: 26px !important; height: 26px !important; padding: 0 !important; border: 1px solid var(--border-color) !important;
      border-radius: var(--radius-sm) !important; background: var(--bg-card) !important; cursor: pointer;
    }
    /* Botones de color estilo Word/PowerPoint (icono arriba + barra delgada
       de color abajo, en vez del cuadro de color suelto de antes) — el
       <input type="color"> real sigue siendo el elemento clicable (mismo
       "input" listener de siempre, sin JS nuevo), solo se le quita el look
       nativo de cuadro y se reduce a una barra de 4px que SÍ refleja el
       color elegido (a diferencia de un div decorativo, no se puede
       desincronizar). Selector con 3 clases (más específico que
       .rich-text-toolbar input.rt-cmd-color de arriba) + !important para
       ganarle a esa regla sin importar el orden en que caigan en el
       archivo. */
    .rich-text-toolbar .rt-color-icon-group {
      display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 3px 5px; border-radius: var(--radius-sm); cursor: pointer;
    }
    .rich-text-toolbar .rt-color-icon-group:hover { background: var(--bg-card); }
    .rich-text-toolbar .rt-color-icon-group .rt-color-icon-label {
      display: flex; align-items: center; justify-content: center; height: 13px;
      font-size: 12px; font-weight: 800; line-height: 1; color: var(--text-main);
    }
    .rich-text-toolbar .rt-color-icon-group .rt-color-icon-underline {
      text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 1px;
    }
    .rich-text-toolbar .rt-color-icon-group input.rt-cmd-color {
      -webkit-appearance: none !important; appearance: none !important;
      width: 20px !important; height: 4px !important; padding: 0 !important;
      border: none !important; border-radius: 2px !important; background: none !important;
    }
    .rich-text-toolbar .rt-color-icon-group input.rt-cmd-color::-webkit-color-swatch-wrapper { padding: 0; }
    .rich-text-toolbar .rt-color-icon-group input.rt-cmd-color::-webkit-color-swatch { border: none; border-radius: 2px; }
    .rich-text-toolbar .rt-color-icon-group input.rt-cmd-color::-moz-color-swatch { border: none; border-radius: 2px; }
    .rich-text-content {
      min-height: 120px; max-height: 420px; overflow-y: auto; padding: 12px 14px;
      border: 1px solid var(--border-color); border-radius: 0 0 var(--radius-md) var(--radius-md);
      background: var(--bg-card); color: var(--text-main); font-size: 13px; line-height: 1.6; outline: none;
    }
    .rich-text-content:empty::before { content: attr(data-placeholder); color: var(--text-muted); opacity: 0.6; font-style: italic; }
    .rich-text-content ul, .rich-text-content ol { padding-left: 22px; margin: 6px 0; }
    /* Estado bloqueado (contentEditable="false") — mismo look que un
       input/textarea disabled, ver setNoteFormLocked / chk-explora-toggle. */
    .rich-text-content[contenteditable="false"] { opacity: 0.65; background-color: #F8FAFC; cursor: not-allowed; }
    .rich-text-editor:has(.rich-text-content[contenteditable="false"]) .rich-text-toolbar { opacity: 0.5; pointer-events: none; }

    .editor-bottom-pagination { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
    .btn-nav-page { background: var(--bg-main); border: 1px solid var(--border-color); padding: 8px 16px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; }

    /* ================= AGENDA / CITAS VIEW ================= */
    .agenda-card {
      background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md);
      box-shadow: var(--shadow-card); padding: 20px; margin-bottom: 20px;
    }
    .agenda-top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
    .agenda-date-badge-box { display: flex; align-items: center; gap: 16px; }
    .date-badge-mini {
      width: 50px; height: 50px; border-radius: var(--radius-sm); border: 1px solid var(--border-color);
      display: flex; flex-direction: column; overflow: hidden; text-align: center; background: var(--bg-card); flex-shrink: 0;
    }
    .date-badge-mini-header { background-color: var(--primary-blue); color: white; font-size: 9px; font-weight: 800; padding: 2px 0; text-transform: uppercase; }
    .date-badge-mini-num { font-size: 18px; font-weight: 800; color: var(--text-main); line-height: 1.1; margin-top: 2px; }
    .date-badge-mini-sub { font-size: 7px; color: var(--text-muted); font-weight: 700; }

    .agenda-title-controls { display: flex; flex-direction: column; gap: 4px; }
    .agenda-title-row { display: flex; align-items: center; gap: 8px; }
    .agenda-title-row h2 { font-size: 18px; font-weight: 800; color: var(--text-main); }
    .citas-count-pill { background-color: var(--bg-main); border: 1px solid var(--border-color); font-size: 10px; font-weight: 700; color: var(--text-muted); padding: 2px 8px; border-radius: 10px; }

    .agenda-date-nav { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
    .agenda-nav-btn { background: transparent; border: 1px solid var(--border-color); border-radius: 4px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted); }
    .agenda-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    @keyframes agendaHoySlideIn { from { opacity: 0; transform: translateX(-40px) scale(0.95); } to { opacity: 1; transform: translateX(0) scale(1); } }
    #agendaHoyBody > *, #citasMesModalBody > * { animation: agendaHoySlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
    /* La entrada (agendaHoySlideIn) ya animaba al cargar la lista, pero cada
       tarjeta se quedaba sin ninguna respuesta al pasar el mouse — mismo
       lenguaje que .file-card:hover/.btn-anim-lift para el resto de tarjetas
       y botones. La transition vive acá (clase base) y NO en el inline-style
       del JS para que no colisione con la animation que aplica el selector
       #agendaHoyBody > *. Eso solo no bastaba: animation-fill-mode "both"
       deja el transform final de la animación "sostenido" sobre el elemento
       para siempre, y ese transform sostenido por la animation le gana al
       transform que dispara esta transition en :hover, así que el salto no
       se veía. El JS (renderAgendaHoyList) apaga la animation por completo
       en animationend para devolver el control del transform a esta
       transition. */
    .agenda-hoy-item { transition: transform 0.18s ease, box-shadow 0.18s ease; }
    .agenda-hoy-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

    .agenda-view-mode-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .mode-pills-bar { display: flex; background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
    .mode-pill-btn { padding: 6px 14px; border: none; background: transparent; font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; border-radius: 4px; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; }
    .mode-pill-btn.active { background-color: var(--bg-card); color: var(--text-main); box-shadow: var(--shadow-subtle); }

    .agenda-filters-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border-color); flex-wrap: wrap; }
    .status-pills-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .status-filter-tag { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; color: white; display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .status-filter-tag.nuevo { background-color: #2563EB; }
    .status-filter-tag.aprobado { background-color: #10B981; }
    .status-filter-tag.rechazado { background-color: #EF4444; }
    .status-filter-tag.pendiente { background-color: #F97316; }
    .status-filter-tag.desfasado { background-color: #DB2777; }
    .status-filter-tag.en_progreso { background-color: #8B5CF6; }
    .status-filter-tag.finalizado { background-color: #64748B; }

    .doctor-select-dropdown { padding: 8px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-card); color: var(--text-muted); font-size: 12px; font-weight: 600; outline: none; cursor: pointer; }

    /* CALENDAR GRID VIEWS */
    .calendar-body-container { border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); }
    
    .week-grid-header { display: grid; grid-template-columns: 80px repeat(7, 1fr); border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); text-align: center; }
    .day-grid-header { display: grid; grid-template-columns: 80px 1fr; border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); text-align: center; }
    .week-day-col-header { padding: 12px 6px; font-size: 12px; font-weight: 700; color: var(--text-muted); border-right: 1px solid var(--border-color); }
    .week-day-col-header:last-child { border-right: none; }
    /* Mismo criterio que Outlook: la columna del día de hoy se distingue del
       resto del encabezado (ver renderWeekMode/renderDayMode en app.js) —
       antes las columnas de Semana/Día se veían todas idénticas. */
    .week-day-col-header.is-today { color: var(--primary-blue); background-color: rgba(37, 99, 235, 0.08); }
    .week-day-col-header.is-today strong {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 20px; height: 20px; padding: 0 4px; margin-left: 2px;
      border-radius: 50%; background-color: var(--primary-blue); color: #FFFFFF;
    }

    /* position:relative — ancla del overlay de citas (.week-events-overlay/
       .day-events-overlay) que se superpone a estas filas; ver más abajo. */
    .timeline-rows-container { display: flex; flex-direction: column; position: relative; }
    /* height fija (antes min-height): las filas ya no alojan las citas
       adentro (eso ahora vive en el overlay superpuesto), así que no
       necesitan crecer con contenido — con una altura fija el overlay
       puede calcular en píxeles, a partir de esta misma altura, dónde cae
       cada hora/minuto exactamente. */
    /* 68px (antes 52px) — con varias citas traslapadas repartidas en
       columnas lado a lado (ver buildTimedEventLayout/applyTimedPillLayout
       en app.js), cada tarjeta ya es angosta de por sí; una fila más alta le
       da más aire vertical para que el texto (paciente, estado, doctor,
       hora) no se sienta amontonado. Si se cambia este valor, actualizar
       también el fallback "rows.length * 68" en renderWeekMode/renderDayMode
       (app.js) para que el cálculo en píxeles del overlay no se desfase. */
    .timeline-row { display: grid; grid-template-columns: 80px repeat(7, 1fr); border-bottom: 1px solid var(--border-color); height: 68px; }
    .timeline-row-day { display: grid; grid-template-columns: 80px 1fr; border-bottom: 1px solid var(--border-color); height: 68px; }
    .time-cell-label { padding: 8px 12px; font-size: 11px; font-weight: 700; color: var(--text-subtle); border-right: 1px solid var(--border-color); background-color: var(--bg-main); text-align: right; }
    .time-cell-slot { border-right: 1px solid var(--border-color); position: relative; overflow: hidden; padding: 2px; box-sizing: border-box; }
    .time-cell-slot:last-child { border-right: none; }

    /* Overlay de citas de Semana/Día — ver renderWeekMode/renderDayMode
       (buildTimedEventLayout). Se superpone exactamente sobre las filas de
       arriba (mismas grid-template-columns) para que cada cita se dibuje en
       la posición real de su hora de inicio/fin, en vez de encajonada
       dentro de una sola celda de una hora — y para que varias citas del
       mismo día que se traslapan en horario se acomoden en columnas lado a
       lado (como Outlook, ver applyTimedPillLayout) en vez de dibujarse
       exactamente en el mismo punto. pointer-events:none deja pasar el
       clic en el espacio vacío hasta .time-cell-slot (para agendar una
       cita nueva); solo la pastilla de cada cita (pointer-events:auto) lo
       captura. */
    .week-events-overlay, .day-events-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      /* grid-template-rows: 1fr (no solo "una sola fila implícita") es lo
         que de verdad hace que .day-events-col ocupe el 100% del alto del
         overlay — sin esto, una fila implícita "auto" se dimensiona por su
         contenido, y como las citas dentro de .day-events-col están en
         position:absolute (fuera del flujo, no cuentan para ese cálculo),
         la fila colapsaba a ~0px de alto. Con esa fila en 0, el top/alto en
         % de CADA cita (relativo a .day-events-col) también resolvía a 0,
         así que todas las citas del día quedaban apiladas exactamente en el
         mismo punto (top:0) sin importar su hora real — de ahí el "se
         empalman las citas, no se ven con espacios". */
      grid-template-rows: 1fr;
      pointer-events: none;
      z-index: 2;
    }
    .week-events-overlay { grid-template-columns: 80px repeat(7, 1fr); }
    /* Semana en celular: las 7 columnas cabían a la fuerza en el ancho de la
       pantalla y las citas quedaban amontonadas. Ahora cada día mide al menos
       120px y la vista se desplaza de lado (#mode-semana), con la columna de
       horas fija a la izquierda. renderWeekMode (app.js) la lleva sola a la
       columna de hoy. */
    @media (max-width: 768px) {
      #mode-semana { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
      #mode-semana .week-grid-header,
      #mode-semana .timeline-rows-container { min-width: calc(56px + 7 * 120px); }
      #mode-semana .week-grid-header,
      #mode-semana .timeline-row,
      #mode-semana .week-events-overlay { grid-template-columns: 56px repeat(7, minmax(120px, 1fr)); }
      #mode-semana .time-cell-label,
      #mode-semana .week-grid-header .week-day-col-header:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background-color: var(--bg-main);
        padding: 8px 6px;
      }
      #mode-semana .time-cell-label { box-shadow: 1px 0 0 var(--border-color); }
    }
    .day-events-overlay { grid-template-columns: 80px 1fr; }
    .day-events-col { position: relative; height: 100%; }
    /* Línea de "hora actual" (ver renderCurrentTimeLine en app.js) — mismo
       detalle que Outlook/Google Calendar: una franja que cruza la columna
       del día de hoy en la hora real de ahorita. pointer-events:none para
       no robarle el clic a la cita ni a la casilla vacía debajo. */
    .current-time-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background-color: #EF4444;
      pointer-events: none;
      z-index: 5;
    }
    .current-time-dot {
      position: absolute;
      left: -4px;
      top: 50%;
      transform: translateY(-50%);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background-color: #EF4444;
    }
    .event-pill-timed {
      position: absolute;
      pointer-events: auto;
      margin: 0 !important;
      box-sizing: border-box;
      display: flex !important;
      flex-direction: column;
      justify-content: flex-start;
      gap: 1px;
      transition: left 0.15s ease, width 0.15s ease, box-shadow 0.15s ease;
    }
    /* --bg-card es semitransparente (rgba(255,255,255,0.65) en modo claro)
       — se ve bien para una tarjeta suelta sobre el fondo lila de la app,
       pero estas pastillas viven en columnas angostas pegadas unas a otras:
       con fondo translúcido, el borde de una cita se transparentaba contra
       la de al lado, viéndose "sucio" en vez de una tarjeta sólida y
       legible. Selector compuesto (dos clases, no solo .event-pill-timed) para
       ganarle en especificidad a las reglas de .event-pill-appointment
       (algunas con !important, ej. la de modo
       oscuro más abajo) sin importar en qué orden del archivo caigan. */
    .event-pill-appointment.event-pill-timed {
      background-color: #FFFFFF !important;
    }
    [data-theme="dark"] .event-pill-appointment.event-pill-timed {
      background-color: #151D2A !important;
    }
    /* Un poco más de padding y de tamaño de letra que el resto de
       .event-pill-appointment (Mes/Agenda, donde sí hay espacio de sobra)
       ayuda a leer paciente/estado/doctor/hora/sala sin sentirse
       amontonadas en Semana/Día. */
    .event-pill-appointment.event-pill-timed {
      padding: 5px 8px;
    }
    .event-pill-timed .event-pill-name { font-size: 11px; }
    .event-pill-timed .event-pill-doctor,
    .event-pill-timed .event-pill-time { font-size: 10px; }
    /* El badge de estado ("Aprobado", "En progreso"...) tenía
       flex-shrink:0 y sin manejo de desbordamiento propio — en una columna
       muy angosta no se achicaba ni truncaba con puntos suspensivos, sino
       que el propio texto se cortaba a lo bruto contra el overflow:hidden
       de la tarjeta completa (se veía "Aprobad" sin "…", como si el diseño
       estuviera roto). Ahora puede achicarse y trunca de forma prolija. */
    .event-pill-timed .event-pill-badge {
      flex-shrink: 1;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /* Cada cita ya vive en su propia columna lado a lado (ver col/totalCols
       en applyTimedPillLayout) — no hay nada que "revelar" en hover, solo
       se resalta con sombra y se sube el z-index por si el borde queda
       pisado por la columna de al lado. */
    .event-pill-timed:hover {
      z-index: 999 !important;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
    }

    /* Semana/Día: con varias citas a la misma hora las pastillas quedan muy
       angostas, y las de 30 min muy bajitas — el texto se encimaba (doctor
       sobre la sala) y se cortaba a lo bruto ("F ob 09:"). Cada pastilla es
       un contenedor (ya trae alto y ancho fijos, ver applyTimedPillLayout) y
       muestra solo lo que le cabe; el detalle completo sigue en la viñeta
       flotante al pasar el mouse. */
    .event-pill-timed { container-type: size; container-name: evpill; }
    /* Bajita (≈30 min): sin la línea de la sala. */
    @container evpill (max-height: 38px) {
      .event-pill-sala { display: none !important; }
    }
    /* Muy bajita: solo el nombre y la hora en una línea. */
    @container evpill (max-height: 24px) {
      .event-pill-row2 { display: none !important; }
    }
    /* Angosta: sin el badge de estado (el color del borde ya lo indica) ni el
       doctor; queda el nombre y la hora. */
    @container evpill (max-width: 120px) {
      .event-pill-badge,
      .event-pill-doctor,
      .event-pill-sala,
      .event-pill-stock-text { display: none !important; }
      .event-pill-row2 { justify-content: flex-start; }
      .event-pill-stock { margin-left: 0; padding: 1px 3px; }
    }
    /* Muy angosta: solo el nombre (iniciales/truncado) y la hora debajo. */
    @container evpill (max-width: 56px) {
      .event-pill-name { font-size: 10px; }
      .event-pill-time { font-size: 9px; }
    }

    /* Viñeta flotante con el detalle completo de una cita (ver
       showEventHoverTooltip/buildEventHoverTooltipHtml en app.js) — cuando
       hay varias citas a la misma hora, applyTimedPillLayout angosta tanto
       las columnas que el texto de la pastilla se compacta/trunca; esta
       viñeta reproduce la info completa sin depender del ancho disponible.
       position:fixed (no absolute) porque sigue al cursor sobre toda la
       ventana, no solo dentro de la columna del día. */
    .event-hover-tooltip {
      display: none;
      position: fixed;
      z-index: 10000;
      pointer-events: none;
      max-width: min(280px, calc(100vw - 16px));
      /* --bg-card es semitransparente a propósito (efecto glass del resto
         de la app), pero acá flota encima de otras pastillas de citas con
         sus propios colores — con esa transparencia, las citas de abajo se
         siguen viendo a través y el texto se vuelve difícil de leer. Esta
         viñeta necesita un fondo prácticamente opaco propio en vez del
         --bg-card compartido. */
      background-color: rgba(255, 255, 255, 0.97);
      border: 1px solid var(--border-color);
      border-radius: 10px;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
      padding: 10px 12px;
      font-size: 12px;
      line-height: 1.5;
      color: var(--text-main, #1F2937);
    }
    [data-theme="dark"] .event-hover-tooltip {
      background-color: #151D2A;
    }
    /* Variante de la viñeta para el texto libre del "Esquema" (lista de
       Tratamientos, ver showEsquemaHoverTooltip): más ancha y respetando
       los saltos de línea que capturó Enfermería. */
    .event-hover-tooltip.event-hover-tooltip-wide {
      max-width: min(380px, calc(100vw - 16px));
      border-left: 3px solid var(--primary-blue);
      /* Acepta el puntero (la viñeta normal no) para poder hacer scroll
         dentro del esquema. */
      pointer-events: auto;
    }
    /* Alto limitado con scroll propio: un esquema largo ya no cubre media
       pantalla. */
    .event-hover-tooltip-esquema {
      margin-top: 4px;
      padding-right: 4px;
      white-space: pre-line;
      overflow-wrap: anywhere;
      max-height: 180px;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: rgba(47, 76, 138, 0.4) transparent;
    }
    .event-hover-tooltip-esquema::-webkit-scrollbar { width: 6px; }
    .event-hover-tooltip-esquema::-webkit-scrollbar-thumb {
      background: rgba(47, 76, 138, 0.4);
      border-radius: 3px;
    }
    @media (max-width: 640px) {
      .event-hover-tooltip-esquema { max-height: 200px; }
    }
    .event-hover-tooltip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--border-color);
    }
    .event-hover-tooltip-name {
      font-weight: 700;
      font-size: 13px;
      overflow-wrap: anywhere;
    }
    .event-hover-tooltip-row strong {
      font-weight: 600;
    }
    /* Correos, URLs o textos sin espacios (p.ej. notas sincronizadas del
       calendario: "Organized by ... correo@dominio.com") se salían de la
       viñeta — se parten donde haga falta. */
    .event-hover-tooltip-row,
    .event-hover-tooltip-muted {
      overflow-wrap: anywhere;
      word-break: break-word;
      min-width: 0;
    }
    /* La nota puede ser larga: respeta saltos de línea y se recorta a 6
       líneas; el texto completo se ve al abrir la cita. */
    .event-hover-tooltip-note {
      white-space: pre-line;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .event-hover-tooltip-muted {
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px dashed var(--border-color);
      color: var(--text-muted);
      font-size: 11px;
    }

    .month-header-row { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--border-color); background-color: var(--bg-main); text-align: center; }
    .month-day-name { padding: 10px; font-size: 12px; font-weight: 700; color: var(--text-muted); border-right: 1px solid var(--border-color); }
    .month-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(100px, 1fr); }
    .month-day-cell { border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 4px 6px; position: relative; background: var(--bg-card); overflow: hidden; box-sizing: border-box; }
    .month-day-num { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; }
    .month-day-cell.current-day .month-day-num { background-color: var(--primary-blue); color: white; }
    .event-pill-green { background-color: #10B981; color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 800; margin-top: 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .agenda-empty-view { padding: 80px 20px; text-align: center; color: var(--text-subtle); font-size: 13px; font-weight: 500; }

    /* MODAL */
    /* El overlay sigue cubriendo TODO el viewport (así el fondo oscurecido
       también tapa el sidebar fijo), pero el padding-left reserva su ancho
       para que la tarjeta del modal se centre en el área de contenido, no en
       el viewport completo — si no, en pantallas medianas la tarjeta
       centrada terminaba encimada con el sidebar. Se ajusta según esté
       colapsado o no, y se anula por completo en el breakpoint móvil donde
       el sidebar se oculta fuera de pantalla (ver @media 900px). */
    .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px 20px 20px calc(var(--sidebar-width) + 40px); transition: padding-left var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1); }
    body:has(#sidebar.collapsed) .modal-overlay { padding-left: calc(var(--sidebar-collapsed-width) + 40px); }
    .modal-overlay.open { display: flex; }
    /* En pantallas anchas ya sobra espacio de sobra para que hasta el modal
       más ancho de la app (1080px) quede centrado en el viewport completo
       sin encimarse con el sidebar — reservarle igual el ancho completo
       + 40px terminaba empujando el modal notoriamente hacia la derecha
       del centro real de la pantalla. Se anula la reserva a partir de aquí. */
    @media (min-width: 1700px) {
      .modal-overlay,
      body:has(#sidebar.collapsed) .modal-overlay {
        padding-left: 20px;
      }
    }
    /* Puede abrirse encima de otro modal ya abierto (ej. "Editar Cita"
       queda abierto detrás mientras se ve una venta) — necesita quedar por
       encima del z-index base de .modal-overlay. */
    #ventaViewModal { z-index: 200; }
    /* Mismo caso: si queda otro modal-overlay de Oncología (Nota Oncológica)
       sin cerrarse del todo, al abrir la Receta Oncológica esta terminaba
       pintándose detrás porque comparte el z-index base con los demás
       modal-overlay y el orden de pintado dependía del orden en el DOM. */
    #modalCrearRecetaOncologica { z-index: 150; }
    /* Los renglones de medicamento (compartidos con Receta Médica) usan una
       grilla de 4 columnas fija inline; en pantallas angostas eso los
       comprimía y volvía el modal poco usable, así que en móvil se apilan. */
    @media (max-width: 640px) {
      .receta-medica-line { grid-template-columns: 1fr !important; }
    }
    /* Botones de acciones en el header de modales (Nota Oncológica, Signos
       Vitales, Notas de Enfermería, etc.): mismo componente que ya usan los
       modales más nuevos, con animación de hover/press y apilado en móvil. */
    .modal-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; }
    .modal-header-btn-animated, .modal-header-btn-standard {
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
      display: inline-flex !important; align-items: center !important; justify-content: center !important;
      gap: 6px !important; user-select: none !important; white-space: nowrap !important; box-sizing: border-box !important;
    }
    .modal-header-btn-standard {
      height: 36px !important; min-height: 36px !important; padding: 0 12px !important;
      font-size: 12px !important; font-weight: 700 !important; border-radius: var(--radius-md) !important;
      line-height: 1 !important; cursor: pointer !important; flex-shrink: 0 !important;
    }
    .modal-header-btn-animated:hover:not(:disabled), .modal-header-btn-standard:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.03) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    }
    .modal-header-btn-animated:active:not(:disabled), .modal-header-btn-standard:active:not(:disabled) {
      transform: translateY(0) scale(0.96) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }
    @media (max-width: 768px) {
      .modal-header.modal-header-has-actions { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
      .modal-header-actions { display: flex !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; }
      .modal-header-actions .modal-header-btn-standard, .modal-header-actions button {
        width: 100% !important; justify-content: center !important; padding: 10px 12px !important; font-size: 12px !important; white-space: nowrap !important;
      }
    }
    /* Antes usaba --bg-card (blanco semitransparente): sobre el fondo
       desenfocado del overlay se veía gris/lavado en vez del lavanda sólido
       que sí se ve en cada modal ya rediseñado (subir archivo, nueva
       consulta, signos vitales, etc.) — se pone el mismo fondo para todos
       los modales de una sola vez en lugar de repetirlo por modal. */
    .modal-card, .modal-content { background-color: var(--bg-main); border: 1px solid var(--border-color); border-radius: var(--radius-lg); width: 100%; max-width: 480px; max-height: 90vh; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2); overflow: hidden; display: flex; flex-direction: column; }
    .modal-header { flex-shrink: 0; padding: 20px 24px; border-bottom: 1px solid var(--border-color); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
    .modal-header h2 { font-size: 18px; font-weight: 800; color: var(--primary-blue); }
    .modal-title { font-size: 18px; font-weight: 800; color: var(--primary-blue); }
    .modal-close-btn { background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 20px; }
    .modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; min-height: 0; }
    /* Cuando el header/body/footer del modal viven dentro de un <form>
       (ej. "Mi Perfil"), el <form> también necesita ser el flex column que
       reparte el espacio — si no, .modal-body ignora su overflow-y:auto y
       el modal completo crece más alto que la pantalla sin forma de hacer
       scroll hasta el botón de cerrar. */
    .modal-card > form, .modal-content > form { display: flex; flex-direction: column; overflow: hidden; flex: 1 1 auto; min-height: 0; }
    /* ...pero cuando el <form> ES el propio .modal-body (Ficha de Ingreso,
       Subir archivo, Signos Vitales, Crear Orden Médica), ese overflow:hidden
       le ganaba a .modal-body por especificidad y el cuerpo del modal no
       hacía scroll — en celular no se podía llegar a los campos de abajo. */
    .modal-card > form.modal-body, .modal-content > form.modal-body { overflow-y: auto; }
    .modal-footer { flex-shrink: 0; }
    .form-group, .modal-field { display: flex; flex-direction: column; gap: 6px; }
    .form-group label, .modal-field label { font-size: 12px; font-weight: 700; color: var(--text-main); text-transform: uppercase; letter-spacing: 0.03em; }
    .form-group input, .form-group select, .modal-field input { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-main); color: var(--text-main); font-size: 14px; outline: none; transition: all 0.2s; }
    /* Mi Perfil comparte la misma --bg-main lavanda que el propio modal, así
       que sus campos se veían "pegados" al fondo sin contraste — mismo
       lenguaje visual que el resto de la app (campos más claros que su
       tarjeta contenedora), sin tocar los otros ~38 usos de .modal-field en
       este archivo que no reportaron el mismo problema. */
    #userProfileModal .modal-field input { background-color: var(--bg-card); }
    .form-group input:focus, .modal-field input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; background-color: var(--bg-main); }
    .btn-secondary { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 8px 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 600; cursor: pointer; }

    .file-dropzone-box:hover {
      border-color: var(--primary-blue) !important;
      background-color: var(--primary-blue-light) !important;
    }

    /* #docFirmaDropzone (Mi Perfil > Info Médica > firma) y #hcFilesDropzone
       (Historia Clínica > Archivos) son cajas de arrastrar-y-soltar iguales
       en función a .file-dropzone-box pero con su propio markup/estilos
       inline — mismo tratamiento de hover en vez de heredar esa clase
       completa (podría traer padding/tamaño no deseado). */
    #docFirmaDropzone:hover,
    #hcFilesDropzone:hover {
      border-color: var(--primary-blue) !important;
      background-color: var(--primary-blue-light) !important;
    }

    /* ESTILOS DE PESTAÑA ARCHIVOS Y DARK THEME */
    .archivos-toolbar {
      background-color: var(--bg-main);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
      transition: background-color 0.25s, border-color 0.25s;
    }

    /* Animación de "levantar + presionar" reutilizable — mismo lenguaje que
       .modal-header-btn-standard, pero sin heredar su tamaño fijo
       (height/padding !important) para no romper el layout propio de cada
       botón, que ya trae su ancho/padding vía estilos inline o su propia
       clase. Se agrega como clase (btn-anim-lift) en vez de listar ids acá
       para no tener que volver a esta regla cada vez que otro grupo de
       botones la necesite (Archivos, Acciones Especiales de Oncología,
       etc. — ver dónde se usa en el HTML). */
    .btn-anim-lift {
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn-anim-lift:hover:not(:disabled) {
      transform: translateY(-2px) scale(1.03);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    }
    .btn-anim-lift:active:not(:disabled) {
      transform: translateY(0) scale(0.96);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    .file-card {
      background-color: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 12px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s ease;
      color: var(--text-main);
    }

    .file-card:hover {
      border-color: var(--primary-blue);
      background-color: var(--primary-blue-light);
    }

    .file-card.active-card {
      border-color: var(--primary-blue);
      background-color: var(--primary-blue-light);
      box-shadow: 0 0 0 1px var(--primary-blue);
    }

    .file-card-checkbox, #selectAllArchivosCheckbox {
      accent-color: var(--primary-blue);
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    [data-theme="dark"] .archivos-toolbar {
      background-color: var(--bg-card) !important;
      border-color: var(--border-color) !important;
    }

    [data-theme="dark"] .file-card {
      background-color: var(--bg-card) !important;
      border-color: var(--border-color) !important;
      color: var(--text-main) !important;
    }

    [data-theme="dark"] .file-card.active-card {
      background-color: var(--primary-blue-light) !important;
      border-color: var(--primary-blue) !important;
    }

    [data-theme="dark"] #archivoPreviewCard {
      background-color: var(--bg-card) !important;
      border-color: var(--border-color) !important;
      color: var(--text-main) !important;
    }

    /* ESTILOS DE BOTONES DE SELECCIÓN DE CONSULTAS */
    .consulta-type-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 18px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      background-color: var(--bg-card);
      color: var(--text-main);
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
      transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .consulta-type-btn:hover:not(:disabled) {
      border-color: #2F4C8A;
      background-color: #F5F6F8;
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 20px rgba(47, 76, 138, 0.15);
    }

    .consulta-type-btn .icon-circle {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
      transition: transform 0.25s ease;
    }

    .consulta-type-btn:hover:not(:disabled) .icon-circle {
      transform: scale(1.1) rotate(4deg);
    }

    [data-theme="dark"] .consulta-type-btn {
      background-color: var(--bg-card) !important;
      border-color: var(--border-color) !important;
      color: var(--text-main) !important;
    }

    /* ESTILOS DE ACORDEONES PLEGABLES NOTA DE ONCOLOGÍA */
    .onco-accordion-item {
      margin-bottom: 12px;
    }

    .onco-accordion-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--bg-main);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      cursor: pointer;
      font-weight: 700;
      color: var(--text-main);
      font-size: 13px;
      user-select: none;
      transition: all 0.2s ease;
    }

    .onco-accordion-header:hover {
      background: var(--primary-blue-light);
      border-color: var(--primary-blue);
    }

    .onco-accordion-header.collapsed {
      border-radius: var(--radius-md);
    }

    .onco-accordion-header:not(.collapsed) {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-color: var(--primary-blue);
      background: var(--primary-blue-light);
      color: var(--primary-blue);
    }

    .onco-accordion-content {
      padding: 16px;
      border: 1px solid var(--border-color);
      border-top: none;
      border-bottom-left-radius: var(--radius-md);
      border-bottom-right-radius: var(--radius-md);
      background: var(--bg-card);
    }

    .btn-record-audio {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 700;
      border-radius: var(--radius-sm);
      border: 1px solid #C9D6EC;
      background-color: #E3EAF6;
      color: #2F4C8A;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-record-audio:hover {
      background-color: #C9D6EC;
    }

    .btn-record-audio.recording {
      background: #EF4444;
      color: #FFFFFF;
      animation: pulse-red 1.2s infinite;
    }

    @keyframes pulse-red {
      0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
      70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
      100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }

    [data-theme="dark"] .onco-accordion-header {
      background: var(--bg-card) !important;
      border-color: var(--border-color) !important;
      color: var(--text-main) !important;
    }

    [data-theme="dark"] .onco-accordion-content {
      background: var(--bg-card) !important;
      border-color: var(--border-color) !important;
    }
    .patient-success-card { max-width: 460px; }
    .patient-success-header { align-items: center; gap: 16px; border-bottom: none; padding-bottom: 8px; }
    .patient-success-icon {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-green), #34D399);
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 800;
      box-shadow: 0 10px 18px rgba(16, 185, 129, 0.22);
      flex-shrink: 0;
    }
    .patient-success-message { margin-top: 6px; color: var(--text-muted); font-size: 14px; }
    .patient-success-footer { justify-content: center; gap: 12px; padding-top: 8px; }

    /* Tratamiento modal section styles */
    .trat-section { display: flex; flex-direction: column; gap: 12px; }
    .trat-section-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--primary-blue); }
    .trat-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    /* Modal Agendar/Editar Cita (#addCitaForm) — los bloques de Doctor,
       Ubicación/Sala, Ciclo/Frecuencia y Fecha/Hora usaban un grid de 2
       columnas fijas inline; en pantallas de celular (~400px) esas columnas
       no tenían espacio para el <select> de Doctor ni para los widgets de
       fecha/hora, y se veían recortados/movidos de lugar. */
    /* minmax(0, 1fr) + min-width: 0: con "1fr" una columna no puede quedar más
       angosta que su contenido — una especialidad larga en "Cita con" ensanchaba
       su columna y empujaba "Doctor" fuera de la pantalla en celular. Así las dos
       columnas miden lo mismo y el texto largo se corta con "…". */
    .cita-modal-2col-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
    .cita-modal-2col-grid > * { min-width: 0; }
    @media (max-width: 480px) {
      .cita-modal-2col-grid { grid-template-columns: 1fr; }
    }
    /* Fila de "Medicamentos + carrito" del modal Modificar Tratamiento —
       ver id="tratamientoOrderModal" en index.html. flex-wrap para que el
       carrito (280px fijo) baje debajo de la lista de productos en vez de
       apretarse a su lado y forzar scroll horizontal en pantallas angostas. */
    .trat-order-body-row { display: flex; gap: 16px; flex-wrap: wrap; }
    .trat-order-cart-col { width: 280px; flex-shrink: 0; }
    @media (max-width: 640px) {
      .trat-row-2col { grid-template-columns: 1fr; }
      .trat-order-cart-col { width: 100%; }
    }
    .modal-field select { width: 100%; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background-color: var(--bg-main); color: var(--text-main); font-size: 14px; outline: none; transition: all 0.2s; appearance: auto; cursor: pointer; }
    .modal-field select:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }
    .file-upload-slot { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-main); }
    .file-upload-slot span { font-size: 13px; color: var(--text-muted); }

    /* --- FICHA DE INGRESO MODAL STYLES --- */
    .ficha-ingreso-modal-card { max-width: 680px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
    .ficha-ingreso-body { overflow-y: auto; max-height: calc(90vh - 140px); gap: 16px; padding: 20px 24px; }
    .modal-section-title { font-size: 13px; font-weight: 700; color: var(--primary-blue); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px dashed var(--border-color); padding-bottom: 4px; margin-bottom: 4px; }

    .custom-date-input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-color: var(--bg-main);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 10px 14px;
      font-size: 14px;
      font-family: inherit;
      color: var(--text-main);
      outline: none;
      transition: all 0.2s ease-in-out;
    }
    .custom-date-input::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0.7;
      transition: opacity 0.2s ease;
      filter: invert(0.3);
    }
    .custom-date-input::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
    }
    .custom-date-input:focus {
      border-color: var(--primary-blue);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

    select:disabled, select.is-readonly, input:disabled, input.is-readonly {
      background-color: #F1F5F9 !important;
      color: #64748B !important;
      cursor: not-allowed;
      border-color: #CBD5E1 !important;
      opacity: 0.85;
    }

    .alergias-list-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }
    .alergia-card {
      position: relative;
      background-color: var(--bg-main, #F8FAFC);
      border: 1px solid var(--border-color, #E2E8F0);
      border-radius: var(--radius-md, 8px);
      padding: 14px 44px 14px 14px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .alergia-card:hover {
      border-color: var(--primary-blue);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    @media (max-width: 640px) {
      .alergia-card {
        grid-template-columns: 1fr;
      }
    }
    .btn-delete-alergia {
      position: absolute;
      top: 10px;
      right: 10px;
      background: transparent;
      border: none;
      color: #EF4444;
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, color 0.2s;
    }
    .btn-delete-alergia:hover {
      background-color: #FEE2E2;
      color: #DC2626;
    }

    .ficha-ingreso-footer {
      justify-content: center !important;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      background-color: var(--bg-main, #F8FAFC);
      border-top: 1px solid var(--border-color, #E2E8F0);
    }

    @media (max-width: 1200px) { .expediente-layout { grid-template-columns: minmax(0, 1fr); } .patient-info-pills-row { grid-template-columns: repeat(2, 1fr); } }

/* --- ESTILOS EXPEDIENTE SUB-TABS --- */
.empty-state-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; }
.empty-state-fullwidth { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; text-align: center; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-top: 16px; }
.empty-state-icon { background: #F1F5F9; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.empty-state-title { font-size: 16px; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.empty-state-desc { font-size: 13px; color: var(--text-muted); max-width: 300px; }

.search-input { height: 42px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 0 12px; font-size: 13px; color: var(--text-main); outline: none; min-width: 0; }
.search-input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 2px rgba(37,99,235,0.1); }

.file-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: #fff; cursor: pointer; transition: all 0.2s; margin-bottom: 8px; }
.file-card:hover { border-color: #CBD5E1; box-shadow: var(--shadow-sm); }

/* Tarjetas de "Ventas del paciente" — mismo feedback al pasar el mouse que
   .file-card/.agenda-hoy-item; el JS solo trae cursor:pointer sin ningún
   :hover que reaccionara al pasar el mouse. */
.sale-order-item { transition: transform 0.15s, box-shadow 0.15s; }
.sale-order-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.file-card.active-card { border-color: var(--primary-blue); background: #F8FAFC; box-shadow: 0 0 0 1px var(--primary-blue); }
.file-card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Encabezado de detalle de Recetas / Órdenes Médicas (título + Imprimir,
   Descargar PDF, Editar, Crear desglose, Eliminar): con tantos botones en
   la misma fila que el título, se encogían — el texto se partía en dos
   líneas y el ícono de Imprimir quedaba en un punto (la regla global
   "svg { max-width: 100% }" lo encoge junto con el botón). Ahora los
   botones conservan su tamaño y, si no caben junto al título, el grupo
   baja a su propia fila alineado a la derecha. */
.expediente-detail-header { flex-wrap: wrap; gap: 12px; }
.expediente-detail-header > div:first-child { flex: 1 1 280px; }
.expediente-detail-header-actions { flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.expediente-detail-header-actions button { white-space: nowrap; flex-shrink: 0; }
.expediente-detail-header-actions svg { flex-shrink: 0; max-width: none; }
/* En celular el grupo de botones baja completo a su propia fila y los botones
   se estiran para llenarla parejos (antes quedaban sueltos y desalineados a
   la derecha); el de eliminar conserva su tamaño de ícono. */
@media (max-width: 600px) {
  .expediente-detail-header-actions { width: 100%; margin-left: 0; justify-content: stretch; gap: 8px !important; }
  .expediente-detail-header-actions button { flex: 1 1 auto; justify-content: center; }
  .expediente-detail-header-actions button[id^="btnDelete"] { flex: 0 0 auto; }
}

.recipe-detail-card { padding: 24px; }
.recipe-top-bar { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; margin-bottom: 24px; }
.recipe-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.recipe-info-box { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px; background: #F8FAFC; }
.recipe-info-label { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; }
.recipe-info-value { font-size: 14px; font-weight: 700; color: var(--text-main); }
.recipe-med-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 24px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.recipe-med-table th { background: #F1F5F9; color: var(--text-muted); font-size: 11px; font-weight: 700; text-align: left; padding: 12px; text-transform: uppercase; border-bottom: 1px solid var(--border-color); }
.recipe-med-table td { padding: 16px 12px; font-size: 13px; font-weight: 500; color: var(--text-main); border-bottom: 1px solid var(--border-color); }
.recipe-med-table tr:last-child td { border-bottom: none; }
.recipe-notes-box { border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 16px; }

/* =========================================
   TRATAMIENTOS STYLES
   ========================================= */

.tratamientos-filter-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 24px;
  margin-bottom: 24px;
}

.filter-row {
  display: flex;
  /* flex-wrap: sin esto, los filtros (Fecha, Ubicación, Sala, Doctor,
     Estado, Check-in) se salían del ancho disponible en ventanas no muy
     anchas — como <html>/<body> tienen overflow-x:hidden (evita que el
     resto de la app saque un scroll horizontal feo), lo que no cabía
     quedaba directamente recortado sin ninguna forma de llegar a verlo.
     Con wrap, los filtros que no caben bajan a un renglón nuevo en vez de
     desaparecer. */
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
  align-items: flex-start;
}

.filter-group {
  display: flex;
  flex-direction: column;
  /* flex-shrink:0: sin esto (el default de flexbox es poder encogerse),
     con .filter-row ya en flex-wrap:wrap el navegador de todos modos
     prefiere encoger un poco cada filtro antes que mandar alguno a un
     renglón nuevo — con varios encogidos a la vez terminaban viéndose
     amontonados/cortados en vez de simplemente envolver limpio. */
  flex-shrink: 0;
  gap: 8px;
}

.filter-group label {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
}

.custom-select {
  height: 42px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: var(--bg-card);
}

.select-arrow {
  font-size: 9px;
  color: var(--text-muted);
}

/* Opciones (<option>) de todos los <select> de la app: por defecto el
   navegador las pinta cuadradas y sin ningún estilo — se les da el mismo
   look redondeado/morado del resto de los componentes. El soporte de estas
   reglas sobre el propio popup nativo varía por navegador (Chrome/Edge las
   respeta, Firefox/Safari solo aplican parcialmente), pero donde aplica se
   ve consistente con el resto de la UI. */
select option {
  background-color: var(--bg-card);
  color: var(--text-main);
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}
select option:hover,
select option:focus {
  background-color: #F3E8FF;
  color: #1C2F57;
}
select option:checked {
  background: linear-gradient(135deg, #2F4C8A 0%, #1C2F57 100%);
  color: #FFFFFF;
  font-weight: 700;
}
[data-theme="dark"] select option {
  background-color: #1E293B;
  color: #F8FAFC;
}
[data-theme="dark"] select option:hover,
[data-theme="dark"] select option:focus {
  background-color: #334155;
  color: #C9D6EC;
}
[data-theme="dark"] select option:checked {
  background: linear-gradient(135deg, #1C2F57 0%, #5B21B6 100%);
  color: #FFFFFF;
}

/* Selects dentro de wizards/modales: fondo blanco sólido en vez del color
   translúcido/lila que hereda cada componente (.custom-select, etc.) — en
   modales con fondo lavanda (--bg-main) esos selects se veían "perdidos"
   con poco contraste. */
.modal-overlay select {
  background-color: #FFFFFF !important;
}
[data-theme="dark"] .modal-overlay select {
  background-color: #1E293B !important;
}

.search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.search-input-wrapper > svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
}

.search-input.full-width {
  width: 100%;
  padding-left: 36px;
}

.checkboxes-group {
  flex: 1;
}

/* Con solo 2 grupos de checkboxes (Estado, Check-in) — antes eran 3 con
   Medicamento — cada uno con flex:1 se estiraba a la mitad del espacio
   sobrante de todo el renglón, mucho más ancho de lo que su contenido
   necesita; el checkbox-grid de 2 columnas quedaba con columnas separadas
   por un hueco enorme. Centrar el renglón completo (intento anterior) se
   veía peor todavía: los 6 filtros quedaban amontonados en el centro con
   apenas el gap fijo de 24px entre ellos, dejando aire vacío a AMBOS lados
   en vez de solo a la derecha. space-between reparte cada filtro a lo
   ancho del renglón completo (Fecha pegado a la izquierda, Check-in pegado
   a la derecha, los demás repartidos entre medio) — mismo espíritu que ya
   usa .filter-row de base, pero dejando que cada filtro ocupe su ancho
   natural en vez de estirarse. */
.bottom-filter-row {
  justify-content: space-between;
}
/* flex-shrink:0 (antes 1): con las 6 columnas de texto (Nuevo/Aprobado/
   Rechazado/Pendiente/En proceso/Finalizado) más su columna de checkbox,
   "Estado" es el filtro más ancho del renglón — con shrink permitido, el
   navegador prefería encogerlo hasta que sus checkboxes/etiquetas quedaran
   amontonados o cortados en vez de mandarlo a un renglón nuevo (el
   flex-wrap de .filter-row solo ayuda si a los elementos NO se les permite
   encogerse por debajo de su ancho real). */
.bottom-filter-row .checkboxes-group {
  flex: 0 0 auto;
}

/* Renglón propio de Estado y Check-in en Tratamientos: Estado a la
   izquierda, Check-in a la derecha, siempre debajo de los selectores. */
.status-filter-row {
  justify-content: space-between;
  margin-bottom: 0;
}
.status-filter-row .checkboxes-group {
  flex: 0 0 auto;
}

/* En móvil, flex-wrap por sí solo no garantiza un filtro por renglón: si
   dos filtros angostos (ej. Doctor + el checkbox-group de Estado, este
   último con flex:1 estirándose a lo que sobre) caben juntos en el ancho
   de pantalla, el navegador los deja compartir renglón en vez de bajar
   Estado a uno propio — se veían encimados/desalineados en vez de la
   lista de filtros apilada que se espera en una pantalla angosta. */
@media (max-width: 640px) {
  .filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group,
  .checkboxes-group {
    width: 100%;
  }
  /* En columna, el flex-basis de un filtro se vuelve su ALTO: el de Fecha en
     Tratamientos trae "flex: 0 0 200px" inline (para fijar su ancho en
     escritorio) y en celular dejaba ~150px vacíos debajo del campo.
     !important para ganarle a ese estilo inline. */
  .filter-row > .filter-group {
    flex: 0 0 auto !important;
  }
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 8px;
  column-gap: 16px;
}

.checkbox-grid-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox span {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  display: inline-block;
  position: relative;
  transition: all 0.2s;
}

.custom-checkbox input:checked + span {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.custom-checkbox:hover span {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.custom-checkbox:active span {
  transform: scale(0.92);
}

.custom-checkbox input:checked + span::after {
  content: "";
  position: absolute;
  /* Antes usaba left/top en px fijos (5px/2px) calibrados a ojo — la
     palomita quedaba corrida hacia arriba-izquierda en vez de centrada en
     la cajita de 16x16. Centrado por porcentaje + translate: robusto sin
     importar el box-sizing, y la corrección de 45% en vertical (en vez de
     50%) compensa que el "centro visual" de una palomita (trazo grueso
     abajo-derecha) no coincide con el centro geométrico de su rectángulo. */
  left: 50%;
  top: 45%;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Radio buttons de la Evaluación Inicial de Enfermería (Sí/No/N/A por
   pregunta, ver buildAssessmentQuestionRowHtml/edEiBuildAnswerRadiosHtml en
   app.js) — eran <input type="radio"> nativos sin ningún estilo ni
   animación, a diferencia de .custom-checkbox que ya usa el resto de la
   app. Mismo lenguaje visual: círculo con hover/press y estado marcado. */
.custom-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-main);
  cursor: pointer;
}

.custom-radio input {
  display: none;
}

.custom-radio span {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  transition: all 0.2s;
}

.custom-radio input:checked + span {
  border-color: var(--primary-blue);
}

.custom-radio input:checked + span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-blue);
  transform: translate(-50%, -50%);
}

.custom-radio:hover span {
  transform: scale(1.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.custom-radio:active span {
  transform: scale(0.92);
}

.filter-actions-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.table-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.tratamientos-table-wrapper {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  overflow-x: auto;
  margin-bottom: 24px;
}

.tratamientos-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

.tratamientos-table th {
  background: var(--bg-main);
  padding: 14px 16px;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border-color);
}

.tratamientos-table td {
  padding: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-subtle);
  border-bottom: 1px solid var(--border-color);
  vertical-align: middle;
}

/* Columna "Esquema": texto libre que puede ser largo — se corta a 2 líneas
   (el texto completo queda en el title de la celda). */
.tratamientos-table .td-esquema:not(:empty) { cursor: help; }
.tratamientos-table .td-esquema {
  max-width: 220px;
  white-space: pre-line;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.tratamientos-table tr:hover td {
  background: var(--bg-main);
}

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

.td-id {
  font-weight: 800 !important;
  color: var(--text-main) !important;
}

.td-paciente {
  font-size: 11px !important;
  color: var(--text-main) !important;
  text-transform: uppercase;
}

.td-doctor {
  color: var(--text-main) !important;
}

.td-actions {
  text-align: right;
}

.status-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.05em;
  width: max-content;
}

.badge-aprobado { background: #DCFCE7; color: #16A34A; border: 1px solid #BBF7D0; }
.badge-nuevo { background: #DBEAFE; color: #2563EB; border: 1px solid #BFDBFE; }
.badge-compartido { background: #F3E8FF; color: #9333EA; border: 1px solid #E9D5FF; }
.badge-rechazado { background: #FEE2E2; color: #DC2626; border: 1px solid #FECACA; }
.badge-pendiente { background: #FEF3C7; color: #D97706; border: 1px solid #FDE68A; }
.badge-desfasado { background: #FCE7F3; color: #DB2777; border: 1px solid #FBCFE8; }
.badge-en_progreso { background: #E3EAF6; color: #2F4C8A; border: 1px solid #C9D6EC; }
.badge-finalizado { background: #E2E8F0; color: #475569; border: 1px solid #CBD5E1; }

.badge-checkin { background: #22C55E; color: white; }
.badge-checkin::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E');
  background-size: cover;
  margin-right: 4px;
}

/* Casilla "Stock" de la cita marcada (Tratamientos, columna Estatus). */
.badge-stock { background: rgba(16, 185, 129, 0.15); color: #047857; border: 1px solid #10b981; }
.badge-stock::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23047857%22%20stroke-width%3D%223.5%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E');
  background-size: cover;
  margin-right: 4px;
}
[data-theme="dark"] .badge-stock { background: rgba(16, 185, 129, 0.2); color: #34D399; }

.badge-nocheckin { background: #E2E8F0; color: #64748B; }
.badge-nocheckin::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%252364748B%22%20stroke-width%3D%223%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cline%20x1%3D%224.93%22%20y1%3D%224.93%22%20x2%3D%2219.07%22%20y2%3D%2219.07%22/%3E%3C/svg%3E');
  background-size: cover;
  margin-right: 4px;
}

/* Aplicación de medicamento en la tabla de Tratamientos — mismos colores
   que los botones En proceso / Aplicado del modal de la cita. */
.badge-aplicacion-en-proceso { background: rgba(249, 115, 22, 0.15); color: #c2410c; border: 1px solid #f97316; }
.badge-aplicacion-aplicado { background: rgba(16, 185, 129, 0.15); color: #047857; border: 1px solid #10b981; }
/* Aplicación de medicamento en modo manual (Solicitado / Preparación / Listo) */
.badge-aplicacion-solicitado { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; border: 1px solid #3b82f6; }
.badge-aplicacion-preparacion { background: rgba(245, 158, 11, 0.15); color: #b45309; border: 1px solid #f59e0b; }
.badge-aplicacion-listo { background: rgba(16, 185, 129, 0.15); color: #047857; border: 1px solid #10b981; }

.badge-preparado { background: #3B82F6; color: white; }
.badge-preparado::before {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E');
  background-size: cover;
  margin-right: 4px;
}

.tratamientos-kanban-wrapper {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  margin-bottom: 24px;
  align-items: flex-start;
}

.trat-kanban-column {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 380px);
  min-height: 200px;
}

.trat-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}

.trat-kanban-column-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.trat-kanban-column-count {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 9px;
}

.trat-kanban-column-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

.trat-kanban-empty {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 8px;
}

.trat-kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trat-kanban-card:hover {
  border-color: var(--primary-blue);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.trat-kanban-card-paciente {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
}

.trat-kanban-card-doctor {
  font-size: 11px;
  color: var(--text-subtle);
}

.trat-kanban-card-meta {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.trat-kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.folder-icon,
.eye-icon,
.doc-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  cursor: pointer;
  flex-shrink: 0;
  /* Botones de acción de la lista de Tratamientos ("Editar tratamiento" /
     .folder-icon y "Crear venta" / .eye-icon) no tenían ningún feedback al
     pasar el mouse o hacer clic, a diferencia del resto de los controles
     interactivos de la app. */
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease;
}

.folder-icon:hover,
.eye-icon:hover,
.doc-icon:hover {
  transform: scale(1.12);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.folder-icon:active,
.eye-icon:active,
.doc-icon:active {
  transform: scale(0.9);
}

.folder-icon {
  background-color: #0EA5E9;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M22%2019a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h5l2%203h9a2%202%200%200%201%202%202z%22/%3E%3C/svg%3E');
}

.eye-icon {
  background-color: #4A6FB5;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M1%2012s4-8%2011-8%2011%208%2011%208-4%208-11%208-11-8-11-8z%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3C/svg%3E');
}

.doc-icon {
  background-color: #8B5CF6;
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%222.5%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpolyline%20points%3D%2214%202%2014%208%2020%208%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2213%22%20x2%3D%228%22%20y2%3D%2213%22/%3E%3Cline%20x1%3D%2216%22%20y1%3D%2217%22%20x2%3D%228%22%20y2%3D%2217%22/%3E%3Cpolyline%20points%3D%2210%209%209%209%208%209%22/%3E%3C/svg%3E');
  cursor: pointer;
}

/* Wizard "Modificar Tratamiento" — grid de productos + carrito */
.trat-name-chip {
  background: var(--primary-blue-light) !important;
  color: var(--primary-blue) !important;
  font-weight: 800 !important;
  border-color: transparent !important;
}

.trat-search-top-label {
  position: absolute;
  right: 14px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  pointer-events: none;
}

.trat-cart-count-badge {
  background: var(--primary-blue);
  color: white;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.trat-product-grid {
  overflow-y: auto;
  max-height: 380px;
  display: grid;
  /* auto-fill en vez de un número fijo de columnas — con repeat(3, 1fr) las
     tarjetas se apretaban y desbordaban con scroll horizontal en el modal
     "Modificar Tratamiento" cuando el contenedor era más angosto (móvil,
     o el modal completo achicado); así se acomodan solas según el espacio
     real disponible. */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  align-content: start;
  /* .trat-product-qty-badge sube -6px sobre su tarjeta — sin este padding,
     el propio overflow-y del grid recorta el badge de la primera fila. */
  padding-top: 8px;
}

.trat-product-card {
  position: relative;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px;
  cursor: pointer;
  background: var(--bg-card);
  transition: all 0.15s ease;
  /* Nombres largos de una sola palabra (ej. "INMUNOFLORESCENCIA",
     "CARCINOEMBRIONARIO") no tenían dónde partirse y se desbordaban sobre
     las tarjetas vecinas en vez de ajustarse dentro de la propia tarjeta.
     No se usa overflow:hidden aquí a propósito: .trat-product-qty-badge
     (el numerito de cantidad) es hijo de esta tarjeta y sobresale -6px a
     propósito (position:absolute, top/right negativos) — overflow:hidden
     lo recortaría. */
  min-width: 0;
}

.trat-product-card:hover { border-color: var(--primary-blue); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.trat-product-card:active { transform: translateY(0) scale(0.97); }

.trat-product-card.selected {
  border-color: var(--primary-blue);
  background: var(--primary-blue-light);
}

.trat-product-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary-blue);
  color: white;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
}

.trat-product-card .trat-product-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  overflow-wrap: break-word;
  word-break: break-word;
}

.trat-product-card .trat-product-stock {
  font-size: 11px;
  color: #16A34A;
  margin-top: 4px;
  font-weight: 600;
}

.trat-product-card .trat-product-stock.out { color: #EF4444; }

.trat-cart-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  color: var(--text-main);
}

.trat-cart-item .trat-cart-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.trat-cart-qty {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.trat-cart-qty button {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background: var(--bg-main);
  color: var(--text-main);
  cursor: pointer;
  font-weight: 700;
  line-height: 1;
}

.trat-cart-qty .trat-cart-remove {
  border-color: #FCA5A5;
  color: #EF4444;
}

.tratamientos-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.page-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover {
  background: var(--bg-main);
}

.page-btn.active {
  background: var(--primary-blue);
  color: white;
}

.page-dots {
  color: var(--text-muted);
  padding: 0 4px;
}

/* =========================================
   INFORMACION MEDICO STYLES
   ========================================= */

.medico-cards-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.medico-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
}

.medico-card-header {
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
}

.medico-card-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.medico-card-title h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-main);
}

.medico-card-subtitle {
  font-size: 11px;
  color: var(--text-muted);
}

.medico-form-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.medico-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.medico-field-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.medico-field-group label svg {
  color: var(--primary-blue);
}

.signature-box {
  background: var(--bg-main);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medico-card-footer {
  padding: 24px;
  padding-top: 0;
}

/* Signos Vitales de la Nota de Oncología Médica: cuando una etiqueta se parte
   en dos renglones (ej. "PA Diastólica (mmHg)" en celular), su input bajaba y
   quedaba desalineado con el de al lado. Se alinean todos al fondo de la fila. */
.onco-vitals-grid > .form-group {
  justify-content: flex-end;
  margin: 0;
}

/* --- PATIENT LIST VIEW STYLES --- */
.patient-cards-grid.list-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.patient-cards-grid.list-view .patient-card {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 20px;
}
.patient-cards-grid.list-view .patient-card-header {
  padding: 0;
  width: 150px;
  justify-content: flex-start;
  gap: 16px;
}
.patient-cards-grid.list-view .patient-card-body {
  padding: 0;
  flex-direction: row;
  flex: 1;
  text-align: left;
}
.patient-cards-grid.list-view .patient-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.patient-cards-grid.list-view .patient-name {
  font-size: 14px;
}
.patient-cards-grid.list-view .patient-card-footer {
  padding: 0;
  background: transparent;
  border-top: none;
}
/* El avatar se deformaba (óvalo) al encogerse como hijo flex, y el ancho fijo
   de 150px del número de expediente se comía el renglón en celular — el
   avatar y el nombre quedaban cada uno en una posición distinta según lo que
   midiera el nombre. */
.patient-cards-grid.list-view .patient-avatar {
  flex-shrink: 0;
}
.patient-cards-grid.list-view .patient-card-body {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  min-width: 0;
}
.patient-cards-grid.list-view .patient-card-footer {
  flex-shrink: 0;
}
.patient-cards-grid.list-view .btn-view-patient {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .patient-cards-grid.list-view .patient-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .patient-cards-grid.list-view .patient-card-header {
    width: auto;
    flex-shrink: 0;
  }
  .patient-cards-grid.list-view .patient-name {
    font-size: 13px;
    overflow-wrap: anywhere;
  }
}
/* View toggle button styles */
#btnGridView.active, #btnListView.active {
  background-color: var(--primary-blue) !important;
  color: white !important;
  border-color: var(--primary-blue) !important;
}
#btnGridView.active svg, #btnListView.active svg {
  stroke: white;
}

/* =========================================
   ANTECEDENTES HEREDO FAMILIARES STYLES
   ========================================= */

/* Solo el switch (.toggle-switch) es clicable — es lo único que escucha el
   listener delegado de app.js (closest('.toggle-switch')). Antes el
   contenedor completo (switch + texto) llevaba cursor: pointer y disparaba
   la animación de hover/clic, así que al hacer clic sobre el texto se veía
   la manita y el "rebote" del switch sin que cambiara nada (clic
   fantasma), y varios clics seguidos seleccionaban el texto. */
.toggle-switch-container {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.toggle-switch {
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  background-color: #CBD5E1;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s ease;
}

.toggle-switch.active {
  background-color: var(--primary-blue);
}

/* Antes solo animaba el "slide" del switch al activarlo/desactivarlo —
   sin ningún feedback al pasar el mouse o hacer clic, a diferencia del
   resto de los controles interactivos de la app (ver .btn-anim-lift). */
.toggle-switch:hover {
  transform: scale(1.06);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.toggle-switch:active {
  transform: scale(0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.toggle-switch-knob {
  width: 20px;
  height: 20px;
  background-color: var(--bg-card);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch.active .toggle-switch-knob {
  transform: translateX(20px);
}

.toggle-switch-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.3s;
}
.toggle-switch.active + .toggle-switch-label {
  color: var(--primary-blue);
}

.disabled-section-box {
  border: 2px dashed #E2E8F0;
  background-color: var(--bg-main);
  border-radius: var(--radius-md);
  padding: 40px;
  text-align: center;
  color: #94A3B8;
  font-size: 14px;
  font-style: italic;
  font-weight: 500;
}

.btn-dashed-add {
  width: 200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border: 2px dashed #CBD5E1;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-dashed-add:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: #EFF6FF;
}

/* Familiar Form Card */
.familiar-form-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  overflow: hidden;
}

.familiar-card-header {
  background: var(--bg-main);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.familiar-card-header h4 {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.05em;
  margin: 0;
}

.btn-close-familiar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #EF4444;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-close-familiar:hover {
  background: #DC2626;
}

.familiar-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.familiar-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.familiar-field-group label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.familiar-input {
  height: 42px;
  width: 100%;
  /* Sin esto, un <input> dentro de una grid (ej. Signos Vitales de la
     Receta Oncológica: 4 columnas) se queda con su min-width automático de
     navegador en vez de encoger con su columna — desbordaba el modal en
     vez de acomodarse (ver .familiar-field-group, que ya lo estira al
     100% del ancho vía flex, pero necesita poder encoger primero). */
  min-width: 0;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 13px;
  color: var(--text-main);
  outline: none;
}
.familiar-input:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}
.familiar-split-input {
  outline: none;
}
.familiar-input:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

/* .familiar-input se reusa para <input> y <select>; su padding/radius/height
   pisaban por especificidad a la regla genérica de <select> de arriba,
   dejando el texto de la opción encimado con la flecha morada. Se reconcilia
   solo para <select class="familiar-input">, sin tocar los <input>. */
select.familiar-input {
  height: 44px;
  padding: 10px 40px 10px 16px;
  border-radius: var(--radius-md);
}

.familiar-textarea {
  width: 100%;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: var(--bg-card);
  outline: none;
  resize: vertical;
}
.familiar-textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.1);
}

.familiar-expandable {
  background: var(--bg-main);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* =========================================
   ANTECEDENTES NO PATOLÓGICOS STYLES
   ========================================= */

.nopat-cards-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nopat-card {
  border: 1.5px solid #C9D6EC;
  border-radius: var(--radius-lg);
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(47, 76, 138, 0.05);
  overflow: hidden;
  margin-bottom: 16px;
}

.nopat-card-header {
  background: #E3EAF6;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1.5px solid #C9D6EC;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Con "Limpiar", el título y el botón se quedan en el mismo renglón también
   en celular (el título se parte en dos líneas si hace falta) — con
   flex-wrap el botón bajaba y parecía un elemento suelto de la tarjeta. */
.nopat-card-header:has(.btn-clear-hc-field) {
  flex-wrap: nowrap;
}
.nopat-card-header:has(.btn-clear-hc-field) h3 {
  min-width: 0;
}
.nopat-card-header:has(.btn-clear-hc-field) > div {
  flex-shrink: 0;
}

/* "Limpiar" (btn-clear-hc-field) reutiliza el estilo de .btn-record-mic, cuyo
   fondo #E3EAF6 es el mismo del encabezado — dentro de él se perdía. */
.nopat-card-header .btn-clear-hc-field {
  background-color: #FFFFFF;
}
.nopat-card-header .btn-clear-hc-field:hover {
  background-color: #F5F6F8;
}

/* En celular "Limpiar" sigue visible en cada tarjeta de Historia Clínica,
   solo más compacto para no apretar el título de la tarjeta. */
@media (max-width: 640px) {
  .nopat-card-header .btn-clear-hc-field {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* Nota Oncológica > Acciones Especiales: en celular los tres botones
   (Receta Oncológica / Generar Receta Médica / Órdenes Médicas) no caben en
   una sola fila y "Órdenes Médicas" se salía de la tarjeta. Se permite que
   bajen de renglón; !important porque el flex:1 viene inline en el HTML. */
@media (max-width: 640px) {
  #acc-acciones > div:has(> #btnOrdenesMedicasOnco) {
    flex-wrap: wrap !important;
  }
  #acc-acciones > div:has(> #btnOrdenesMedicasOnco) > button {
    flex: 1 1 140px !important;
    min-width: 0;
  }
}

.nopat-card-header h3 {
  font-size: 12px;
  font-weight: 800;
  color: #121418;
  letter-spacing: 0.05em;
  margin: 0;
  text-transform: uppercase;
}

.nopat-card-body {
  padding: 24px;
}

.nopat-card-body .disabled-section-box {
  margin: 0;
  border-radius: var(--radius-sm);
  padding: 24px;
}

/* --- STICKY PATIENT HEADER --- */
.patient-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg-main);
  padding: 16px 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  margin-left: -40px;
  margin-right: -40px;
}
.patient-back-btn:hover h1 {
  color: #1d4ed8 !important;
}

/* =========================================
   ANTECEDENTES PATOLÓGICOS STYLES
   ========================================= */

.repetable-block-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.repetable-block {
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
}

.repetable-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.repetable-block-header h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main);
  margin: 0;
}

.btn-remove-block {
  background: #64748B;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-remove-block:hover {
  background: #EF4444;
}

.btn-add-repetable {
  background: var(--bg-card);
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-add-repetable:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  background: #EFF6FF;
}

/* =========================================
   DIAGNÓSTICOS PREVIOS STYLES
   ========================================= */

.diagnostico-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
}

.diag-col-large {
  flex: 2;
}
.diag-col-small {
  flex: 0.5;
}

.btn-remove-row {
  background: #CBD5E1;
  color: white;
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-remove-row:hover {
  background: #EF4444;
}

.btn-add-diagnostico {
  background-color: var(--primary-blue);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-add-diagnostico:hover {
  background-color: #1D4ED8;
}

.blue-accordion {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  margin-top: 24px;
}

.blue-accordion-header {
  background-color: #2563EB;
  color: white;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.blue-accordion-header.active .accordion-chevron {
  transform: rotate(180deg);
}
.accordion-chevron {
  transition: transform 0.3s;
}

.blue-accordion-body {
  padding: 24px;
  background-color: var(--bg-card);
  display: block; /* default open */
}

.obs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.obs-full-width {
  grid-column: 1 / -1;
}

/* =========================================
   MEDICAMENTOS / TRATAMIENTOS STYLES
   ========================================= */

.meds-table-container {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.meds-table-header {
  display: flex;
  background-color: var(--bg-main);
  padding: 12px 24px;
  border-bottom: 1px solid var(--border-color);
  font-size: 10px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
}

.meds-table-row {
  display: flex;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  align-items: center;
  gap: 16px;
}

.meds-table-row input {
  min-width: 0;
}

.meds-table-row:last-child {
  border-bottom: none;
}

.meds-col-name { flex: 3; }
.meds-col-indications { flex: 2.5; }
.meds-col-dose { flex: 1; }
.meds-col-freq { flex: 1.5; }
.meds-col-time { flex: 2; }
.meds-col-origin { flex: 1.5; }
.meds-col-actions { flex: 0.5; text-align: right; }

.badge-nuevo-med {
  background-color: #DCFCE7;
  color: #166534;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  display: inline-block;
  border: 1px solid #BBF7D0;
}

.btn-remove-med {
  background: #FEE2E2;
  color: #EF4444;
  border: 1px solid #FECACA;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-remove-med:hover {
  background: #FECACA;
}

/* =========================================
   SECTIONS 8-13 STYLES
   ========================================= */

/* Buscador de pacientes: título de la sección de nombres parecidos
   ("¿Quisiste decir…?", ver renderPatientsGrid / renderPatientDropdown en
   app.js). Ocupa todo el ancho del grid de tarjetas. */
.patient-search-suggestions-title {
  grid-column: 1 / -1;
  width: 100%;
  margin: 8px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--border-color);
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.patient-search-suggestions-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.patient-search-suggestions-title.is-dropdown {
  margin: 0;
  padding: 8px 12px 4px;
  font-size: 10px;
}

/* Section 9: Aparatos y Sistemas Grid */
/* Columnas según el ancho disponible (no el de la pantalla): con el menú
   lateral y el índice de secciones de la HC abiertos, 3 columnas fijas
   dejaban cada tarjeta tan angosta que la barra del editor se apilaba en
   varias filas. Cada tarjeta mide al menos 360px; si no caben, baja a 2 o 1
   columna. */
.grid-aparatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
}

/* Son 7 tarjetas: en un grid de 2 o 3 columnas siempre sobra 1 sola en la
   última fila (7 no es múltiplo de 2 ni de 3). Sin esto, esa tarjeta ocupa
   solo 1 columna en vez de aprovechar el ancho libre de las columnas vacías
   junto a ella, quedando mucho más angosta que sus vecinas. */
.card-aparato:last-child {
  grid-column: 1 / -1;
}

.card-aparato {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  background-color: var(--bg-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-aparato-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.card-aparato-header label {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-main);
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/* El grupo Limpiar+Grabar (armado por initializeHCClearButtons en app.js):
   ahora que .card-aparato-header hace wrap, ya no hace falta impedirle
   encoger — puede pasar a su propia línea completa. Se le permite envolver
   internamente (Grabar debajo de Limpiar) en vez de forzar flex-shrink:0,
   que a zoom alto hacía que el grupo se saliera del borde de la tarjeta en
   vez de acomodarse. Cada botón individual sí conserva flex-shrink:0 más
   abajo para no verse minúsculo/ilegible. */
.card-aparato-header > div {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
}

.card-aparato-header .btn-record-mic {
  flex-shrink: 0;
  white-space: nowrap;
}

.card-aparato-header .btn-record-mic svg {
  flex-shrink: 0;
}

.card-aparato textarea {
  flex-grow: 1;
  min-height: 80px;
  resize: none;
}

/* =========================================
   DESIGN CLEANUP — View Toggle, Back Button, Responsive
   ========================================= */

/* View toggle buttons (Tarjeta/Lista) */
.view-toggle {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.view-toggle-btn {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-main);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.view-toggle-btn:hover {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
.view-toggle-btn.active {
  background: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

/* Patient back button in sticky header */
.patient-back-btn {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 24px;
  border-right: 1px solid var(--border-color);
  margin-right: 24px;
  transition: all 0.2s ease;
}
.patient-back-btn:hover {
  opacity: 0.8;
}
.patient-back-btn .back-arrow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary-blue);
}
.patient-back-btn .back-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}
.patient-back-btn .back-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  margin-top: 4px;
  padding-left: 32px;
}

/* Patient top card reset for sticky header */
.patient-top-card--header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Empty state for dashboard areas */
.empty-state-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 500;
}

/* Subtabs bar scroll indicator */
.expediente-subtabs-bar {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
  position: relative;
}
.expediente-subtabs-bar::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg-card));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.expediente-subtabs-bar:hover::after {
  opacity: 1;
}


/* =========================================
   MOBILE HAMBURGER BUTTON
   ========================================= */
.mobile-hamburger {
  display: none; /* Hidden on desktop */
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-main);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.2s;
}
.mobile-hamburger:active {
  transform: scale(0.95);
}

/* Sidebar overlay (dark backdrop when sidebar is open on mobile) — z-index
   190, no 45: por debajo de 900px el sidebar es un drawer a pantalla
   completa (ver ".sidebar, .sidebar.collapsed" en el media query de abajo),
   pero varios encabezados sticky "en página" (.patient-create-header,
   .patient-sticky-header, ...) usan z-index:100 — con 45 aquí, ese
   encabezado se seguía pintando ENCIMA del overlay y del propio drawer
   (ver .sidebar más abajo) al abrir el menú, mezclando su texto/botones
   ("Cancelar"/"Guardar Paciente") con el del menú. 190 queda por encima de
   cualquier sticky de ese tipo y por debajo de los modales reales (que
   arrancan en varios miles). */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 190;
  opacity: 0;
  transition: opacity 0.3s;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}

/* =========================================
   RESPONSIVE: 1200px — Tablets landscape
   ========================================= */
@media (max-width: 1200px) {
  .patient-cards-grid { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid-equal { grid-template-columns: 1fr; }
  .medico-cards-layout { grid-template-columns: 1fr; }
  .obs-grid { grid-template-columns: 1fr; }
}

/* =========================================
   RESPONSIVE: 900px — Tablets portrait
   ========================================= */
@media (max-width: 900px) {
  .patient-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .search-filter-card { flex-wrap: wrap; gap: 16px; }

  /* Expediente: sidebar + editor en columna */
  .expediente-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .expediente-sidebar {
    position: relative;
    top: auto;
  }
  /* .expediente-editor-card trae min-height: 540px pensado para ir al
     lado de la lista de la izquierda (columna de igual alto en desktop).
     Apilado debajo de la lista en móvil, la tarjeta vacía "Selecciona un
     archivo/consulta/orden/receta" (.empty-state-container, usada en
     Archivos/Consultas/Laboratorio/Recetas) se quedaba con esos 540px casi
     en blanco — solo tiene un ícono y dos líneas de texto centradas. No se
     toca .hc-section-content (mismo .expediente-editor-card pero con
     contenido real de Historia Clínica), que sí necesita su alto fijo. */
  .expediente-editor-card.empty-state-container {
    min-height: 0;
    padding: 32px 16px;
  }
  .hc-sections-list {
    max-height: 200px;
  }
}

/* =========================================
   RESPONSIVE: Móviles y Tablets (Sidebar Hamburger)
   ========================================= */
@media (max-width: 900px) {
  /* Show 3-bar hamburger menu button */
  .mobile-hamburger {
    display: flex !important;
  }

  /* El hamburger de 3 líneas es solo para ABRIR el drawer — mientras está
     abierto ya hay un botón de cerrar (X) dentro del propio sidebar, así
     que dejar las 3 líneas visibles encima era redundante y confuso. */
  body:has(#sidebar.mobile-open) .mobile-hamburger {
    display: none !important;
  }

  /* Ocultar totalmente el botón flotante (<) de contraer/desplegar */
  .toggle-sidebar-btn,
  .sidebar .toggle-sidebar-btn,
  .sidebar.collapsed .toggle-sidebar-btn {
    display: none !important;
  }

  /* Sidebar principal: 100% oculta fuera de pantalla hasta activar el menú de 3 barras */
  .sidebar,
  .sidebar.collapsed {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 280px !important;
    border-radius: 0 !important;
    transform: translateX(-100%) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, opacity 0.3s !important;
    /* 200, no 70 (valor de escritorio): en este breakpoint el sidebar es un
       drawer a pantalla completa, no la barra lateral fija de escritorio —
       necesita quedar por encima de los encabezados sticky "en página"
       (.patient-create-header, .patient-sticky-header, z-index:100), igual
       que .sidebar-overlay más arriba, si no el encabezado con
       "Cancelar"/"Guardar Paciente" se seguía viendo encima del menú. */
    z-index: 200 !important;
    box-shadow: 4px 0 25px rgba(0,0,0,0.2) !important;
    /* var(--bg-card) es blanco al 65% de opacidad (pensado para tarjetas
       sobre el fondo de la página) — en este drawer de pantalla completa
       dejaba transparentarse el header y el contenido de la página detrás,
       mezclándose con el texto del menú. El drawer necesita un fondo
       totalmente opaco. */
    background-color: #FFFFFF !important;
    padding: 24px 18px !important;
  }

  .sidebar.mobile-open,
  .sidebar.collapsed.mobile-open {
    transform: translateX(0) !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Forzar visibilidad completa de textos y logos al abrir en móvil */
  .sidebar.mobile-open .logo-text,
  .sidebar.collapsed.mobile-open .logo-text,
  .sidebar.mobile-open .user-details,
  .sidebar.collapsed.mobile-open .user-details,
  .sidebar.mobile-open .user-chevron,
  .sidebar.collapsed.mobile-open .user-chevron,
  .sidebar.mobile-open .grid-btn,
  .sidebar.collapsed.mobile-open .grid-btn {
    display: flex !important;
  }

  .sidebar.mobile-open .nav-section-title,
  .sidebar.collapsed.mobile-open .nav-section-title {
    display: block !important;
  }

  .sidebar.mobile-open .nav-item span,
  .sidebar.collapsed.mobile-open .nav-item span {
    display: inline-block !important;
  }

  .sidebar.mobile-open .nav-item,
  .sidebar.collapsed.mobile-open .nav-item {
    justify-content: flex-start !important;
    padding: 10px 14px !important;
  }

  .sidebar.mobile-open .user-profile-card,
  .sidebar.collapsed.mobile-open .user-profile-card {
    justify-content: space-between !important;
    padding: 10px !important;
  }

  .sidebar.mobile-open .sidebar-header,
  .sidebar.collapsed.mobile-open .sidebar-header {
    justify-content: space-between !important;
    padding: 0 4px !important;
  }

  .sidebar.mobile-open .mobile-close-sidebar-btn,
  .sidebar.collapsed.mobile-open .mobile-close-sidebar-btn {
    display: flex !important;
  }

  .sidebar.mobile-open .logo-container,
  .sidebar.collapsed.mobile-open .logo-container {
    justify-content: flex-start !important;
  }

  /* Main wrapper: ocupa todo el ancho sin dejar margen para sidebar */
  .main-wrapper,
  .main-wrapper.sidebar-collapsed {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 76px 16px 24px 16px !important;
  }

  /* El sidebar queda oculto fuera de pantalla en este breakpoint (ver más
     arriba), así que los modales ya no necesitan reservarle espacio — se
     centran en el viewport completo como en cualquier modal normal. */
  .modal-overlay,
  body:has(#sidebar.collapsed) .modal-overlay {
    padding-left: 20px !important;
  }

  /* El banner del paciente (position:sticky) trae z-index:100 para quedar
     por encima del contenido normal al hacer scroll — en desktop nunca
     choca con el sidebar porque .main-wrapper tiene margin-left y no
     invade su columna. En móvil el drawer del sidebar SÍ se superpone
     sobre el mismo espacio en pantalla (.main-wrapper pierde ese margen),
     así que con z-index:100 > 70 el banner terminaba pintándose encima del
     menú abierto en vez de quedar tapado/oscurecido detrás. */
  .patient-sticky-header {
    z-index: 10 !important;
  }

  /* Dashboard header */
  .dashboard-header {
    flex-direction: column;
    gap: 12px;
  }
  .welcome-title {
    font-size: 22px;
  }

  /* Metrics: 1 column */
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-grid-equal {
    grid-template-columns: 1fr;
  }

  /* Patient cards */
  .patient-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Pacientes header */
  .pacientes-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  /* Search filter: stack vertically */
  .search-filter-card {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .search-radio-group {
    gap: 12px;
  }

  /* Patient sticky header */
  .patient-sticky-header {
    padding: 12px 16px;
    margin-left: -16px;
    margin-right: -16px;
  }
  .patient-back-btn .back-title {
    font-size: 18px;
  }
  .patient-back-btn {
    padding-right: 16px;
    margin-right: 16px;
  }

  /* Patient info pills: 2 columns */
  .patient-info-pills-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Patient actions row */
  .patient-actions-row {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Expediente: full single column */
  .expediente-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .expediente-layout > * { min-width: 0; }
  .expediente-sidebar {
    position: relative;
    top: auto;
    align-self: auto;
  }
  .hc-sections-list {
    max-height: 180px;
  }
  .expediente-editor-card {
    padding: 16px;
  }
  .expediente-editor-card.hc-section-content {
    height: auto;
  }

  /* Subtabs: smaller text */
  .expediente-subtab {
    padding: 6px 10px;
    font-size: 10px;
  }

  /* Agenda */
  .calendar-week-grid {
    overflow-x: auto;
  }

  /* Info Médico */
  .medico-cards-layout {
    grid-template-columns: 1fr;
  }

  /* Tratamientos table */
  .tratamientos-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Modals: full width */
  .modal-content {
    width: 95%;
    max-width: none;
    margin: 16px;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* Accordion body */
  .accordion-body {
    padding: 16px;
  }

  /* Familiar row — !important: Signos Vitales, Nota Oncológica, Receta
     Oncológica y Crear Receta Médica (paciente-detail.html) fijan
     grid-template-columns por style="..." inline (auto-fit, minmax(180px,
     1fr)) sobre este mismo .familiar-row-2col — un inline SIEMPRE gana
     sobre una regla de hoja de estilos sin importar el media query, así
     que sin !important este colapso a 1 columna nunca aplicaba ahí: en
     pantallas angostas esas 4 pantallas quedaban con 2 columnas de ~150px
     (menos que el mínimo de 180px que pide su propio minmax) y el
     contenido largo (nombre completo, fecha) se veía cortado. */
  .familiar-row-2col {
    grid-template-columns: 1fr !important;
  }
  /* Con una sola columna, los hijos con grid-column: span 2 inline (Alergias,
     Fecha y hora de ingreso...) crean una 2da columna implícita y el resto
     de campos se apretujan/encimen. */
  .familiar-row-2col > * {
    grid-column: 1 / -1 !important;
  }
  /* "Expediente / Ciclo" de la Nota de Oncología: 50/50 recortaba "Expediente: 0017". */
  #oncoExpediente { width: 68% !important; }
  #oncoCiclo { width: 32% !important; }

  /* Diagnostico row */
  .diagnostico-row {
    flex-direction: column;
  }

  /* Bottom save button */
  .sticky-bottom-save-container {
    padding: 12px 16px;
  }
}

/* =========================================
   RESPONSIVE: 480px — Móviles pequeños
   ========================================= */
@media (max-width: 480px) {
  .main-wrapper {
    padding: 64px 12px 20px 12px;
  }

  /* Patient cards: 1 column */
  .patient-cards-grid {
    grid-template-columns: 1fr;
  }

  /* Info pills: 1 column */
  .patient-info-pills-row {
    grid-template-columns: 1fr;
  }

  /* Sticky header: compact */
  .patient-sticky-header {
    padding: 10px 12px;
    margin-left: -12px;
    margin-right: -12px;
  }
  .patient-back-btn .back-title {
    font-size: 16px;
  }
  .patient-back-btn .back-subtitle {
    display: none;
  }

  /* Expediente editor */
  .expediente-editor-card {
    padding: 12px;
  }

  /* Encabezado de detalle (Órdenes Médicas / Recetas): título+botones en
     una sola fila con justify-content:space-between se salía de la
     pantalla en celular — el grupo de botones (Imprimir/Editar/Eliminar)
     quedaba recortado fuera del viewport. Con flex-wrap el grupo de
     botones baja a su propia fila cuando no cabe junto al título. */
  .expediente-detail-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .expediente-detail-header-actions {
    flex-wrap: wrap;
  }
  .editor-top-nav {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  /* Section items: smaller */
  .hc-section-item {
    font-size: 10px;
    padding: 6px 8px;
  }

  /* Sidebar actions: horizontal on mobile */
  .expediente-sidebar-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .btn-hc-action {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    padding: 6px;
  }

  /* Welcome title */
  .welcome-title {
    font-size: 18px;
  }

  /* Tab buttons */
  .tab-btn {
    font-size: 11px;
    padding: 6px 12px;
  }

  .dash-donut-wrap {
    max-width: 150px;
  }

  /* Modal */
  .modal-content {
    margin: 8px;
    width: calc(100% - 16px);
  }

  /* Checkbox grid */
  .checkbox-grid {
    grid-template-columns: 1fr;
  }

  /* Content cards */
  .content-card .card-body {
    padding: 16px;
  }
}

/* ============================================================
   NUEVO PACIENTE (CREATION VIEW) STYLES
   ============================================================ */
/* Esta página traía su propio tope fijo (1000px, después subido a 1400/
   1700/2000px) independiente del de .main-wrapper — en monitores grandes/
   ultrawide seguía quedando pegada a la izquierda con espacio de sobra sin
   usar. El resto de las páginas (ej. .expediente-layout de Paciente Detail)
   no tienen ningún tope propio: simplemente llenan el 100% de lo que
   .main-wrapper les da, y es ese wrapper el que ya escala en pantallas
   grandes (ver sección "PANTALLAS GRANDES" más arriba). Se iguala el
   criterio acá en vez de mantener un límite propio que nunca alcanza. */
.patient-create-page {
  max-width: 100%;
  padding-bottom: 80px;
}

.patient-create-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  margin: -32px -32px 32px -32px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .patient-create-header {
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
  background: var(--bg-card);
}

.back-pill-indicator {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-blue);
  background: var(--primary-blue-light);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.patient-create-actions {
  display: flex;
  gap: 12px;
}

/* Title block with ID badge */
.patient-create-info-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  margin-top: 24px;
  margin-bottom: 24px;
}

.info-block-main {
  flex: 1;
}

.patient-create-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.patient-create-subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.info-block-exp {
  flex-shrink: 0;
}

.exp-badge-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.exp-badge-container label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exp-id-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-main);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 16px;
  font-size: 20px;
  font-weight: 800;
  color: var(--primary-blue);
  transition: all var(--transition-speed);
}

.exp-id-wrapper:focus-within {
  border-color: var(--primary-blue);
}

.exp-hash {
  color: var(--text-subtle);
  margin-right: 4px;
}

.exp-id-wrapper input {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  width: 90px;
  padding: 0;
  outline: none;
}

.exp-help-text {
  font-size: 11px;
  color: var(--text-subtle);
}

/* Sections of the creation form */
.patient-create-section {
  padding: 32px;
  margin-bottom: 24px;
}

.patient-create-section .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.section-icon-bullet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--primary-blue-light);
  color: var(--primary-blue);
  font-size: 12px;
  font-weight: 800;
  border-radius: 50%;
}

.patient-create-section .section-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

/* Grid layout for fields */
.form-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

.form-grid:last-child {
  margin-bottom: 0;
}

.form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-group input:not([type="checkbox"]) {
  height: 44px;
  width: 100%;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  transition: all var(--transition-speed);
  outline: none;
}

/* Diseño de <select> tomado de la versión anterior del diseño: flecha propia en vez de
   la nativa del navegador (que se ve distinta e inconsistente entre
   Chrome/Firefox/Safari), con el mismo efecto de elevación al hover y aro
   morado al enfocar que ya usan el resto de los campos. Selector genérico
   (no solo .form-group select) para que aplique a TODOS los <select> de la
   app — incluidos los .familiar-input y los que no tienen ninguna clase —
   ya que quedarse solo en .form-group dejaba fuera la mayoría. */
select {
  height: 44px;
  padding: 10px 40px 10px 16px;
  /* Muchos <select class="custom-select"> traen su propio padding inline
     (ej. "padding: 8px 12px") que por especificidad le gana al de arriba —
     sin esto la flecha nueva quedaba encimada con el texto de la opción en
     esos campos. Solo se fuerza el lado derecho; el resto de cada campo
     conserva su padding propio. */
  padding-right: 40px !important;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237C3AED' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

select:hover:not(:disabled) {
  border-color: var(--primary-blue);
  background-color: rgba(47, 76, 138, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 76, 138, 0.12);
  background-position: right 14px center;
}

select:focus {
  border-color: var(--primary-blue) !important;
  background-color: var(--bg-card) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236D28D9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(47, 76, 138, 0.18), 0 6px 16px rgba(47, 76, 138, 0.15) !important;
}

/* Campos de solo-hora (sin fecha, ej. "Hora de Egreso") que se quedan con
   el picker nativo del navegador — datetime-local ya NO entra aquí, ahora
   lo reemplaza el widget propio (ver enhanceCustomDatePicker, sección de
   hora). Esto solo tiñe el acento del popup nativo de time (flechas del
   spinner) al morado de la app — mismo accent-color que ya usan los
   checkboxes/radios de la página. */
input[type="time"] {
  accent-color: var(--primary-blue);
  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDGET DE SELECT PERSONALIZADO — portado de la versión anterior del diseño
   (enhanceCustomSelect en app.js). Envuelve cada <select> real (que se
   oculta pero se mantiene como fuente de verdad del valor) con este
   trigger + menú flotante, para que el desplegable se vea igual en toda
   la app en vez de depender del popup nativo del navegador.
   ═══════════════════════════════════════════════════════════════════════ */
.custom-select-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.custom-select-container.is-open {
  z-index: 99999 !important;
}

.custom-select-trigger {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  user-select: none;
  box-sizing: border-box;
}

.custom-select-trigger:hover:not(:disabled) {
  border-color: var(--primary-blue);
  background-color: rgba(47, 76, 138, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 76, 138, 0.12);
}

/* Ej. filtros de Ubicación/Sala de la Agenda cuando el filtro "Tipo de
   cita" está en Consulta (esos campos no aplican y no filtrarían nada). */
.custom-select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--bg-main);
}

.custom-select-container.is-open .custom-select-trigger {
  border-color: var(--primary-blue) !important;
  background-color: var(--bg-card) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(47, 76, 138, 0.18), 0 6px 16px rgba(47, 76, 138, 0.15) !important;
}

.custom-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  /* Sin esto el texto largo no se recorta: un elemento flex no se encoge por
     debajo de su contenido y ensanchaba el selector (y su columna). */
  min-width: 0;
  text-align: left;
}

.custom-select-trigger.is-placeholder .custom-select-label {
  color: var(--text-muted);
  font-weight: 500;
}

.custom-select-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2F4C8A;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.custom-select-container.is-open .custom-select-arrow {
  transform: rotate(180deg);
  color: #1C2F57;
}

.custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 999999 !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid rgba(47, 76, 138, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(47, 76, 138, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96) translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s ease;
  pointer-events: none;
  box-sizing: border-box;
}

.custom-select-container.is-open .custom-select-menu {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

/* .opens-upward: agregada por JS (openMenu, app.js) cuando no cabe hacia
   abajo — sin esto el desplegable de un select pegado al borde inferior
   de la pantalla (ej. Hora/Minuto/a.m.-p.m. del widget de fecha+hora)
   se salía de la vista sin ninguna forma de tocar sus opciones. */
.custom-select-container.opens-upward .custom-select-menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.custom-select-option {
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 2px;
  user-select: none;
}

/* Filtros de la Agenda (tipo, ubicación, sala): el desplegable medía lo mismo
   que el botón y las opciones se partían en dos renglones ("Sala / C"); ahora
   cada opción va en una sola línea y el desplegable crece a lo que necesite.
   El de Sala, pegado a la derecha, se alinea por la derecha para no salirse. */
.tipo-cita-filter-container .custom-select-menu { right: auto; min-width: 100%; width: max-content; }
.tipo-cita-filter-container .custom-select-option { white-space: nowrap; }
.tipo-cita-filter-container:has(#agendaSalaFilter) .custom-select-menu { left: auto; right: 0; }

.custom-select-option:last-child {
  margin-bottom: 0;
}

.custom-select-option:hover:not(.disabled) {
  background-color: #F3E8FF;
  color: #1C2F57;
  transform: translateX(4px);
}

.custom-select-option.selected {
  background: #E3EAF6 !important;
  color: #5B21B6 !important;
  font-weight: 800 !important;
  border-left: 4px solid #2F4C8A !important;
  box-shadow: 0 2px 8px rgba(47, 76, 138, 0.12) !important;
}

.option-check-icon {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

[data-theme="dark"] .custom-select-menu {
  background-color: #1E293B;
  border-color: rgba(47, 76, 138, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .custom-select-option {
  color: #F8FAFC;
}

[data-theme="dark"] .custom-select-option:hover:not(.disabled) {
  background-color: #334155;
  color: #C9D6EC;
}

[data-theme="dark"] .custom-select-option.selected {
  background: linear-gradient(135deg, #1C2F57 0%, #5B21B6 100%);
  color: #FFFFFF !important;
}

/* .rt-select-* (barra de texto enriquecido) usa var(--bg-card)/var(--border-
   color)/var(--text-main) en el trigger, así que ya se adapta solo — solo
   el menú flotante y el estado "selected" llevan colores fijos (mismo
   motivo que .custom-select-menu arriba), y necesitan el mismo override. */
[data-theme="dark"] .rt-select-menu {
  background-color: #1E293B;
  border-color: rgba(47, 76, 138, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .rt-select-option { color: #F8FAFC; }

[data-theme="dark"] .rt-select-option:hover {
  background-color: #334155;
  color: #C9D6EC;
}

[data-theme="dark"] .rt-select-option.selected {
  background: linear-gradient(135deg, #1C2F57 0%, #5B21B6 100%);
  color: #FFFFFF;
}

/* El <select> real queda display:none tras enhanceCustomSelect(); sin esto
   los contenedores con overflow:hidden (.nopat-card, etc.) recortaban el
   menú flotante cuando se abría dentro de ellos. */
.form-grid-2,
.form-group {
  overflow: visible !important;
}

/* .custom-date-container.is-open ya NO está en esta lista: el panel de
   fecha/hora se porta a <body> antes de hacerse visible (ver openPanel en
   app.js), así que no necesita que ningún ancestro cambie su overflow para
   dejarlo escapar. Dejarlo aquí era el motivo real de que el modal de
   "Registro Clínico de Enfermería" perdiera su scroll al abrir el campo de
   hora: el wrapper (.custom-date-container) SIGUE siendo descendiente de
   .modal-body aunque el panel ya se haya movido a <body>, así que al
   agregarle la clase is-open este :has() disparaba igual, cambiando
   .modal-body de overflow-y:auto a overflow:visible — y ese cambio de
   overflow es lo que reseteaba scrollTop a 0 en Chrome. El <select> nativo
   (.custom-select-container) sí sigue necesitando esta regla porque ese
   widget no se porta a <body>. */
/* :not(.custom-date-panel): el panel de fecha+hora (portado a <body>, ver
   openPanel en enhanceCustomDatePicker) también recibe la clase genérica
   has-open-select cuando su propio select anidado de Hora/Minuto/a.m.-p.m.
   se abre (ver el recorrido de ancestros en openMenu, app.js) — pero esta
   regla compartida le pisaba su position:fixed (necesario para que
   quede posicionado respecto al viewport real, no a su antiguo contenedor)
   con position:relative !important, mandándolo a coordenadas fuera de
   pantalla (confirmado con getComputedStyle: position "relative", top
   negativo) sin que ninguna clase se quitara — el panel seguía "abierto"
   por dentro, solo invisible. El panel ya tiene su propia regla de
   overflow más abajo (.custom-date-panel:has(...)), no necesita nada de
   esta. */
.has-open-select:not(.custom-date-panel),
.nopat-card:has(.custom-select-container.is-open),
.accordion-content:has(.custom-select-container.is-open),
.accordion-item:has(.custom-select-container.is-open),
.form-group:has(.custom-select-container.is-open),
.onco-accordion-content:has(.custom-select-container.is-open),
.onco-accordion-item:has(.custom-select-container.is-open),
.patient-create-section:has(.custom-select-container.is-open),
.nc-block-card:has(.custom-select-container.is-open),
table:has(.custom-select-container.is-open),
td:has(.custom-select-container.is-open),
/* .modal-body no estaba en esta lista original: tiene overflow-y:auto propio
   (para scrollear formularios largos dentro del modal), y aunque el menú
   flotante es position:absolute, sigue contando dentro del scrollHeight de
   ese ancestro con overflow:auto — al abrir "Doctor Asignado" en Crear
   Orden Médica esto hacía aparecer/desaparecer la barra de scroll del
   modal (y con ella el ancho disponible) al pasar el mouse por la lista,
   viéndose como si el modal se expandiera y contrajera.
   :not(:has(.custom-date-time-section ...)) excluye a propósito los
   selects de Hora/Minuto/a.m.-p.m. del widget de fecha+hora (Registro
   Clínico de Enfermería, "Fecha y Hora de Ingreso") — ESOS vuelven a
   disparar esta misma regla (su .custom-select-container.is-open sigue
   contando para este :has() aunque el panel dueño ya esté portado fuera
   de .modal-body), y activarla ahí reacomodaba TODO el modal (aparecía/
   desaparecía la barra de scroll del modal completo) apenas se abría el
   desplegable de la hora — se veía como si el calendario "se cerrara
   solo" o "se moviera el fondo". Esos ya tienen su propia excepción más
   abajo (.custom-date-panel:has(...)), no necesitan esta. */
.modal-body:has(.custom-select-container.is-open:not(.fixed-menu)):not(:has(.custom-date-time-section .custom-select-container.is-open)) {
  z-index: 99999 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Los selects de hora/minuto/AM-PM del widget de fecha+hora abren su
   desplegable DENTRO de .custom-date-panel — ese panel ya tiene su propio
   scroll (overflow-y: auto, ver arriba) para el caso de fecha+hora que no
   cabe entera en pantalla, así que necesita su propia excepción en vez de
   heredar "position: relative" de la regla de arriba (que le rompería el
   position: absolute con el que se posiciona bajo el trigger). */
.custom-date-panel:has(.custom-select-container.is-open) {
  overflow: visible !important;
}

/* ECOG/Karnofsky: opciones con texto largo, el menú necesita más ancho. */
.custom-select-container:has(#selectECOG) .custom-select-menu,
.custom-select-container:has(#selectKarnofsky) .custom-select-menu,
#selectECOG + .custom-select-container .custom-select-menu,
#selectKarnofsky + .custom-select-container .custom-select-menu {
  min-width: 320px !important;
  width: max-content !important;
  max-width: 520px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
}

.custom-select-container:has(#selectECOG) .custom-select-option,
.custom-select-container:has(#selectKarnofsky) .custom-select-option,
#selectECOG + .custom-select-container .custom-select-option,
#selectKarnofsky + .custom-select-container .custom-select-option {
  white-space: normal !important;
}

/* Lo mismo pero para el trigger YA CERRADO: .custom-select-label fuerza
   white-space:nowrap + ellipsis en todos los selects (bien para un valor
   corto tipo "Seleccionar médico"), pero acá el texto elegido es la
   descripción clínica completa de la escala — se veía cortado a media
   frase en vez de la línea completa. Se deja envolver en varias líneas y
   el trigger crece con el contenido en vez de quedar fijo a 44px. */
.custom-select-container:has(#selectECOG) .custom-select-trigger,
.custom-select-container:has(#selectKarnofsky) .custom-select-trigger,
#selectECOG + .custom-select-container .custom-select-trigger,
#selectKarnofsky + .custom-select-container .custom-select-trigger {
  height: auto !important;
  min-height: 44px;
  align-items: flex-start !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.custom-select-container:has(#selectECOG) .custom-select-label,
.custom-select-container:has(#selectKarnofsky) .custom-select-label,
#selectECOG + .custom-select-container .custom-select-label,
#selectKarnofsky + .custom-select-container .custom-select-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.4;
}

.custom-select-container:has(#selectECOG) .custom-select-arrow,
.custom-select-container:has(#selectKarnofsky) .custom-select-arrow,
#selectECOG + .custom-select-container .custom-select-arrow,
#selectKarnofsky + .custom-select-container .custom-select-arrow {
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   WIDGET DE FECHA PERSONALIZADO (enhanceCustomDatePicker en app.js)
   Mismo patrón que el select personalizado de arriba: oculta el
   <input type="date"> real (que se mantiene como fuente de verdad del
   valor) y lo envuelve con un trigger + panel flotante con el mismo
   lenguaje visual (morado, radios, sombras). El panel tiene 3 vistas
   (días → meses → años) para poder saltar a un año antiguo en 2-3 clics
   en vez de retroceder mes a mes con las flechas del calendario nativo.
   ═══════════════════════════════════════════════════════════════════════ */
.custom-date-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}

.custom-date-container.is-open {
  z-index: 99999 !important;
}

.custom-date-trigger {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  user-select: none;
  box-sizing: border-box;
}

.custom-date-trigger:hover:not(:disabled) {
  border-color: var(--primary-blue);
  background-color: rgba(47, 76, 138, 0.03);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(47, 76, 138, 0.12);
}

/* Sin esta regla el trigger deshabilitado se quedaba con el fondo blanco
   translúcido de siempre (var(--bg-card)) en vez del mismo morado opaco
   que ya usan los demás campos de solo lectura del formulario
   (.info-general-field:disabled) — se notaba distinto solo en los campos
   de fecha (Fecha de Nacimiento, etc.) mientras la sección no está en
   modo edición. */
.custom-date-trigger:disabled,
.custom-date-container.disabled .custom-date-trigger {
  background-color: var(--bg-main) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main);
  opacity: 0.9;
  cursor: default;
  box-shadow: none;
}

.custom-date-trigger:disabled .custom-date-icon,
.custom-date-container.disabled .custom-date-icon {
  color: var(--text-muted);
}

.custom-date-trigger:disabled .custom-date-clear,
.custom-date-container.disabled .custom-date-clear {
  display: none !important;
}

.custom-date-container.is-open .custom-date-trigger {
  border-color: var(--primary-blue) !important;
  background-color: var(--bg-card) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(47, 76, 138, 0.18), 0 6px 16px rgba(47, 76, 138, 0.15) !important;
}

.custom-date-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2F4C8A;
  flex-shrink: 0;
}

.custom-date-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

/* El label con hora ("25 de agosto de 2026, 10:56 p.m.") es más largo que
   uno de solo fecha — en columnas angostas se recortaba con "..." en vez
   de acomodarse. Deja crecer el trigger a 2 líneas en vez de truncar; los
   triggers de solo fecha no llevan esta clase y conservan su una sola
   línea de siempre. */
.custom-date-container.is-datetime .custom-date-trigger {
  height: auto;
  min-height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.custom-date-container.is-datetime .custom-date-label {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  line-height: 1.3;
}

.custom-date-trigger.is-placeholder .custom-date-label {
  color: var(--text-muted);
  font-weight: 500;
}

.custom-date-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transition: all 0.2s ease;
}

.custom-date-clear:hover {
  color: var(--accent-red);
  background: var(--accent-red-bg);
}

.custom-date-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  /* width:0 (no 300px) mientras está cerrado: aunque invisible
     (opacity:0/visibility:hidden, no display:none), un panel
     position:absolute de 300px dentro de un campo angosto (ej. "Hora de
     Captura" en una fila junto a otro campo) sigue sumando su ancho al
     área de scroll de cualquier ancestro con overflow-x, generando una
     barra de scroll horizontal permanente sin nada visible que la
     justifique. Con width:0 cerrado no aporta nada que desbordar; el ancho
     real (300px) solo se aplica al abrirse, ver la regla de abajo. */
  width: 0;
  z-index: 999999 !important;
  background-color: #FFFFFF !important;
  border: 1.5px solid rgba(47, 76, 138, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(47, 76, 138, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transform: scale(0.96) translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s ease;
  pointer-events: none;
  box-sizing: border-box;
  /* El panel de fecha+hora es más alto que el de solo fecha (trae la
     sección de HORA debajo del calendario) — con esto trae su propio
     scroll en vez de arriesgarse a no caber en pantallas bajas. */
  max-height: min(420px, calc(100vh - 90px));
}

/* .custom-date-container.is-open .custom-date-panel (ancestro) NO alcanza
   sola: al abrirse, el panel se saca como hijo directo de <body> (ver el
   "portal" en openPanel, app.js) para escapar de cualquier modal/tarjeta
   con su propio scroll u overflow recortado en el camino — en ese momento
   deja de ser descendiente de .custom-date-container, así que se repite la
   visibilidad con esta clase puesta directo en el panel. */
.custom-date-container.is-open .custom-date-panel,
.custom-date-panel.is-open-self {
  width: 300px;
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.custom-date-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 10px;
}

.custom-date-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.custom-date-nav-btn:hover {
  background: #F3E8FF;
  color: #1C2F57;
}

/* Etiqueta central del header ("agosto de 2026") — clickeable para saltar
   directo a la vista de meses/años y así evitar navegar mes a mes cuando
   se necesita un año lejano (fechas de nacimiento). */
.custom-date-title-btn {
  flex: 1;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 700;
  text-transform: capitalize;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-date-title-btn:hover {
  background: #F3E8FF;
  color: #1C2F57;
}

.custom-date-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.custom-date-weekdays span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.custom-date-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.custom-date-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-main);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-date-day:hover:not(.is-selected):not(.is-disabled) {
  background: #F3E8FF;
  color: #1C2F57;
}

.custom-date-day.is-other-month {
  color: var(--text-subtle);
  opacity: 0.5;
}

.custom-date-day.is-today {
  box-shadow: inset 0 0 0 1.5px #2F4C8A;
  font-weight: 800;
}

.custom-date-day.is-selected {
  background: #2F4C8A !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(47, 76, 138, 0.35) !important;
}

.custom-date-day.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.custom-date-months-grid,
.custom-date-years-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.custom-date-cell {
  padding: 12px 6px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--bg-main);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-date-cell:hover:not(.is-selected) {
  background: #F3E8FF;
  color: #1C2F57;
}

.custom-date-cell.is-today {
  box-shadow: inset 0 0 0 1.5px #2F4C8A;
}

.custom-date-cell.is-selected {
  background: #2F4C8A !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(47, 76, 138, 0.35) !important;
}

/* En el widget de fecha+hora, el panel puede superar su max-height (ver
   .custom-date-panel) y volverse scrolleable — sin position:sticky el
   footer (Borrar/Hoy/Aceptar) se iba con el resto del contenido y quedaba
   fuera de vista tras el bloque de HORA, sin ninguna forma de confirmar
   sin antes descubrir que había que hacer scroll dentro del popup. El
   margin/padding negativos extienden el footer hasta el borde real del
   panel (contrarrestando el padding:14px de .custom-date-panel) para que
   quede pegado al fondo sin dejar un resto de espacio en blanco debajo. */
.custom-date-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px -14px -14px;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--border-color);
  position: sticky;
  bottom: -14px;
  background-color: #FFFFFF;
  z-index: 1;
}

.custom-date-footer-btn {
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
}

.custom-date-footer-btn.is-clear {
  color: var(--text-muted);
}

.custom-date-footer-btn.is-clear:hover {
  color: var(--accent-red);
  background: var(--accent-red-bg);
}

.custom-date-footer-btn.is-today {
  color: #2F4C8A;
}

.custom-date-footer-btn.is-today:hover {
  background: #F3E8FF;
  color: #1C2F57;
}

/* Botón "Aceptar" — solo aparece en el widget de fecha+hora (datetime-
   local), donde hace falta un cierre explícito distinto de picar un día
   (que deja el panel abierto para poder ajustar la hora). */
.custom-date-footer-btn.is-accept {
  background: #2F4C8A;
  color: #FFFFFF !important;
}

.custom-date-footer-btn.is-accept:hover {
  background: #1C2F57;
}

/* Sección de hora del widget datetime-local: 3 <select> reales (hora,
   minuto, a.m./p.m.) que enhanceCustomSelect ya envuelve automáticamente
   con el mismo diseño de dropdown morado que el resto de la app — acá
   solo se define el layout de la fila. */
.custom-date-time-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.custom-date-time-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.custom-date-time-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.custom-date-time-row .custom-select-container {
  flex: 1 1 0;
  min-width: 0;
}

.custom-date-time-select {
  display: none;
}

.custom-date-time-sep {
  font-weight: 800;
  color: var(--text-muted);
  flex-shrink: 0;
}

/* Reemplazan a hourSelect/minuteSelect/ampmSelect (ver enhanceCustomTimePicker)
   — inputs/botones normales, sin ningún popup propio, para no volver a tener
   un desplegable anidado dentro del panel de hora. */
.custom-date-time-input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 40px;
  text-align: center;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.custom-date-time-input:hover:not(:focus) {
  border-color: rgba(47, 76, 138, 0.4);
}

.custom-date-time-input:focus {
  border-color: #2F4C8A;
  box-shadow: 0 0 0 2px rgba(47, 76, 138, 0.15);
  transform: translateY(-1px);
}

.custom-date-ampm-toggle {
  display: flex;
  flex: 1.2 1 0;
  min-width: 0;
  gap: 4px;
  background: var(--bg-main);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3px;
}

.custom-date-ampm-btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-md) - 3px);
  padding: 7px 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-date-ampm-btn:hover:not(.active):not(:disabled) {
  background: rgba(47, 76, 138, 0.1);
  color: #2F4C8A;
}

.custom-date-ampm-btn.active {
  background: #2F4C8A;
  color: #FFFFFF;
}

[data-theme="dark"] .custom-date-panel {
  background-color: #1E293B !important;
  border-color: rgba(47, 76, 138, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .custom-date-footer {
  background-color: #1E293B;
}

[data-theme="dark"] .custom-date-nav-btn:hover,
[data-theme="dark"] .custom-date-title-btn:hover,
[data-theme="dark"] .custom-date-day:hover:not(.is-selected):not(.is-disabled),
[data-theme="dark"] .custom-date-cell:hover:not(.is-selected) {
  background: #334155;
  color: #C9D6EC;
}

[data-theme="dark"] .custom-date-cell {
  background: #0B0F17;
}

/* El <input type="date"> real queda display:none tras
   enhanceCustomDatePicker(); a diferencia del select personalizado, este
   panel se porta a <body> antes de hacerse visible (ver openPanel en
   app.js), así que no depende de la regla de .form-group/.form-grid-2 ni
   de la lista de :has() de más arriba para escapar de tarjetas con
   overflow:hidden — sale del árbol de esas tarjetas por completo. */

/* .form-group textarea se quedó fuera de la regla de arriba (el modo oscuro
   sí la incluye, más abajo) — cualquier textarea dentro de .form-group
   quedaba con el estilo por defecto del navegador en modo claro. */
.form-group textarea {
  padding: 10px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  background-color: var(--bg-card);
  color: var(--text-main);
  font-family: inherit;
  font-size: 14px;
  transition: all var(--transition-speed);
  outline: none;
}

.form-group input:not([type="checkbox"]):focus,
.form-group textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Disabled inputs and selects for light and dark themes */
select:disabled,
input:disabled,
.form-group select:disabled,
.form-group input:disabled {
  background-color: #F1F5F9;
  color: #94A3B8;
  border-color: #CBD5E1;
  cursor: not-allowed;
  opacity: 0.8;
}

[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme="dark"] select:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] .form-group select:disabled,
[data-theme="dark"] .form-group input:disabled {
  background-color: #0F172A !important;
  color: #64748B !important;
  border-color: #1E293B !important;
  opacity: 0.85;
  cursor: not-allowed;
}

[data-theme="dark"] select option {
  background-color: #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] select option:disabled {
  color: #64748B !important;
}

.required-star {
  color: var(--accent-red);
}

/* Visibility toggling helper */
.hidden {
  display: none !important;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .form-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .patient-create-header {
    /* El margen superior solo debe cancelar el margin-bottom (32px) del
       .dashboard-header que siempre lo precede — un valor mayor (p.ej.
       -70px) hace que este header choque/se superponga con el de
       bienvenida en vez de quedar pegado justo debajo. */
    margin: -32px -16px 20px -16px;
    padding: 12px 16px;
  }
  
  .patient-create-info-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    margin-top: 12px;
  }
  
  .exp-badge-container {
    align-items: flex-start;
  }
  
  .patient-create-section {
    padding: 20px;
  }
}

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

/* =========================================
   TÉRMINOS Y CONDICIONES (CHECKBOX)
   ========================================= */
.terms-group {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.terms-checkbox-container {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
}

.terms-checkbox-container input[type="checkbox"] {
  display: none !important;
}

.terms-checkbox-container .checkbox-box {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border: 1.5px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--bg-main);
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.terms-checkbox-container:hover .checkbox-box {
  border-color: var(--primary-blue);
}

.terms-checkbox-container input[type="checkbox"]:checked + .checkbox-box {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.terms-checkbox-container input[type="checkbox"]:checked + .checkbox-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.terms-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-main);
}

[data-theme="dark"] .terms-checkbox-container .checkbox-box {
  background-color: var(--bg-main);
  border-color: var(--border-color);
}

[data-theme="dark"] .terms-text {
  color: var(--text-main);
}

/* =========================================
   INFORMACIÓN GENERAL - ACCORDION EDIT MODE
   ========================================= */
.btn-icon-edit {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: all 0.2s ease;
}

.btn-icon-edit:hover {
  background: var(--primary-blue-light);
  color: var(--primary-blue);
  border-color: var(--primary-blue);
}

.btn-icon-edit.editing {
  background: var(--primary-blue);
  color: #ffffff;
  border-color: var(--primary-blue);
}

.info-general-field:disabled,
.info-general-field[readonly],
.domicilio-personal-field:disabled,
.domicilio-personal-field[readonly],
.facturacion-field:disabled,
.facturacion-field[readonly] {
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
  opacity: 0.9;
  cursor: default;
  -webkit-text-fill-color: var(--text-main) !important;
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .info-general-field,
[data-theme="dark"] .domicilio-personal-field,
[data-theme="dark"] .facturacion-field {
  color-scheme: dark;
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme="dark"] .form-group select option,
[data-theme="dark"] .info-general-field option,
[data-theme="dark"] .domicilio-personal-field option,
[data-theme="dark"] .facturacion-field option {
  background-color: var(--bg-card);
  color: var(--text-main);
}

[data-theme="dark"] .info-general-field:disabled,
[data-theme="dark"] .info-general-field[readonly],
[data-theme="dark"] .domicilio-personal-field:disabled,
[data-theme="dark"] .domicilio-personal-field[readonly],
[data-theme="dark"] .facturacion-field:disabled,
[data-theme="dark"] .facturacion-field[readonly] {
  background-color: #0E1522 !important;
  color: #F1F5F9 !important;
  border-color: #1E293B !important;
  -webkit-text-fill-color: #F1F5F9 !important;
  opacity: 0.95;
}

.info-general-actions,
.domicilio-personal-actions,
.facturacion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

/* =========================================
   FICHA DE INGRESO MODAL DARK MODE OVERRIDES
   ========================================= */
[data-theme="dark"] #fichaIngresoModal .modal-card,
[data-theme="dark"] .ficha-ingreso-modal-card {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

[data-theme="dark"] #fichaIngresoModal select,
[data-theme="dark"] #fichaIngresoModal input,
[data-theme="dark"] #fichaIngresoModal textarea {
  color-scheme: dark;
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] #fichaIngresoModal select option {
  background-color: var(--bg-card);
  color: var(--text-main);
}

[data-theme="dark"] #fichaIngresoModal select:disabled,
[data-theme="dark"] #fichaIngresoModal select.is-readonly,
[data-theme="dark"] #fichaIngresoModal input:disabled,
[data-theme="dark"] #fichaIngresoModal input.is-readonly {
  background-color: #0E1522 !important;
  color: #94A3B8 !important;
  border-color: #1E293B !important;
  -webkit-text-fill-color: #94A3B8 !important;
  opacity: 0.95;
  cursor: not-allowed;
}

select.is-readonly, select:disabled {
  cursor: not-allowed;
  opacity: 0.85;
}

/* =========================================
   SUCCESS CHECKMARK ANIMATION (FICHA INGRESO)
   ========================================= */
/* Fondo unificado para los overlays de "guardado con éxito" de todos los
   modales (Signos Vitales, Nota Oncológica, Agenda, etc.): oscurecido +
   blur en vez del bg-card sólido de antes, para que la tarjeta flotante de
   confirmación resalte igual en todos. Los modales que necesitan un
   z-index distinto (ej. Nota Oncológica) lo sobreescriben inline. */
.modal-success-overlay {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  opacity: 1;
  animation: fadeIn 0.25s ease forwards;
}

/* Tarjeta flotante compacta dentro del overlay — se agrega como wrapper del
   contenido existente (checkmark animado + botones) en vez de duplicar los
   estilos inline en cada modal. */
.modal-success-card {
  max-width: 440px;
  width: 94%;
  background: var(--bg-main);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.3);
}

.success-checkmark-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
}

.success-checkmark-circle {
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
}

.checkmark-svg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
  stroke-width: 3;
  stroke: #10B981;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #10B981;
  animation: fillGreen .35s ease-in-out .35s forwards, scaleCheckmark .3s ease-in-out .8s;
}

.checkmark-circle-path {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke: #10B981;
  fill: none;
  animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check-path {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke: #10B981;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scaleCheckmark {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.15, 1.15, 1);
  }
}

@keyframes fillGreen {
  100% {
    box-shadow: inset 0px 0px 0px 40px rgba(16, 185, 129, 0.12);
  }
}

.success-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 6px 0;
}

.success-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

/* =========================================
   AGENDAR CITA MODAL & DROPDOWN STYLES
   ========================================= */
.modal-form-block {
  padding: 14px 16px;
  background: var(--bg-subtle, #f8fafc);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-color, #e2e8f0);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Buscar Paciente (Agenda): mismo look que un <select> (fondo sólido,
   borde y radio iguales a .custom-select-trigger) en vez de quedar
   transparente mostrando el lavanda del modal detrás. */
#citaPacienteSearch,
.modal-field .cita-select-search-input {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-main);
}
#citaPacienteSearch:focus,
.modal-field .cita-select-search-input:focus {
  border-color: var(--primary-blue);
}
/* Buscadores de Doctor/Enfermera (attachCitaSelectSearch) bloqueados: Doctor
   sin especialidad elegida, o la cita en solo lectura. */
.modal-field .cita-select-search-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cita-patient-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* var(--bg-card) es blanco al 65% de opacidad — bien para tarjetas sobre
     el fondo de la página, pero acá dejaba ver "Cita con (Especialidad)" /
     "Doctor" (que quedan justo debajo en el flujo normal del documento)
     transparentándose a través de la lista, mezclando el texto de ambos. */
  background-color: #FFFFFF;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  max-height: 210px; /* Limita visible a aprox 5 pacientes */
  overflow-y: auto;
  z-index: 1050;
  margin-top: 4px;
}

.cita-patient-item {
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color, #f1f5f9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease;
  color: var(--text-main, #0f172a);
}

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

.cita-patient-item:hover {
  background: var(--bg-hover, #f8fafc);
  color: var(--primary-blue, #2563eb);
}

.cita-patient-item .patient-exp-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--primary-blue, #2563eb);
}

/* La definición completa de .event-pill-appointment (fondo neutro tipo
   tarjeta + acento de color por estado) vive más abajo, junto a las
   variantes .aprobado/.pendiente/etc — ver "EVENT PILL STATUS COLOR
   VARIANTS". */

/* =========================================
   DARK MODE OVERRIDES — AGENDAR CITA MODAL
   ========================================= */
[data-theme="dark"] .modal-form-block {
  background: #111827 !important;
  border-color: #1E293B !important;
}

[data-theme="dark"] .modal-form-block .modal-section-title {
  color: #60A5FA !important;
}

[data-theme="dark"] .cita-patient-dropdown {
  background: #1E293B !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .cita-patient-item {
  color: #F8FAFC !important;
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .cita-patient-item:hover {
  background: #334155 !important;
  color: #60A5FA !important;
}

[data-theme="dark"] .cita-patient-item .patient-exp-badge {
  background: rgba(96, 165, 250, 0.2) !important;
  color: #60A5FA !important;
}

[data-theme="dark"] #addCitaModal .modal-card {
  background: #151D2A !important;
  border: 1px solid #1E293B !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] #addCitaModal .modal-header {
  border-bottom-color: #1E293B !important;
}

[data-theme="dark"] #addCitaModal label {
  color: #E2E8F0 !important;
}

[data-theme="dark"] #addCitaModal input,
[data-theme="dark"] #addCitaModal select,
[data-theme="dark"] #addCitaModal textarea {
  background-color: #0B0F17 !important;
  color: #F8FAFC !important;
  border-color: #334155 !important;
}

[data-theme="dark"] #addCitaModal input::placeholder,
[data-theme="dark"] #addCitaModal textarea::placeholder {
  color: #64748B !important;
}

[data-theme="dark"] #addCitaModal select option {
  background-color: #151D2A !important;
  color: #F8FAFC !important;
}

[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] .custom-date-input {
  color-scheme: dark;
}

[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .custom-date-input::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
}

[data-theme="dark"] .date-badge-mini {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .date-badge-mini-num {
  color: var(--text-main) !important;
}

[data-theme="dark"] .date-badge-mini-sub {
  color: var(--text-muted) !important;
}

[data-theme="dark"] .event-pill-appointment {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}

/* =========================================
   AGENDA FILTERS & SEARCH DROPDOWN STYLES
   ========================================= */
.agenda-patient-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* --bg-card es translúcido en tema claro (rgba blanco 0.65, pensado para
     tarjetas sobre el fondo con blur) — sobre la grilla de la agenda eso
     dejaba ver las líneas/horas del calendario a través del dropdown.
     Se fuerza sólido, igual que .custom-date-panel. */
  background-color: #FFFFFF !important;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1050;
  margin-top: 4px;
}

.agenda-patient-dropdown .cita-patient-item {
  padding: 8px 12px;
  font-size: 12px;
}

.status-filter-tag {
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  opacity: 1;
}

.status-filter-tag.inactive {
  opacity: 0.35;
  filter: grayscale(80%);
}

/* Buscador único de la barra de filtros de la Agenda (paciente/doctor/sala/
   tipo de cita) — mismo problema de fondo translúcido (--bg-card) que
   .agenda-patient-dropdown arriba, agravado porque este campo queda sobre la
   grilla de horarios. */
#agendaSearchInput {
  background-color: #FFFFFF !important;
}

[data-theme="dark"] #agendaSearchInput {
  background-color: var(--bg-card) !important;
}

.agenda-tipo-cita-select {
  height: 34px;
  font-size: 12px;
  padding: 6px 28px 6px 12px;
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
}

.agenda-tipo-cita-select:hover {
  border-color: var(--primary-blue);
}

.agenda-tipo-cita-select:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px var(--primary-blue-light);
}

[data-theme="dark"] .agenda-tipo-cita-select {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme="dark"] .agenda-tipo-cita-select option {
  background-color: var(--bg-card);
  color: var(--text-main);
}

.btn-agenda-action {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-main);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-agenda-action:hover {
  background-color: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

[data-theme="dark"] .btn-agenda-action {
  background-color: var(--bg-main);
  color: var(--text-main);
  border-color: var(--border-color);
}

[data-theme="dark"] .btn-agenda-action:hover {
  background-color: rgba(37, 99, 235, 0.2);
  border-color: var(--primary-blue);
  color: #60A5FA;
}

@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes strokeCheck {
  100% { stroke-dashoffset: 0; }
}

.checkmark-circle-path {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: strokeCheck 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check-path {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: strokeCheck 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.4s forwards;
}

.patient-success-modal {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .patient-success-modal {
  background: #151D2A;
  border-color: #1E293B;
}

[data-theme="dark"] .agenda-patient-dropdown {
  background: #1E293B !important;
  border-color: #334155 !important;
}

/* Interactive Calendar Cell & Event Pill Cursor Styles */
.month-day-cell:not(.other-month),
.time-cell-slot {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.month-day-cell:not(.other-month):hover,
.time-cell-slot:hover {
  background-color: rgba(37, 99, 235, 0.08) !important;
}

/* Estilo "tarjeta" (fondo neutro + acento de color a la izquierda) igual al
   que usan las tarjetas de "Agenda de hoy" / "Citas de este mes" — antes
   estas pastillas de Semana/Día/Mes pintaban TODO el texto (hora, paciente,
   doctor) del color del estado sobre un fondo del mismo tono, lo que se
   veía muy distinto a esas tarjetas (nombre en negro, doctor en gris,
   solo la hora en color). */
.event-pill-appointment {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-blue, #2563eb);
  padding: 3px 7px;
  border-radius: 6px;
  margin: 2px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: block;
}

/* Fila 1: paciente + estado — fila 2: doctor + hora — fila 3 (opcional):
   sala. Mismo orden de campos que las tarjetas de Agenda de hoy/Citas del
   mes (paciente y estado arriba, doctor y hora abajo); la sala baja a su
   propia línea porque junto al doctor no cabía en columnas angostas como
   Semana/Día. */
.event-pill-row1,
.event-pill-row2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow: hidden;
}

.event-pill-name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.event-pill-badge {
  flex-shrink: 0;
  font-size: 8px !important;
  padding: 1px 5px !important;
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

.event-pill-doctor {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.event-pill-time {
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--primary-blue, #2563eb);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Casilla "Stock" de la cita marcada (stockAplicacion): check verde junto a
   la hora; en pastillas angostas queda solo el check. */
.event-pill-stock {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
  color: #047857;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid #10b981;
}
[data-theme="dark"] .event-pill-stock { color: #34D399; background: rgba(16, 185, 129, 0.2); }

.event-pill-sala {
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-muted);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-pill-appointment:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.event-pill-more {
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  padding: 3px 6px;
  margin: 2px 0;
  border-radius: 4px;
  background: var(--bg-main);
  border: 1px dashed var(--border-color);
  color: var(--primary-blue);
}

.event-pill-more:hover {
  background: rgba(37, 99, 235, 0.08);
}

/* CLEAR SEARCH BUTTON (&times;) */
.clear-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  /* El glifo de texto "×" (&times;) nunca quedaba centrado dentro del
     círculo de hover pese a display:flex — su tinta no ocupa el em-box de
     forma simétrica, así que se ve desfasado hacia abajo sin importar el
     ajuste de line-height. Se reemplazó por un ícono SVG (mismo que usan
     los demás botones de cerrar/limpiar de la app) que sí centra a pixel. */
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
  z-index: 10;
}

.clear-search-btn:hover {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

/* .btn-anim-lift:hover/:active fijan su propio transform (translateY(-2px)
   scale(...)), que por sí solo REEMPLAZA — no se suma a — el
   translateY(-50%) de arriba usado para centrar este botón verticalmente
   dentro de su input. Sin esto, el botón se desalineaba del recuadro del
   campo justo al pasar el mouse (perdía el -50% de centrado). */
.clear-search-btn.btn-anim-lift:hover:not(:disabled) {
  transform: translateY(-50%) translateY(-2px) scale(1.03);
}
.clear-search-btn.btn-anim-lift:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}

/* CITA STATUS SELECTION BUTTONS */
.cita-status-btn-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.status-choice-btn {
  flex: 1;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-md, 8px);
  border: 2px solid var(--border-color, #e2e8f0);
  background: var(--bg-card, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.status-choice-btn.aprobado { color: #10b981; }
.status-choice-btn.aprobado.active { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #047857; }

.status-choice-btn.rechazado { color: #ef4444; }
.status-choice-btn.rechazado.active { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #b91c1c; }

.status-choice-btn.pendiente { color: #f97316; }
.status-choice-btn.pendiente.active { background: rgba(249, 115, 22, 0.15); border-color: #f97316; color: #c2410c; }

.status-choice-btn.desfasado { color: #db2777; }
.status-choice-btn.desfasado.active { background: rgba(219, 39, 119, 0.15); border-color: #db2777; color: #9d174d; }

.status-choice-btn.checked { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #047857; }
.status-choice-btn.checked[disabled] { cursor: default; opacity: 0.85; }

/* Aplicación de medicamento (solo lectura, ver updateAplicacionBlock). */
.status-choice-btn.aplicacion-en-proceso,
.status-choice-btn.aplicacion-aplicado { cursor: default; }
.status-choice-btn.aplicacion-en-proceso { color: #f97316; }
.status-choice-btn.aplicacion-en-proceso.active { background: rgba(249, 115, 22, 0.15); border-color: #f97316; color: #c2410c; }
.status-choice-btn.aplicacion-aplicado { color: #10b981; }
.status-choice-btn.aplicacion-aplicado.active { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #047857; }
/* Archivos adjuntos de la cita, arriba de la Nota (ver renderCitaAdjuntos). */
.cita-adjuntos {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-main);
}
.cita-adjuntos-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cita-adjuntos-header label { font-size: 12px; font-weight: 600; color: var(--text-main); }
.cita-adjuntos-count { font-weight: 700; color: var(--text-muted); }
.cita-adjuntos-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--primary-blue); background: var(--primary-blue-light);
  color: var(--primary-blue); font-size: 11px; font-weight: 700; cursor: pointer;
}
.cita-adjuntos-add:disabled { opacity: 0.5; cursor: not-allowed; }
.cita-adjuntos-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cita-adjuntos-empty { font-size: 11px; color: var(--text-muted); }
.cita-adjunto-item {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--bg-card); border: 1px solid var(--border-color);
  color: var(--primary-blue);
}
.cita-adjunto-item.is-pending { border-style: dashed; }
.cita-adjunto-item svg { flex-shrink: 0; }
.cita-adjunto-name {
  flex: 1; min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
a.cita-adjunto-name:hover { color: var(--primary-blue); text-decoration: underline; }
.cita-adjunto-meta { flex-shrink: 0; font-size: 10px; color: var(--text-muted); }
.cita-adjunto-remove {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--text-muted);
}
.cita-adjunto-remove:hover { background: #FEE2E2; color: #DC2626; }

/* Modo manual: estos sí se pueden elegir (ver renderCitaAplicacionBlock). */
.status-choice-btn.aplicacion-solicitado { color: #3b82f6; }
.status-choice-btn.aplicacion-solicitado.active { background: rgba(59, 130, 246, 0.15); border-color: #3b82f6; color: #1d4ed8; }
.status-choice-btn.aplicacion-preparacion { color: #f59e0b; }
.status-choice-btn.aplicacion-preparacion.active { background: rgba(245, 158, 11, 0.15); border-color: #f59e0b; color: #b45309; }
.status-choice-btn.aplicacion-listo { color: #10b981; }
.status-choice-btn.aplicacion-listo.active { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #047857; }
/* Casilla "Stock" bajo los estados de aplicación (ver citaStockLabel). */
.cita-stock-check { display: inline-flex; margin-top: 12px; font-weight: 600; }
.cita-stock-check.is-disabled { cursor: default; opacity: 0.6; }
.cita-stock-check.is-disabled span { transform: none; box-shadow: none; }
.status-choice-btn.aplicacion-en-proceso:not(.active),
.status-choice-btn.aplicacion-aplicado:not(.active) { opacity: 0.5; }
/* Ya traía "transition: all 0.2s ease" pero ninguna regla :hover/:active que
   la disparara — se quedaba sin ningún feedback al pasar el mouse o hacer
   clic, a diferencia de los demás botones de la app. Mismo lenguaje de
   "levantar + presionar" que .btn-anim-lift. */
.status-choice-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.status-choice-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.97);
}

/* En pantallas angostas (modal de la cita en celular) el texto se partía y el
   "●" quedaba encima de la palabra: el texto va en una sola línea, con menos
   relleno, y si los botones no caben pasan a la siguiente fila. */
.status-choice-btn { white-space: nowrap; }
@media (max-width: 600px) {
  .cita-status-btn-group { gap: 6px; }
  .status-choice-btn { flex: 1 1 0; padding: 8px 4px; font-size: 10.5px; gap: 3px; }
}

/* Estado de la cita (Aprobado/Rechazado/Pendiente/Desfasado): cuadrícula
   pareja — 4 en una fila y, en celular, 2×2 (con flex-wrap el 4º botón
   quedaba solo y estirado en la segunda fila). */
#citaStatusBtnGroup {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#citaStatusBtnGroup .status-choice-btn { min-width: 0; }
@media (max-width: 600px) {
  #citaStatusBtnGroup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #citaStatusBtnGroup .status-choice-btn { padding: 10px 6px; font-size: 11.5px; }
}

/* EVENT PILL STATUS COLOR VARIANTS — mismos tonos que .badge-<estado> (ver
   más arriba) para que una cita se vea del mismo color en el calendario que
   en las tarjetas de Agenda de hoy / Citas de este mes / Citas del mes. */
.event-pill-appointment.aprobado { border-left-color: #16A34A; }
.event-pill-appointment.aprobado .event-pill-time { color: #16A34A; }

.event-pill-appointment.rechazado { border-left-color: #DC2626; }
.event-pill-appointment.rechazado .event-pill-time { color: #DC2626; }

.event-pill-appointment.pendiente { border-left-color: #D97706; }
.event-pill-appointment.pendiente .event-pill-time { color: #D97706; }

.event-pill-appointment.desfasado { border-left-color: #DB2777; }
.event-pill-appointment.desfasado .event-pill-time { color: #DB2777; }

.event-pill-appointment.nuevo { border-left-color: #2563EB; }
.event-pill-appointment.nuevo .event-pill-time { color: #2563EB; }

.event-pill-appointment.en_progreso { border-left-color: #2F4C8A; }
.event-pill-appointment.en_progreso .event-pill-time { color: #2F4C8A; }

.event-pill-appointment.finalizado { border-left-color: #475569; }
.event-pill-appointment.finalizado .event-pill-time { color: #475569; }

[data-theme="dark"] .status-choice-btn {
  background: #0B0F17 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .status-choice-btn.aprobado.active { background: rgba(16, 185, 129, 0.25) !important; border-color: #34d399 !important; color: #a7f3d0 !important; }
[data-theme="dark"] .status-choice-btn.rechazado.active { background: rgba(239, 68, 68, 0.25) !important; border-color: #f87171 !important; color: #fca5a5 !important; }
[data-theme="dark"] .status-choice-btn.pendiente.active { background: rgba(249, 115, 22, 0.25) !important; border-color: #fb923c !important; color: #fdba74 !important; }
[data-theme="dark"] .status-choice-btn.desfasado.active { background: rgba(219, 39, 119, 0.25) !important; border-color: #f472b6 !important; color: #fbcfe8 !important; }
[data-theme="dark"] .status-choice-btn.checked { background: rgba(16, 185, 129, 0.25) !important; border-color: #34d399 !important; color: #a7f3d0 !important; }

[data-theme="dark"] .event-pill-appointment.aprobado { border-left-color: #4ADE80 !important; }
[data-theme="dark"] .event-pill-appointment.aprobado .event-pill-time { color: #4ADE80 !important; }

[data-theme="dark"] .event-pill-appointment.rechazado { border-left-color: #f87171 !important; }
[data-theme="dark"] .event-pill-appointment.rechazado .event-pill-time { color: #f87171 !important; }

[data-theme="dark"] .event-pill-appointment.pendiente { border-left-color: #fb923c !important; }
[data-theme="dark"] .event-pill-appointment.pendiente .event-pill-time { color: #fb923c !important; }

[data-theme="dark"] .event-pill-appointment.desfasado { border-left-color: #f472b6 !important; }
[data-theme="dark"] .event-pill-appointment.desfasado .event-pill-time { color: #f472b6 !important; }

[data-theme="dark"] .event-pill-appointment.nuevo { border-left-color: #60A5FA !important; }
[data-theme="dark"] .event-pill-appointment.nuevo .event-pill-time { color: #60A5FA !important; }

[data-theme="dark"] .event-pill-appointment.en_progreso { border-left-color: #A78BFA !important; }
[data-theme="dark"] .event-pill-appointment.en_progreso .event-pill-time { color: #A78BFA !important; }

[data-theme="dark"] .event-pill-appointment.finalizado { border-left-color: #94A3B8 !important; }
[data-theme="dark"] .event-pill-appointment.finalizado .event-pill-time { color: #94A3B8 !important; }

/* ================= DRAG AND DROP MOVIABLE PESTAÑAS DEL EXPEDIENTE ================= */
.expediente-subtabs-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.expediente-subtab {
  cursor: grab !important;
  user-select: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  will-change: transform, opacity;
}

.expediente-subtab:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.expediente-subtab:active {
  cursor: grabbing !important;
}

/* ================= DRAG AND DROP MOVIABLE SECCIONES HISTORIA CLÍNICA ================= */
.hc-sections-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hc-section-item {
  cursor: grab !important;
  user-select: none !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  will-change: transform, opacity;
}

.hc-section-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.hc-section-item:active {
  cursor: grabbing !important;
}

.hc-section-item.dragging {
  opacity: 0.35 !important;
  transform: scale(0.96) translateX(8px) !important;
  border: 2px dashed var(--primary-blue) !important;
  background-color: var(--primary-blue-light) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2) !important;
  z-index: 10;
}

/* ================= DASHBOARD — TARJETA DE PRÓXIMOS EVENTOS ================= */
.count-badge-new {
  background: rgba(47, 76, 138, 0.15);
  color: var(--primary-blue);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.agenda-card-new .card-title-group svg {
  color: var(--primary-blue);
  flex-shrink: 0;
}

/* Botones de Acción en Plan de Tratamiento (Receta Oncológica y Nota Oncológica) */
.plan-actions-container {
  display: flex !important;
  gap: 16px !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.btn-hc-plan-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 22px !important;
  background: linear-gradient(135deg, #F5F6F8 0%, #E3EAF6 100%) !important;
  border: 1.5px solid #C9D6EC !important;
  border-radius: 10px !important;
  color: #1C2F57 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(47, 76, 138, 0.08) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-decoration: none !important;
}

.btn-hc-plan-action:hover {
  background: linear-gradient(135deg, #E3EAF6 0%, #C9D6EC 100%) !important;
  border-color: #2F4C8A !important;
  color: #5B21B6 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 6px 18px rgba(47, 76, 138, 0.2) !important;
}

.btn-hc-plan-action:active {
  transform: translateY(0) scale(0.99) !important;
  box-shadow: 0 2px 4px rgba(47, 76, 138, 0.1) !important;
}

.btn-hc-plan-action svg {
  transition: transform 0.25s ease !important;
}

.btn-hc-plan-action:hover svg {
  transform: rotate(90deg) scale(1.1) !important;
}

@media (max-width: 640px) {
  .plan-actions-container {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .btn-hc-plan-action {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Permisos por rol (Enfermería/Recepción, ver loadCurrentUserProfile en
   app.js): el detalle de una receta u orden médica ya guardada se
   reconstruye por completo (innerHTML) cada vez que se selecciona un
   registro distinto de la lista (ver renderRecipeDetail/renderLabOrderDetail
   en app.js), así que sus botones Editar/Eliminar no existen todavía cuando
   se aplican los permisos al cargar la página — un disabled=true de una
   sola vez en JS no sobreviviría a ese re-render. Una regla CSS sí, porque
   aplica sobre cualquier nodo que calce el selector en cualquier momento. */
body.clivora-enfermeria-limited #btnEditRecipeHeader,
body.clivora-enfermeria-limited #btnDeleteRecipeHeader,
body.clivora-enfermeria-limited #btnEditEdOnco,
body.clivora-recepcion-limited #btnEditRecipeHeader,
body.clivora-recepcion-limited #btnDeleteRecipeHeader,
body.clivora-recepcion-limited #btnEditLabOrderDetail,
body.clivora-recepcion-limited #btnDeleteLabOrderDetail,
/* Recepción: Notas en solo lectura (el servidor también rechaza esas
   escrituras, ver _is_recepcion_notes_readonly). */
body.clivora-recepcion-limited #btnEditEdOnco,
body.clivora-recepcion-limited #btnToggleConsultaEdit,
body.clivora-recepcion-limited .btn-delete-consulta {
  display: none !important;
}

/* Los switches de Antecedentes Patológicos/Gineco-Obstétricos
   (#tab-historia-clinica .toggle-switch) son <div> controlados por un
   listener delegado en document (ver el bloque "toggle-switch" en
   initializeExpedienteModule, app.js), no <input>/<button> reales — el
   lockReadOnly() que aplica isEnfermeriaLimited/isRecepcionLimited a
   tab-historia-clinica solo deshabilita input/select/textarea/button, así
   que sin esto Enfermería/Recepción seguían pudiendo activar/desactivar
   estos switches pese a que el resto del tab quedaba en solo lectura. */
/* Recepción y Jefe de Recepción: Signos Vitales y Notas de Enfermería en
   solo lectura (canEditNursingVitals en /api/me; el servidor también rechaza
   esas escrituras). */
body.clivora-no-nursing-edit #btnEditEdNc,
body.clivora-no-nursing-edit #btnEditEdEi,
body.clivora-no-nursing-edit #btnToggleConsultaEdit[data-source="vitals"],
/* Vista previa genérica (showConsultaPreview) con la que se abre la primera
   nota al entrar a la pestaña Notas: también trae su propio "Editar". */
body.clivora-no-nursing-edit #btnToggleConsultaEdit[data-source="nursing"],
body.clivora-no-nursing-edit .btn-delete-consulta[data-source="vitals"],
body.clivora-no-nursing-edit .btn-delete-consulta[data-source="nursing"] {
  display: none !important;
}

body.clivora-enfermeria-limited #tab-historia-clinica .toggle-switch,
body.clivora-recepcion-limited #tab-historia-clinica .toggle-switch {
  pointer-events: none !important;
  opacity: 0.6;
}



/* Barra de búsqueda de Pacientes: se acomoda sola según el espacio. Antes
   no hacía wrap arriba de 900px y, con el gap de 40px, "Tarjeta/Lista" se
   salía de la tarjeta en pantallas medianas (laptop con el sidebar abierto). */
.search-filter-card {
  flex-wrap: wrap;
  gap: 16px 24px;
}
.search-filter-card .search-input-wrapper {
  flex: 1 1 240px;
  min-width: 0;
}
/* Si no cabe, baja al siguiente renglón alineado a la derecha. */
.search-filter-card .view-toggle {
  margin-left: auto;
}
@media (max-width: 768px) {
  .search-filter-card > * { width: 100%; }
  .search-filter-card .search-input-wrapper { flex: 1 1 auto; min-width: 0; }
  .search-filter-card .view-toggle { justify-content: flex-end; margin-left: 0; }
}

/* Etiqueta del catálogo en el buscador de diagnósticos (CIE-11 / CIE-10). */
.cie-catalog-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  vertical-align: 1px;
}
.cie-catalog-cie11 { background: rgba(47, 76, 138, 0.12); color: #1C2F57; }
.cie-catalog-cie10 { background: rgba(14, 165, 233, 0.14); color: #0369A1; }
[data-theme="dark"] .cie-catalog-cie11 { background: rgba(167, 139, 250, 0.2); color: #9DB6E3; }
[data-theme="dark"] .cie-catalog-cie10 { background: rgba(56, 189, 248, 0.2); color: #7DD3FC; }

/* Botón de guardar mientras guarda (setClivoraButtonBusy): mismo ancho, ícono
   girando y sin cambiar de aspecto por estar deshabilitado. */
button.is-saving {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: progress;
  opacity: 0.85;
}
.clivora-btn-spinner { flex-shrink: 0; animation: clivora-btn-spin 0.8s linear infinite; }
@keyframes clivora-btn-spin { to { transform: rotate(360deg); } }


/* ============================================================
   CITAS AGRUPADAS EN SEMANA/DÍA — tarjeta de resumen + panel de detalle
   (ver buildEventGroupCardEl / openCitasGroupDrawer en app.js)
   ============================================================ */
.event-group-card {
  /* La posición (top/alto/ancho) la pone applyTimedPillLayout, igual que
     a cualquier cita. */
  border: 1px solid rgba(47, 76, 138, 0.35);
  border-left: 3px solid var(--primary-blue);
  border-radius: 8px;
  background: #F5F6F8;
  color: var(--text-main);
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  gap: 4px !important;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.event-group-card:hover,
.event-group-card:focus-visible {
  background: #E3EAF6;
  box-shadow: 0 2px 8px rgba(47, 76, 138, 0.2);
  outline: none;
}
.event-group-title {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 5px;
  min-width: 0;
  color: var(--primary-blue);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.event-group-title svg { flex-shrink: 0; }
.event-group-count { overflow: hidden; text-overflow: ellipsis; }
.event-group-time { margin-left: auto; font-size: 10px; font-weight: 700; color: var(--text-muted); }
.event-group-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.event-group-dot {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  color: #FFFFFF;
  background: #2563EB;
}
.event-group-dot.aprobado { background: #16A34A; }
.event-group-dot.rechazado { background: #DC2626; }
.event-group-dot.pendiente { background: #D97706; }
.event-group-dot.desfasado { background: #DB2777; }
.event-group-dot.en_progreso { background: #2F4C8A; }
.event-group-dot.finalizado { background: #475569; }

[data-theme="dark"] .event-group-card { background: #1E1B3A; border-color: rgba(167, 139, 250, 0.35); }
[data-theme="dark"] .event-group-card:hover,
[data-theme="dark"] .event-group-card:focus-visible { background: #2A2550; }
[data-theme="dark"] .event-group-title { color: #9DB6E3; }

/* Panel de detalle. Escritorio/tablet: sidebar fijo a la derecha, encima del
   calendario (position:fixed — no empuja ni deforma la cuadrícula). */
.citas-group-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.citas-group-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.citas-group-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  z-index: 111;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-left: 1px solid var(--border-color);
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
}
.citas-group-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.citas-group-drawer-handle { display: none; }
.citas-group-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.citas-group-drawer-title { font-size: 16px; font-weight: 800; margin: 0; color: var(--text-main); }
.citas-group-drawer-subtitle { font-size: 12px; margin: 2px 0 0 0; color: var(--text-muted); }
.citas-group-drawer-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Las pastillas dentro del panel tienen todo el ancho: texto un poco más
   grande que en la cuadrícula. */
.citas-group-drawer-list .event-pill-appointment { cursor: pointer; flex-shrink: 0; }
.citas-group-drawer-list .event-pill-name { font-size: 12px; }

[data-theme="dark"] .citas-group-drawer { background: #0F1520; box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .citas-group-drawer-backdrop { background: rgba(0, 0, 0, 0.5); }

/* Celular: bottom sheet que sube desde abajo, con zona táctil más grande. */
@media (max-width: 768px) {
  .citas-group-drawer {
    top: auto;
    left: 0;
    width: 100%;
    max-height: 85vh;
    max-height: 85dvh;
    border-left: none;
    border-top: 1px solid var(--border-color);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 32px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .citas-group-drawer.open { transform: translateY(0); }
  .citas-group-drawer-handle {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-color);
    margin: 8px auto 0;
    flex-shrink: 0;
  }
  .citas-group-drawer-header { padding: 12px 16px; }
  .citas-group-drawer-list { padding: 12px 16px 24px; gap: 10px; }
  .citas-group-drawer-list .event-pill-appointment { padding: 10px 12px; }
}
body.citas-drawer-open { overflow: hidden; }

/* Escritorio/tablet: menú flotante junto a la tarjeta de resumen en la que se
   hizo clic (left/top los pone positionCitasGroupPopover en app.js), en vez
   del sidebar anclado a la derecha. El fondo no se oscurece; un clic fuera
   del menú lo cierra igual (el backdrop sigue ahí, transparente). */
@media (min-width: 769px) {
  .citas-group-drawer.is-popover {
    right: auto;
    bottom: auto;
    width: min(400px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22), 0 4px 12px rgba(15, 23, 42, 0.08);
    transform: scale(0.96);
    transform-origin: top left;
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s linear 0.15s;
  }
  .citas-group-drawer.is-popover.open {
    transform: scale(1);
    opacity: 1;
    transition: transform 0.15s ease, opacity 0.15s ease, visibility 0s;
  }
  .citas-group-drawer.is-popover .citas-group-drawer-header { padding: 14px 16px; }
  .citas-group-drawer.is-popover .citas-group-drawer-list { padding: 12px 14px 14px; }
  .citas-group-drawer-backdrop.is-popover { background: transparent; }
  body.citas-drawer-open:has(.citas-group-drawer.is-popover) { overflow: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .citas-group-drawer,
  .citas-group-drawer.open,
  .citas-group-drawer-backdrop { transition: none; }
}

/* Ícono de carpeta / tarjeta Kanban de Tratamientos mientras se carga la
   cita (ver openTratamientoCitaModal en app.js). */
.folder-icon.is-loading {
  pointer-events: none;
  background-image: none;
  position: relative;
}
.folder-icon.is-loading::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: clivora-spin 0.7s linear infinite;
}
.trat-kanban-card.is-loading { opacity: 0.6; pointer-events: none; }
@keyframes clivora-spin { to { transform: rotate(360deg); } }