@import "tailwindcss";

/* ============================================================
   DTDENTAL v2 — Design System Tokens (from Figma)
   ============================================================ */

@theme {
  /* --- Brand Colors --- */
  --color-primary-50:  #F0EEFF;
  --color-primary-100: #EDE9FF;
  --color-primary-200: #D5CCFF;
  --color-primary-300: #B3A5F5;
  --color-primary-400: #9487E0;
  --color-primary-500: #7C6FCD;
  --color-primary-600: #6B5FBF;
  --color-primary-700: #5A4FAF;
  --color-primary-800: #463D8A;
  --color-primary-900: #342E66;

  /* --- Neutral Colors --- */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F5F7;
  --color-neutral-100: #F0F0F2;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #1A1A2E;

  /* --- Semantic Colors --- */
  --color-success-50:  #E8F5E9;
  --color-success-100: #C8E6C9;
  --color-success-500: #4CAF50;
  --color-success-600: #388E3C;

  --color-warning-50:  #FFF8E1;
  --color-warning-100: #FFECB3;
  --color-warning-500: #FFC107;
  --color-warning-600: #F9A825;

  --color-danger-50:   #FCE8E8;
  --color-danger-100:  #FFCDD2;
  --color-danger-500:  #E53935;
  --color-danger-600:  #C62828;

  --color-info-50:     #E3F2FD;
  --color-info-500:    #2196F3;
  --color-info-600:    #1565C0;

  /* --- Typography --- */
  --font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* --- Spacing --- */
  --spacing-sidebar: 220px;
  --spacing-topbar:  64px;

  /* --- Border Radius --- */
  --radius-sm:  0.375rem;  /* 6px */
  --radius-md:  0.5rem;    /* 8px */
  --radius-lg:  0.75rem;   /* 12px */
  --radius-xl:  1rem;      /* 16px */
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-dropdown: 0 4px 16px 0 rgb(0 0 0 / 0.10);
  --shadow-modal: 0 20px 60px 0 rgb(0 0 0 / 0.15);
}

/* ============================================================
   CSS CUSTOM PROPERTIES — definidas en :root para que
   los navegadores puedan resolver var() en el CSS personalizado.
   (Duplica los valores de @theme que Tailwind usa internamente
   pero que el browser no expone como custom properties estándar.)
   ============================================================ */

:root {
  /* Colores primarios */
  --color-primary-50:  #F0EEFF;
  --color-primary-100: #EDE9FF;
  --color-primary-200: #D5CCFF;
  --color-primary-300: #B3A5F5;
  --color-primary-400: #9487E0;
  --color-primary-500: #7C6FCD;
  --color-primary-600: #6B5FBF;
  --color-primary-700: #5A4FAF;
  --color-primary-800: #463D8A;
  --color-primary-900: #342E66;

  /* Neutros */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #F5F5F7;
  --color-neutral-100: #F0F0F2;
  --color-neutral-200: #E5E7EB;
  --color-neutral-300: #D1D5DB;
  --color-neutral-400: #9CA3AF;
  --color-neutral-500: #6B7280;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #1A1A2E;

  /* Semánticos */
  --color-success-50:  #E8F5E9;
  --color-success-100: #C8E6C9;
  --color-success-500: #4CAF50;
  --color-success-600: #388E3C;

  --color-warning-50:  #FFF8E1;
  --color-warning-100: #FFECB3;
  --color-warning-500: #FFC107;
  --color-warning-600: #F9A825;

  --color-danger-50:   #FCE8E8;
  --color-danger-100:  #FFCDD2;
  --color-danger-500:  #E53935;
  --color-danger-600:  #C62828;

  --color-info-50:     #E3F2FD;
  --color-info-500:    #2196F3;
  --color-info-600:    #1565C0;

  /* Tipografía */
  --font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* Espaciado layout */
  --spacing-sidebar: 220px;
  --spacing-topbar:  64px;

  /* Border radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* Sombras */
  --shadow-card:     0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-dropdown: 0 4px 16px 0 rgb(0 0 0 / 0.10);
  --shadow-modal:    0 20px 60px 0 rgb(0 0 0 / 0.15);
}

/* ============================================================
   BASE STYLES
   ============================================================ */

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  html {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    margin: 0;
    line-height: var(--line-height-normal);
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-900);
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  input, select, textarea {
    font-family: inherit;
    font-size: var(--font-size-sm);
  }
}

/* ============================================================
   LAYOUT
   ============================================================ */

@layer components {
  /* ── App Shell ── */
  .app-shell {
    display: flex;
    min-height: 100vh;
    background-color: #F4F4F6;
  }

  /* ── Topbar ── fiel al diseño: logo izquierda, search+user derecha */
  .topbar {
    height: 60px;
    background-color: #fff;
    border-bottom: 1px solid var(--color-neutral-200);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem 0 1.25rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
  }

  /* Logo en topbar */
  .topbar-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .topbar-logo-img {
    display: block;
    height: 26px;
    width: auto;
  }

  /* Derecha del topbar */
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  /* Search en topbar */
  .topbar-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #F4F4F6;
    border: 1px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 0.4rem 0.75rem;
    width: 220px;
  }
  .topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 0.875rem;
    color: var(--color-neutral-900);
    width: 100%;
  }
  .topbar-search input::placeholder { color: var(--color-neutral-400); }

  /* Usuario en topbar */
  .topbar-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
  }
  .topbar-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #5B4FCF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
  }
  .topbar-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .topbar-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-neutral-800);
    white-space: nowrap;
  }

  /* ── Sidebar ── fiel al diseño: blanco, ancho 200px, bajo el topbar */
  .sidebar {
    width: 200px;
    background-color: #fff;
    border-right: 1px solid var(--color-neutral-200);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    z-index: 40;
    overflow-y: auto;
  }

  .sidebar-nav {
    flex: 1;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 400;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s;
    text-decoration: none;
    white-space: nowrap;
  }

  .sidebar-item:hover {
    background-color: var(--color-neutral-50);
    color: #1a1a2e;
  }

  /* Item activo: fondo morado, texto blanco, igual al diseño */
  .sidebar-item.active {
    background-color: #5B4FCF;
    color: #fff;
    font-weight: 500;
  }
  .sidebar-item.active .icon { opacity: 1; color: #fff; stroke: #fff; }

  .sidebar-item .icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.75;
  }

  /* Cerrar sesión — sin fondo activo, color neutro */
  .sidebar-item--logout {
    color: #6B7280;
    margin-top: auto;
  }
  .sidebar-item--logout:hover {
    background-color: #fef2f2;
    color: #C62828;
  }

  .sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0.1rem 0;
  }

  .sidebar-group-title {
    width: 100%;
    border: 0;
    background: transparent;
    margin-bottom: 0;
    justify-content: space-between;
    text-align: left;
  }

  .sidebar-group-label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
  }

  .sidebar-group-caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.75;
    transition: transform 0.2s ease;
  }

  .sidebar-group-title.is-open .sidebar-group-caret {
    transform: rotate(180deg);
    opacity: 1;
  }

  .sidebar-group-title:focus-visible {
    outline: 2px solid #5B4FCF;
    outline-offset: 2px;
  }

  .sidebar-group-title--active {
    background-color: #ebe9ff;
    color: #3b2fa8;
    font-weight: 500;
  }

  .sidebar-group-title--active .icon {
    opacity: 1;
    color: #3b2fa8;
    stroke: #3b2fa8;
  }

  .sidebar-submenu {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-left: 1.5rem;
  }

  .sidebar-submenu[hidden] {
    display: none !important;
  }

  .sidebar-subitem {
    display: flex;
    align-items: center;
    min-height: 30px;
    padding: 0.3rem 0.65rem;
    border-radius: 7px;
    font-size: 0.82rem;
    font-weight: 400;
    color: #4b5563;
    text-decoration: none;
    line-height: 1.2;
  }

  .sidebar-subitem:hover {
    background-color: var(--color-neutral-50);
    color: #1a1a2e;
  }

  .sidebar-subitem.active {
    background-color: #5B4FCF;
    color: #fff;
    font-weight: 500;
  }

  /* ── Main content ── */
  .main-content {
    margin-left: 200px;
    padding-top: 60px;
    flex: 1;
    min-height: 100vh;
    background-color: #F4F4F6;
  }

  .page-container {
    padding: 1.75rem 2rem;
    max-width: 1400px;
  }

  .page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
  }

  .page-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    margin-top: 0.25rem;
  }

  .page-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
  }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

@layer components {

  /* --- Cards --- */
  .card {
    background-color: var(--color-neutral-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-neutral-200);
  }

  .card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-neutral-100);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .card-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
  }

  .card-body {
    padding: 1.25rem;
  }

  .card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-neutral-100);
    background-color: var(--color-neutral-50);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* --- Buttons --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    text-decoration: none;
    white-space: nowrap;
  }

  .btn:focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
  }

  .btn-primary {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    border-color: var(--color-primary-500);
  }

  .btn-primary:hover {
    background-color: var(--color-primary-600);
    border-color: var(--color-primary-600);
  }

  .btn-secondary {
    background-color: var(--color-neutral-0);
    color: var(--color-neutral-700);
    border-color: var(--color-neutral-300);
  }

  .btn-secondary:hover {
    background-color: var(--color-neutral-50);
    border-color: var(--color-neutral-400);
  }

  .btn-ghost {
    background-color: transparent;
    color: var(--color-neutral-600);
    border-color: transparent;
  }

  .btn-ghost:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
  }

  .btn-danger {
    background-color: var(--color-danger-500);
    color: var(--color-neutral-0);
    border-color: var(--color-danger-500);
  }

  .btn-danger:hover {
    background-color: var(--color-danger-600);
  }

  .btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--font-size-xs);
  }

  .btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-base);
  }

  .btn-icon {
    padding: 0.5rem;
    border-radius: var(--radius-md);
  }

  .btn[disabled], .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* --- Badges --- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .badge-confirmed, .badge-success {
    background-color: var(--color-success-50);
    color: var(--color-success-600);
  }

  .badge-cancelled, .badge-danger {
    background-color: var(--color-danger-50);
    color: var(--color-danger-600);
  }

  .badge-pending, .badge-warning {
    background-color: var(--color-warning-50);
    color: var(--color-warning-600);
  }

  .badge-neutral {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-600);
  }

  .badge-primary {
    background-color: var(--color-primary-100);
    color: var(--color-primary-600);
  }

  .badge-info {
    background-color: var(--color-info-50);
    color: var(--color-info-600);
  }

  /* --- Status dot --- */
  .status-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    display: inline-block;
    flex-shrink: 0;
  }

  .status-dot-success { background-color: var(--color-success-500); }
  .status-dot-danger  { background-color: var(--color-danger-500); }
  .status-dot-warning { background-color: var(--color-warning-500); }
  .status-dot-neutral { background-color: var(--color-neutral-400); }

  /* --- Forms --- */
  .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-700);
  }

  .form-label .required {
    color: var(--color-danger-500);
    margin-left: 2px;
  }

  .form-input,
  .form-select,
  .form-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-0);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
  }

  .form-input:focus,
  .form-select:focus,
  .form-textarea:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 15%, transparent);
  }

  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--color-neutral-400);
  }

  .form-input.error,
  .form-select.error,
  .form-textarea.error {
    border-color: var(--color-danger-500);
  }

  .form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
  }

  .form-error {
    font-size: var(--font-size-xs);
    color: var(--color-danger-600);
  }

  /* form-control: alias genérico para inputs, selects y textareas */
  .form-control {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-0);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    font-family: inherit;
    line-height: var(--line-height-normal);
  }

  .form-control:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 15%, transparent);
  }

  .form-control::placeholder {
    color: var(--color-neutral-400);
  }

  .form-control.error {
    border-color: var(--color-danger-500);
  }

  textarea.form-control {
    resize: vertical;
    min-height: 80px;
  }

  /* form-grid: layout de 2 columnas para campos de formulario */
  .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 1.5rem;
  }

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

    .form-grid [style*="grid-column: span 2"] {
      grid-column: span 1 !important;
    }
  }

  /* card-header-icon: icono decorativo en cabecera de card */
  .card-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    background-color: var(--color-primary-50);
    color: var(--color-primary-600);
    flex-shrink: 0;
    margin-right: 0.625rem;
  }

  /* card-header actions: botones a la derecha en cabecera */
  .card-header .card-actions {
    margin-left: auto;
  }

  /* --- Tables --- */
  .table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    background-color: var(--color-neutral-0);
  }

  .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
  }

  .table thead tr {
    border-bottom: 1px solid var(--color-neutral-200);
  }

  .table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }

  .table tbody tr {
    border-bottom: 1px solid var(--color-neutral-100);
    transition: background-color 0.1s;
  }

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

  .table tbody tr:hover {
    background-color: var(--color-neutral-50);
  }

  .table tbody td {
    padding: 0.875rem 1rem;
    color: var(--color-neutral-700);
    vertical-align: middle;
  }

  /* --- Tabs --- */
  .tabs {
    display: flex;
    border-bottom: 1px solid var(--color-neutral-200);
    gap: 0;
    overflow-x: auto;
  }

  .tab-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-500);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
    margin-bottom: -1px;
  }

  .tab-item:hover {
    color: var(--color-neutral-900);
    border-bottom-color: var(--color-neutral-300);
  }

  .tab-item.active {
    color: var(--color-primary-600);
    border-bottom-color: var(--color-primary-500);
    font-weight: var(--font-weight-semibold);
  }

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

  .search-icon {
    position: absolute;
    left: 0.625rem;
    color: var(--color-neutral-400);
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  .search-input {
    padding-left: 2rem;
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-900);
    background-color: var(--color-neutral-0);
    height: 36px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .search-input:focus {
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 15%, transparent);
  }

  /* --- Stat Cards (Dashboard) --- */
  .stat-card {
    background-color: var(--color-neutral-0);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-card);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .stat-card-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .stat-card-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    line-height: 1;
  }

  .stat-card-meta {
    font-size: var(--font-size-xs);
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .stat-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* --- Dropdown --- */
  .dropdown {
    position: relative;
    display: inline-block;
  }

  .dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background-color: var(--color-neutral-0);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    min-width: 160px;
    z-index: 50;
    padding: 0.25rem;
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-neutral-700);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.1s;
  }

  .dropdown-item:hover {
    background-color: var(--color-neutral-50);
    color: var(--color-neutral-900);
  }

  .dropdown-item.danger {
    color: var(--color-danger-600);
  }

  .dropdown-item.danger:hover {
    background-color: var(--color-danger-50);
  }

  .dropdown-divider {
    height: 1px;
    background-color: var(--color-neutral-100);
    margin: 0.25rem 0;
  }

  /* --- Avatar --- */
  .avatar {
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
  }

  .avatar-sm { width: 28px; height: 28px; }
  .avatar-md { width: 36px; height: 36px; }
  .avatar-lg { width: 48px; height: 48px; }
  .avatar-xl { width: 64px; height: 64px; }

  .avatar-placeholder {
    border-radius: var(--radius-full);
    background-color: var(--color-primary-100);
    color: var(--color-primary-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
  }

  /* --- Empty state --- */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    gap: 0.75rem;
  }

  .empty-state-icon {
    width: 48px;
    height: 48px;
    color: var(--color-neutral-300);
  }

  .empty-state-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-700);
  }

  .empty-state-description {
    font-size: var(--font-size-sm);
    color: var(--color-neutral-500);
    max-width: 320px;
  }

  /* --- Alerts / Flash --- */
  .alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
  }

  .alert-success {
    background-color: var(--color-success-50);
    border-color: var(--color-success-100);
    color: var(--color-success-600);
  }

  .alert-danger {
    background-color: var(--color-danger-50);
    border-color: var(--color-danger-100);
    color: var(--color-danger-600);
  }

  .alert-warning {
    background-color: var(--color-warning-50);
    border-color: var(--color-warning-100);
    color: var(--color-warning-600);
  }

  .alert-info {
    background-color: var(--color-info-50);
    border-color: var(--color-info-50);
    color: var(--color-info-600);
  }

  /* --- Detail List (dt/dd pairs) --- */
  .detail-list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.375rem 1rem;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
  }

  .detail-list dt {
    color: var(--color-neutral-500);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    padding-top: 0.1rem;
  }

  .detail-list dd {
    color: var(--color-neutral-800);
    margin: 0;
    word-break: break-word;
  }

  /* --- Pagination --- */
  .pagination {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-neutral-600);
    text-decoration: none;
    transition: background-color 0.1s, color 0.1s;
    border: 1px solid transparent;
  }

  .page-link:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
  }

  .page-link.current {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-0);
    font-weight: var(--font-weight-semibold);
  }

  .page-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* --- Skeleton loader --- */
  .skeleton {
    background: linear-gradient(90deg, var(--color-neutral-100) 25%, var(--color-neutral-200) 50%, var(--color-neutral-100) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
  }

  @keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* --- Modal --- */
  .modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.45);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  .modal-overlay[hidden] {
    display: none !important;
  }

  .modal {
    background-color: var(--color-neutral-0);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }

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

  .modal-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
  }

  .modal-body {
    padding: 1.5rem;
    flex: 1;
  }

  .modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-neutral-200);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
  }
}

/* ============================================================
   UTILITIES
   ============================================================ */

@layer utilities {
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .text-primary   { color: var(--color-primary-600); }
  .text-success   { color: var(--color-success-600); }
  .text-danger    { color: var(--color-danger-600); }
  .text-warning   { color: var(--color-warning-600); }
  .text-muted     { color: var(--color-neutral-500); }

  .bg-primary-soft { background-color: var(--color-primary-100); }
  .bg-success-soft { background-color: var(--color-success-50); }
  .bg-danger-soft  { background-color: var(--color-danger-50); }
  .bg-warning-soft { background-color: var(--color-warning-50); }

  .grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }

  .divider {
    height: 1px;
    background-color: var(--color-neutral-200);
  }
}

/* ============================================================
   PATIENTS MODULE
   ============================================================ */

/* ── Tabs de módulo (index y show) ── */
.module-tabs {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  padding: 0 2rem;
  position: sticky;
  top: 60px;       /* justo bajo el topbar */
  z-index: 30;
}

.module-tab {
  padding: 0.875rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6B7280;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.module-tab:hover { color: #374151; }

.module-tab.active {
  color: #5B4FCF;
  border-bottom-color: #5B4FCF;
  font-weight: 600;
}

/* ── Buscador del index de pacientes ── */
.search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 0.45rem 0.875rem;
  width: 220px;
  transition: border-color 0.15s;
}

.search-box:focus-within {
  border-color: #5B4FCF;
  box-shadow: 0 0 0 2px rgba(91, 79, 207, 0.12);
}

.search-box-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.875rem;
  color: #374151;
  width: 100%;
}

/* ── Tabla de pacientes (dt = dt-dental) ── */
.dt-table-wrap {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dt-table {
  width: 100%;
  border-collapse: collapse;
}

.dt-table thead th {
  padding: 0.8125rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5B4FCF;
  text-align: left;
  border-bottom: 1.5px solid #E5E7EB;
  white-space: nowrap;
}

.dt-table tbody tr {
  border-bottom: 1px solid #F3F4F6;
  transition: background 0.1s;
}

.dt-table tbody tr:last-child { border-bottom: none; }
.dt-table tbody tr:hover { background: #FAFAFA; }

.dt-table tbody td {
  padding: 0.8125rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  vertical-align: middle;
}

/* Celda nombre: avatar + texto */
.dt-td-name { width: 260px; }

.dt-patient-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: inherit;
}

.dt-patient-link:hover span { color: #5B4FCF; }

.dt-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #EDE9FE;
  color: #5B4FCF;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dt-doc-type {
  font-size: 0.7rem;
  font-weight: 600;
  color: #9CA3AF;
  margin-right: 3px;
}

/* Celda acciones */
.dt-td-actions {
  width: 48px;
  text-align: right;
  padding-right: 0.75rem !important;
}

/* ── Dropdown ⋮ ── */
.dt-dropdown {
  position: relative;
  display: inline-block;
}

.dt-dots-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  transition: background 0.1s, color 0.1s;
}

.dt-dots-btn:hover {
  background: #F3F4F6;
  color: #374151;
}

.dt-dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  min-width: 190px;
  z-index: 200;
  padding: 0.3rem 0;
  animation: dropdown-in 0.1s ease;
}

.dt-dropdown-menu.open { display: block; }

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

.dt-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  font-size: 0.875rem;
  color: #374151;
  text-decoration: none;
  transition: background 0.1s;
}

.dt-dropdown-item:hover {
  background: #F5F3FF;
  color: #5B4FCF;
}

/* ── Footer / paginación tabla ── */
.dt-table-footer {
  padding: 0.875rem 1rem;
  border-top: 1px solid #F3F4F6;
  font-size: 0.8125rem;
  color: #9CA3AF;
}

.dt-pagination {
  display: flex;
  justify-content: center;
  padding: 1rem;
  border-top: 1px solid #F3F4F6;
}

/* Estilos Pagy para el módulo pacientes */
.dt-pagination nav { display: flex; align-items: center; gap: 0.25rem; }

.dt-pagination a,
.dt-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.875rem;
  text-decoration: none;
  color: #6B7280;
  transition: background 0.1s, color 0.1s;
}

.dt-pagination a:hover { background: #F3F4F6; color: #374151; }

.dt-pagination .current {
  background: #5B4FCF;
  color: #fff;
  font-weight: 600;
}

/* ── Patient Show — grid layout ── */
.patient-show-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.5rem;
  align-items: start;
}

.patient-aside {
  /* columna izquierda: ficha */
}

.patient-main {
  /* columna derecha: resumen clínico */
  min-width: 0; /* evita desbordamiento en flex/grid */
}

/* Panel de tab — visible por defecto el primero */
.patient-tab-panel {
  /* los paneles ocultos usan style="display:none" desde el HTML */
}

/* Evita el estrechamiento por page-container anidado en el show del paciente.
   Así el contenido de cada tab ocupa el mismo ancho útil que la barra de tabs. */
.patient-tab-panel > .page-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* doc type badge dentro del show */
.dt-doc-type {
  display: inline-block;
  background: #EDE9FE;
  color: #5B4FCF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

@media (max-width: 900px) {
  .patient-show-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PATIENT FICHA — una sola card para la columna izquierda
══════════════════════════════════════════════════════════════════════ */

.patient-ficha-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Zona del avatar + nombre — centrada, con fondo blanco */
.patient-ficha-top {
  text-align: center;
  padding: 1.75rem 1.25rem 1.25rem;
  border-bottom: 1px solid var(--color-neutral-100);
}

.patient-photo-avatar {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--color-neutral-200);
}

.patient-photo-avatar-lg {
  width: 112px;
  height: 112px;
}

.patient-photo-avatar-placeholder {
  width: 100%;
  height: 100%;
  font-size: 2rem;
  font-weight: 700;
}

.patient-photo-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.patient-photo-form {
  margin: 0;
}

.patient-photo-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.patient-photo-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 0.75rem;
}

.patient-photo-tools {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.patient-photo-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-neutral-300);
  background: var(--color-neutral-0);
  color: var(--color-neutral-600);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.patient-photo-tool-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.patient-photo-camera-backdrop {
  z-index: 1400;
}

.patient-photo-camera-video {
  width: 100%;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: #000;
  min-height: 280px;
  object-fit: cover;
}

.patient-photo-camera-canvas {
  display: none;
}

.patient-ficha-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
  margin: 0 0 0.15rem;
}

.patient-ficha-sub {
  font-size: var(--font-size-xs);
  color: var(--color-neutral-400);
  margin: 0;
}

/* Tarjeta de próxima cita — dentro de la ficha */
.patient-ficha-next-apt {
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary-50);
  border-bottom: 1px solid var(--color-primary-100);
}

.patient-ficha-next-apt-label {
  font-size: var(--font-size-xs);
  color: var(--color-primary-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-weight-semibold);
  margin: 0 0 0.2rem;
}

.patient-ficha-next-apt-date {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
  margin: 0 0 0.35rem;
}

.patient-account-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.patient-account-kpi {
  text-align: center;
  padding: 1rem 1.25rem;
}

.patient-account-kpi-label {
  margin: 0 0 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-neutral-500);
}

.patient-account-kpi-value {
  margin: 0;
  font-size: 1.3rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-neutral-900);
}

.patient-account-list {
  display: grid;
  gap: 0.85rem;
}

.patient-account-plan summary {
  list-style: none;
  cursor: pointer;
}

.patient-account-plan summary::-webkit-details-marker {
  display: none;
}

.patient-account-plan-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-neutral-100);
}

.patient-account-plan-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-neutral-900);
}

.patient-account-plan-subtitle {
  margin: 0.15rem 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-neutral-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.patient-account-plan-metrics {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--font-size-sm);
  color: var(--color-neutral-600);
}

.patient-account-dot {
  color: var(--color-neutral-400);
}

.patient-account-actions {
  margin-top: 0.75rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.patient-appointments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.patient-appointments-table {
  font-size: var(--font-size-sm);
}

.patient-appointments-table thead th {
  background: var(--color-neutral-50);
}

.patient-appointments-date {
  font-weight: var(--font-weight-medium);
  color: var(--color-neutral-800);
}

.patient-appointments-time {
  color: var(--color-neutral-500);
  white-space: nowrap;
}

.patient-appointments-actions-col,
.patient-appointments-actions-cell {
  text-align: right;
  width: 88px;
}

.patient-account-plan .table-wrapper {
  border-radius: var(--radius-md);
}

.patient-account-table {
  font-size: var(--font-size-sm);
}

.patient-account-table thead th {
  background: var(--color-neutral-50);
  color: var(--color-neutral-500);
  border-bottom: 1px solid var(--color-neutral-200);
}

.patient-account-table tbody td {
  color: var(--color-neutral-700);
}

.patient-account-table tbody tr:hover {
  background: color-mix(in srgb, var(--color-primary-50) 55%, #fff);
}

.patient-account-table tbody td:last-child {
  font-variant-numeric: tabular-nums;
}

/* Sección interna (Datos personales, Contacto, etc.) */
.patient-ficha-section {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-neutral-100);
}

.patient-ficha-section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-400);
  margin: 0 0 0.625rem;
}

.patient-ficha-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}

/* Tabs tipo carpeta para categorías de documentos en paciente */
.documents-folder-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-neutral-200);
  margin-bottom: 0;
  padding-bottom: 0;
}

.documents-folder-tab {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.48rem 0.8rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.documents-folder-tab:hover {
  color: var(--color-neutral-800);
  background: var(--color-neutral-50);
}

.documents-folder-tab.active {
  background: var(--color-neutral-0);
  color: var(--color-primary-600);
  border-color: var(--color-neutral-200);
  border-bottom-color: var(--color-neutral-0);
  font-weight: var(--font-weight-semibold);
}

.documents-folder-panel {
  border: 1px solid var(--color-neutral-200);
  border-top: none;
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
  background: var(--color-neutral-0);
  padding: 0.875rem;
}

.documents-name-link {
  color: var(--color-primary-600);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.documents-name-link:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

.documents-upload-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
}

@media (max-width: 960px) {
  .documents-upload-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .patient-account-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .patient-appointments-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .patient-account-plan-summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .patient-account-plan-metrics {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Historia clínica / acordeones movidos a:
   app/assets/stylesheets/components/hc_accordion.css */

/* ============================================================
   TOM SELECT — integración con el design system
   ============================================================ */

/* Wrapper: ocupa todo el ancho */
.ts-wrapper {
  width: 100%;
}

/* Control principal (el "input" visible) */
.ts-control {
  border: 1px solid #D1D5DB !important; /* neutral-300 */
  border-radius: 0.5rem !important;     /* radius-md */
  padding: 0.4rem 0.75rem !important;
  font-size: 0.875rem !important;       /* font-size-sm */
  font-family: inherit !important;
  color: #1A1A2E !important;            /* neutral-900 */
  background-color: #FFFFFF !important;
  box-shadow: none !important;
  min-height: 38px;
  line-height: 1.5;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Input de búsqueda dentro del control */
.ts-control input {
  font-size: 0.875rem !important;
  color: #1A1A2E !important;
}

/* Placeholder */
.ts-control .placeholder {
  color: #9CA3AF !important; /* neutral-400 */
}

/* Focus */
.focus .ts-control {
  border-color: #7C6FCD !important; /* primary-500 */
  box-shadow: 0 0 0 3px color-mix(in srgb, #7C6FCD 15%, transparent) !important;
}

/* Dropdown */
.ts-dropdown {
  border: 1px solid #E5E7EB !important; /* neutral-200 */
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 16px 0 rgb(0 0 0 / 0.10) !important;
  font-size: 0.875rem !important;
  font-family: inherit !important;
  margin-top: 0.25rem !important;
  z-index: 9999;
}

/* Opciones del dropdown */
.ts-dropdown .option {
  padding: 0.5rem 0.75rem !important;
  color: #374151 !important;           /* neutral-700 */
  cursor: pointer;
}

/* Opción hover / activa */
.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color: #F0EEFF !important; /* primary-50 */
  color: #6B5FBF !important;            /* primary-600 */
}

/* Highlight del texto buscado */
.ts-dropdown .highlight {
  background: #EDE9FF !important;       /* primary-100 */
  border-radius: 2px;
}

/* Sin resultados */
.ts-dropdown .no-results {
  padding: 0.5rem 0.75rem !important;
  color: #9CA3AF !important;
  font-style: italic;
}

/* Caret (flecha) en single select */
.ts-wrapper.single .ts-control::after {
  border-color: #6B7280 transparent transparent !important; /* neutral-500 */
}

/* Estado deshabilitado */
.ts-wrapper.disabled .ts-control {
  background-color: #F5F5F7 !important; /* neutral-50 */
  opacity: 0.7;
  cursor: not-allowed;
}

/* ============================================================
   RIPS — Modales de Diagnósticos y Tipo Consulta
   ============================================================ */

/* Backdrop del modal (cubre toda la pantalla) */
.rips-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3rem 1rem;
  overflow-y: auto;
  transition: opacity 0.2s ease;
}

/* Contenedor del modal */
.rips-modal-dialog {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  width: 100%;
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
}

/* Contenido interior */
.rips-modal-content {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 6rem);
}

/* Header */
.rips-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--color-neutral-200);
  flex-shrink: 0;
}

.rips-modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-900);
  margin: 0;
}

.rips-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--color-neutral-500);
  transition: background 0.15s, color 0.15s;
}
.rips-modal-close:hover {
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
}

/* Body — scrollable */
.rips-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

/* Footer */
.rips-modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-neutral-200);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Tabs */
.rips-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-neutral-200);
  margin-bottom: 1rem;
}

.rips-tab {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-neutral-500);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.rips-tab:hover {
  color: var(--color-neutral-700);
}
.rips-tab.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-600);
}

/* Contenedor de resultados tabs */
.rips-tab-content {
  min-height: 200px;
}

/* Tabla de resultados RIPS */
.rips-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.rips-table thead tr {
  background: var(--color-neutral-50);
}
.rips-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 600;
  color: var(--color-neutral-600);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--color-neutral-200);
}
.rips-table td {
  padding: 0.5rem 0.75rem;
  color: var(--color-neutral-700);
  border-bottom: 1px solid var(--color-neutral-100);
  vertical-align: middle;
}
.rips-table tbody tr:hover {
  background: var(--color-primary-50);
}

/* Botón de selección dentro de la tabla */
.btn-diag-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--color-primary-300);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-diag-select:hover {
  background: var(--color-primary-600);
  color: #fff;
  border-color: var(--color-primary-600);
}
.btn-diag-select.selected {
  background: var(--color-primary-600);
  color: #fff;
  border-color: var(--color-primary-600);
}

/* Buscador dentro del modal */
.input-search-wrapper {
  position: relative;
}
.input-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-400);
  pointer-events: none;
}
.input-search-field {
  padding-left: 2.25rem !important;
}

/* Botón limpiar diagnóstico (×) — aparece solo cuando hay un diagnóstico seleccionado */
.btn-diag-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-neutral-300);
  border-radius: 6px;
  background: transparent;
  color: var(--color-neutral-500);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-diag-clear:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Paginación dentro del modal de diagnósticos */
.rips-pagination {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid var(--color-neutral-100);
  margin-top: 0.5rem;
}
.rips-pagination nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.rips-pagination a,
.rips-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: 6px;
  font-size: 0.8125rem;
  color: var(--color-neutral-600);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.rips-pagination a:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}
.rips-pagination span[aria-current="page"],
.rips-pagination span.current {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
  font-weight: 600;
  cursor: default;
}
.rips-pagination span.gap,
.rips-pagination span.disabled {
  border-color: transparent;
  color: var(--color-neutral-400);
  cursor: default;
  background: transparent;
}

/* ============================================================
   AGENDA MODULE
   ============================================================ */

/* ── Modal de reprogramación ── */

/* Panel de info actual (lectura) */
.reschedule-current {
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}

.reschedule-current-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  margin: 0 0 0.6rem;
}

.reschedule-current-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1.5rem;
}

.reschedule-meta-key {
  display: block;
  font-size: 0.72rem;
  color: var(--color-neutral-500);
  margin-bottom: 0.1rem;
}

.reschedule-meta-val {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-neutral-800);
}

/* Hint de duración */
.reschedule-duration-hint {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--color-neutral-400);
  margin-left: 0.35rem;
}

/* Mensaje de carga / vacío */
.reschedule-slots-loading,
.reschedule-slots-empty {
  font-size: 0.82rem;
  color: var(--color-neutral-400);
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}

/* Grid de botones de slot */
.reschedule-slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Botón individual de slot horario */
.reschedule-slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  font-family: ui-monospace, "SF Mono", monospace;
  color: var(--color-neutral-700);
  background: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
  white-space: nowrap;
}

.reschedule-slot-btn:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

.reschedule-slot-btn.is-selected {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
  font-weight: 600;
}

/* ── Modal de detalle de cita ── */

.detail-info-panel {
  background: var(--color-neutral-50, #f8fafc);
  border: 1px solid var(--color-neutral-100);
  border-radius: 8px;
  padding: 0.875rem 1rem;
}

.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 1.25rem;
}

.detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.detail-info-full { grid-column: 1 / -1; }

.detail-info-key {
  font-size: 0.63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-400);
}

.detail-info-val {
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--color-neutral-800);
}

.detail-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Divider "Reprogramar" con líneas laterales */
.detail-reschedule-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-neutral-400);
  margin: 0.25rem 0;
}
.detail-reschedule-divider::before,
.detail-reschedule-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-neutral-150, #e9ecef);
}

.detail-reschedule-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

/* ── Slot grid — botones de horarios disponibles ── */

.slot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  padding: 2px;
}

/* Botón individual de slot disponible */
.slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", monospace;
  color: #15803d;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
  line-height: 1;
}
.slot-btn:hover { background: #dcfce7; border-color: #4ade80; }
.slot-btn.is-selected {
  background: #16a34a;
  color: #fff;
  border-color: #15803d;
}

/* Botones agrupados (flechas + switcher de vista) — colapsa bordes internos */
.agenda-btn-group {
  display: inline-flex;
  flex-shrink: 0;
}
.agenda-btn-group .btn {
  border-radius: 0;
}
.agenda-btn-group .btn:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.agenda-btn-group .btn:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.agenda-btn-group .btn + .btn {
  margin-left: -1px; /* colapsa el borde doble entre botones */
}

/* Modo pantalla completa: ocupa todo el viewport menos el topbar */
.agenda-fullscreen {
  height: calc(100vh - var(--spacing-topbar));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* legado */
.agenda-toolbar { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.agenda-card-body { padding: 1rem; }

/* ══════════════════════════════════════════════════════════════
   VISTA SEMANAL
   ══════════════════════════════════════════════════════════════ */

.agenda-week-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.agenda-week-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--color-neutral-200);
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 10;
}

.agenda-week-col-hd {
  padding: 0.5rem 0.5rem 0.4rem;
  text-align: center;
  border-right: 1px solid var(--color-neutral-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.agenda-week-col-hd:last-child { border-right: none; }
.agenda-week-col-hd.is-today { background: #eff6ff; }
.agenda-week-col-hd.is-weekend { background: #fafafa; }

.agenda-week-day-name {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
}

.agenda-week-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: background 0.12s;
}
.agenda-week-day-num:hover { background: var(--color-neutral-100); }
.agenda-week-day-num.is-today {
  background: var(--color-primary-600);
  color: #fff;
}

.agenda-week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 200px;
}

.agenda-week-col {
  border-right: 1px solid var(--color-neutral-200);
  padding: 0.4rem 0.35rem;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.agenda-week-col:last-child { border-right: none; }
.agenda-week-col.is-today { background: #fafeff; }
.agenda-week-col.is-weekend { background: #fafafa; }

.agenda-week-empty-link {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 60px;
  text-decoration: none;
  color: var(--color-neutral-300);
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.agenda-week-empty-link:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-500);
}
.agenda-week-empty-plus { font-size: 1.4rem; font-weight: 300; line-height: 1; }

.agenda-week-chip {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
  border-left: 3px solid rgba(0,0,0,0.18);
  font-size: 0.72rem;
  line-height: 1.3;
  overflow: hidden;
}
.agenda-week-chip-time {
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0.9;
}
.agenda-week-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-week-chip-link { color: inherit; text-decoration: none; }
.agenda-week-chip-link:hover { text-decoration: underline; }

.agenda-week-day-link {
  font-size: 0.68rem;
  color: var(--color-primary-600);
  text-decoration: none;
  margin-top: auto;
  padding-top: 0.2rem;
  opacity: 0.8;
}
.agenda-week-day-link:hover { opacity: 1; text-decoration: underline; }

/* Colores de razón para chips de semana */
.agenda-week-chip.primera_vez         { background: #f6b17f; color: #fff; border-left-color: rgba(0,0,0,0.2); }
.agenda-week-chip.tratamiento         { background: #40b8af; color: #fff; border-left-color: rgba(0,0,0,0.2); }
.agenda-week-chip.urgencia            { background: #6c2d58; color: #fff; border-left-color: rgba(0,0,0,0.3); }
.agenda-week-chip.promocion_prevencion { background: #b2577a; color: #fff; border-left-color: rgba(0,0,0,0.2); }
.agenda-week-chip.control             { background: #5876fa; color: #fff; border-left-color: rgba(0,0,0,0.2); }
.agenda-week-chip:not(.primera_vez):not(.tratamiento):not(.urgencia):not(.promocion_prevencion):not(.control) {
  background: #e4e3e6; color: #334155;
}
.agenda-week-chip.confirmada  { border-left-color: #16a34a; }
.agenda-week-chip.atendida    { border-left-color: #312e81; }
.agenda-week-chip.no_atendida { border-left-color: #f59e0b; }
.agenda-week-chip.cancelada   { opacity: 0.55; border-left-color: #dc2626; }

/* ══════════════════════════════════════════════════════════════
   VISTA LISTA DE CITAS
   ══════════════════════════════════════════════════════════════ */

/* Contenedor scrolleable que llena el espacio del turbo-frame */
.agenda-list-wrap {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* Fuerza que la tabla use el estilo estándar .table */
.agenda-list-wrap .table { width: 100%; }

/* Hora: monospace, destacada */
.agenda-list-time {
  font-family: ui-monospace, "SF Mono", monospace;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-neutral-700);
  white-space: nowrap;
}

/* Nombre del paciente: peso medio */
.agenda-list-patient-link,
.agenda-list-patient-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary-600);
  text-decoration: none;
}

.agenda-list-patient-link:hover { text-decoration: underline; }

/* Celda de acciones: alineada a la derecha, sin wrapping */
.agenda-list-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}

/* Los button_to generan un <form> inline — lo hacemos display:contents */
.agenda-list-actions form {
  display: contents;
}

/* ══════════════════════════════════════════════════════════════
   VISTA MENSUAL
   ══════════════════════════════════════════════════════════════ */

.agenda-month-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.agenda-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--color-neutral-200);
  background: #f8fafc;
}
.agenda-month-hd {
  padding: 0.4rem;
  text-align: center;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-neutral-500);
  border-right: 1px solid var(--color-neutral-200);
}
.agenda-month-hd:last-child { border-right: none; }
.agenda-month-hd.is-weekend { color: var(--color-neutral-400); }

.agenda-month-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--color-neutral-200);
}
.agenda-month-week:last-child { border-bottom: none; }

.agenda-month-cell {
  min-height: 90px;
  padding: 0.3rem 0.35rem 0.4rem;
  border-right: 1px solid var(--color-neutral-200);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
}
.agenda-month-cell:last-child { border-right: none; }
.agenda-month-cell.out-of-month { background: #fafafa; }
.agenda-month-cell.out-of-month .agenda-month-day-num { color: var(--color-neutral-300); }
.agenda-month-cell.is-today { background: #f0f8ff; }
.agenda-month-cell.is-weekend:not(.is-today) { background: #fafafa; }

.agenda-month-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.agenda-month-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-neutral-700);
  text-decoration: none;
  transition: background 0.12s;
}
.agenda-month-day-num:hover { background: var(--color-neutral-100); }
.agenda-month-day-num.is-today {
  background: var(--color-primary-600);
  color: #fff;
}

/* Badge de total de citas en la celda del mes */
.agenda-month-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 0.3rem;
  border-radius: 9px;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--color-primary-100, #dbeafe);
  color: var(--color-primary-700, #1d4ed8);
  text-decoration: none;
  line-height: 1;
  transition: background 0.12s;
}
.agenda-month-count:hover { background: var(--color-primary-200, #bfdbfe); }

/* Fila de puntos de tipo con conteo */
.agenda-month-type-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  padding: 0 0.1rem;
}
.agenda-month-type-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 0.25rem;
  border-radius: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  cursor: default;
  line-height: 1;
}
.agenda-month-type-dot.primera_vez          { background: #f6b17f; }
.agenda-month-type-dot.tratamiento          { background: #40b8af; }
.agenda-month-type-dot.urgencia             { background: #6c2d58; }
.agenda-month-type-dot.promocion_prevencion { background: #b2577a; }
.agenda-month-type-dot.control              { background: #5876fa; }
.agenda-month-type-dot:not(.primera_vez):not(.tratamiento):not(.urgencia):not(.promocion_prevencion):not(.control) {
  background: var(--color-neutral-400);
}

/* Barra de leyenda: fila fija sobre la cuadrícula */
.agenda-legend {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--color-neutral-100);
  background: #fafafa;
  flex-shrink: 0;
}

.agenda-legend-group {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.agenda-legend-sep {
  width: 1px;
  height: 14px;
  background: var(--color-neutral-200);
  flex-shrink: 0;
}

/* Label de tipo: punto cuadrado + texto */
.agenda-lbl {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  color: var(--color-neutral-600);
  font-weight: 500;
  white-space: nowrap;
}

.agenda-lbl::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.agenda-lbl.primera_vez::before          { background: #f6b17f; }
.agenda-lbl.tratamiento::before          { background: #40b8af; }
.agenda-lbl.urgencia::before             { background: #6c2d58; }
.agenda-lbl.promocion_prevencion::before { background: #b2577a; }
.agenda-lbl.control::before              { background: #5876fa; }

/* Label de estado: barra vertical + texto */
.agenda-lbl-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  color: var(--color-neutral-600);
  font-weight: 500;
  white-space: nowrap;
}

.agenda-lbl-status::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
}

.agenda-lbl-status.confirmada-lbl::before   { background: #16a34a; }
.agenda-lbl-status.atendida-lbl::before     { background: #312e81; }
.agenda-lbl-status.no_atendida-lbl::before  { background: #f59e0b; }

/* Neutraliza las reglas de color global que se aplican a cualquier .primera_vez etc. */
.agenda-lbl.primera_vez,
.agenda-lbl.tratamiento,
.agenda-lbl.urgencia,
.agenda-lbl.promocion_prevencion,
.agenda-lbl.control {
  background: none;
  color: var(--color-neutral-600);
  border: none;
  padding: 0;
  border-radius: 0;
}

.agenda-table-wrap {
  width: 100%;
  overflow: auto;
  max-height: calc(100vh - 260px);
  position: relative;
}

.agenda-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.agenda-table thead th {
  background: #f8fafc;
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-700);
  padding: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  z-index: 15;
}

.agenda-hour-col {
  width: 78px;
}

.agenda-hour-col-start,
.agenda-hour-cell-start {
  position: sticky;
  left: 0;
  z-index: 16;
  background: #fff;
}

.agenda-hour-col-end,
.agenda-hour-cell-end {
  position: sticky;
  left: 78px;
  z-index: 16;
  background: #fff;
}

.agenda-hour-cell {
  border: 1px solid var(--color-neutral-200);
  text-align: center;
  color: var(--color-neutral-600);
  font-size: 0.75rem;
  background: #fff;
  padding: 0.25rem;
}

.agenda-cell {
  border: 1px solid var(--color-neutral-200);
  background: #fff;
  vertical-align: top;
  min-width: 170px;
  padding: 0;
}

.agenda-cell-available {
  position: relative;
}

.agenda-cell-action {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 44px;
  color: var(--color-neutral-300);
  transition: all 0.15s ease;
}

.agenda-cell-action:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.agenda-cell-plus {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.agenda-appointment {
  min-height: 44px;
  height: 100%;
  padding: 0.35rem 0.45rem;
  border-left: 4px solid transparent;
}

.agenda-appointment-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.agenda-appointment-time {
  font-size: 0.7rem;
  color: inherit;
  font-weight: 600;
}

.agenda-link-icon {
  color: inherit;
  opacity: 0.85;
  display: inline-flex;
  align-items: center;
}

.agenda-link-icon:hover {
  opacity: 1;
}

.agenda-appointment-patient {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

.agenda-appointment-patient a {
  color: inherit;
  text-decoration: none;
}

.agenda-appointment-meta {
  display: flex;
  flex-direction: column;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  line-height: 1.2;
  color: inherit;
}

.agenda-status-text {
  opacity: 0.9;
}

.agenda-density-compact .agenda-hour-cell {
  font-size: 0.65rem;
  padding: 0.15rem 0.2rem;
}

.agenda-density-compact .agenda-cell {
  min-width: 155px;
}

.agenda-density-compact .agenda-cell-action {
  min-height: 18px;
}

.agenda-density-compact .agenda-cell-plus {
  font-size: 0.8rem;
}

.agenda-density-compact .agenda-appointment {
  min-height: 18px;
  padding: 0.15rem 0.3rem;
  border-left-width: 3px;
}

.agenda-density-compact .agenda-appointment-top {
  gap: 0.2rem;
}

.agenda-density-compact .agenda-link-icon {
  display: none;
}

.agenda-density-compact .agenda-appointment-time {
  font-size: 0.63rem;
  line-height: 1.05;
}

.agenda-density-compact .agenda-appointment-patient {
  margin-top: 0.05rem;
  font-size: 0.68rem;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-density-compact .agenda-appointment-meta {
  display: none;
}

.agenda-form-grid {
  display: grid;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

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

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

.agenda-form-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agenda-form-grid-contact {
  grid-template-columns: 1fr 1.8fr 1fr;
}

.agenda-mobile-inline {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 0.5rem;
}

.agenda-mobile-prefix {
  min-width: 96px;
}

.agenda-days-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.agenda-days-grid label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
  color: var(--color-neutral-700);
}

.agenda-show-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agenda-show-label {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-neutral-500);
  text-transform: uppercase;
  font-weight: 600;
}

.agenda-show-value {
  margin: 0.2rem 0 0;
  color: var(--color-neutral-900);
  font-weight: 500;
}

.agenda-show-section {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-neutral-200);
}

.modal-panel-lg {
  max-width: 980px;
}

/* ═══════════════════════════════════════════════════════════════════════
   AGENDA CALENDARIO — Posicionamiento absoluto por columna
   Reemplaza la vista de tabla con rowspan.
   Estándar industria: 80px/hora (Dentrix, Open Dental, Curve Dental).
   ═══════════════════════════════════════════════════════════════════════ */

/* Contenedor principal — se expande para llenar el turbo-frame */
.agenda-cal-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  background: #fff;
}

/* Cabecera sticky: esquina + nombres de sillas */
.agenda-cal-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: #f8fafc;
  border-bottom: 2px solid var(--color-neutral-200);
  min-width: 0;
}

.agenda-cal-gutter-hd {
  width: 58px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-neutral-200);
}

.agenda-cal-cols-hd {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.agenda-cal-col-hd {
  flex: 1;
  min-width: 170px;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-neutral-600);
  text-align: center;
  border-right: 1px solid var(--color-neutral-200);
}

.agenda-cal-col-hd:last-child {
  border-right: none;
}

/* Cuerpo con scroll — flex:1 para ocupar todo el espacio restante */
.agenda-cal-body {
  display: flex;
  flex: 1;
  overflow: auto;
  min-height: 0;
  padding-top: 10px;  /* espacio para que el primer slot no quede cortado */
}

/* Canaleta de tiempo */
.agenda-cal-gutter {
  width: 58px;
  flex-shrink: 0;
  position: relative;
  border-right: 1px solid var(--color-neutral-200);
  background: #f8fafc;
}

.agenda-cal-hour-lbl {
  position: absolute;
  right: 6px;
  /* La etiqueta se centra verticalmente en la línea de hora.
     El padding-top del body (10px) ya da margen al primer slot. */
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-neutral-500);
  white-space: nowrap;
  line-height: 1;
}

/* Columnas de consultorios */
.agenda-cal-cols {
  display: flex;
  flex: 1;
}

.agenda-cal-col {
  flex: 1;
  min-width: 170px;
  position: relative;
  border-right: 1px solid var(--color-neutral-200);
  cursor: crosshair;
  transition: background 0.1s;
}

.agenda-cal-col:last-child {
  border-right: none;
}

.agenda-cal-col:hover {
  background: #fafcff;
}

/* Líneas de la rejilla horizontal */
.agenda-cal-hline {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}

.agenda-cal-hline-hour {
  border-top: 1px solid var(--color-neutral-200);
}

.agenda-cal-hline-half {
  border-top: 1px dashed var(--color-neutral-100);
}

/* ── Bloques de cita ── */
.agenda-cal-block {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 5px;
  border-left: 4px solid rgba(0, 0, 0, 0.25);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: default;
  z-index: 5;
  transition: box-shadow 0.15s, transform 0.1s;
}

.agenda-cal-block:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  transform: translateX(1px);
  z-index: 6;
}

.agenda-cal-block-inner {
  padding: 0.2rem 0.35rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  overflow: hidden;
}

.agenda-cal-block-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.agenda-cal-block-time {
  font-size: 0.65rem;
  font-weight: 700;
  opacity: 0.9;
  white-space: nowrap;
}

.agenda-cal-block-view {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.75;
  flex-shrink: 0;
  text-decoration: none;
}

.agenda-cal-block-view:hover {
  opacity: 1;
}

.agenda-cal-block-patient {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agenda-cal-block-link {
  color: inherit;
  text-decoration: none;
}

.agenda-cal-block-link:hover {
  text-decoration: underline;
}

.agenda-cal-block-doctor {
  flex: 1;                    /* ocupa el espacio entre hora e ícono */
  font-size: 0.63rem;
  line-height: 1.2;
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
  text-align: right;          /* pegado al lado del ícono, sin chocar con la hora */
  padding-right: 0.15rem;
}

.agenda-cal-block-meta {
  font-size: 0.65rem;
  line-height: 1.2;
  opacity: 0.85;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  overflow: hidden;
}


/* Clases de ESTADO para bloques del calendario: solo afectan al borde izquierdo.
   Las clases de razón (primera_vez, tratamiento, etc.) controlan el color de fondo.
   Sobreescribimos cualquier fondo que las clases de estado pusieran en el bloque. */
.agenda-cal-block.confirmada  { border-left-color: #16a34a; background: inherit; color: inherit; }
.agenda-cal-block.atendida    { border-left-color: #312e81; background: inherit; color: inherit; }
.agenda-cal-block.no_atendida { border-left-color: #f59e0b; background: inherit; color: inherit; }
.agenda-cal-block.cancelada   { border-left-color: #dc2626; opacity: 0.65; background: inherit; color: inherit; }
.agenda-cal-block.creada      { border-left-color: rgba(0, 0, 0, 0.18); }

/* Colores de razón para bloques del calendario (mismas razones, específicas al bloque) */
.agenda-cal-block.primera_vez         { background: #f6b17f; color: #fff; }
.agenda-cal-block.tratamiento         { background: #40b8af; color: #fff; }
.agenda-cal-block.urgencia            { background: #6c2d58; color: #fff; }
.agenda-cal-block.promocion_prevencion { background: #b2577a; color: #fff; }
.agenda-cal-block.control             { background: #5876fa; color: #fff; }
/* Cuando no hay razón se aplica creada como fallback de fondo */
.agenda-cal-block:not(.primera_vez):not(.tratamiento):not(.urgencia):not(.promocion_prevencion):not(.control) {
  background: #e4e3e6;
  color: #334155;
}

/* ═══════════════════════════════════════════════════════════════════════ */

.primera_vez {
  background: #f6b17f;
  color: #fff;
}

.promocion_prevencion {
  background: #b2577a;
  color: #fff;
}

.urgencia {
  background: #6c2d58;
  color: #fff;
}

.tratamiento {
  background: #40b8af;
  color: #fff;
}

.control {
  background: #5876fa;
  color: #fff;
}

.creada {
  background: #e4e3e6;
  color: #334155;
}

.confirmada {
  border-bottom: 4px solid #16a34a;
}

.atendida {
  border-bottom: 4px solid #312e81;
}

.no_atendida {
  border-bottom: 4px solid #f59e0b;
}

.cancelada {
  border-bottom: 4px solid #dc2626;
}

@media (max-width: 1024px) {
  .agenda-form-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .agenda-show-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .agenda-form-grid-2,
  .agenda-form-grid-3,
  .agenda-form-grid-4,
  .agenda-form-grid-contact,
  .agenda-days-grid,
  .agenda-show-grid {
    grid-template-columns: 1fr;
  }

  .agenda-mobile-inline {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}

/* TomSelect dentro de modales: evita que el dropdown quede por detrás */
.ts-dropdown,
.ts-wrapper .ts-dropdown,
.ts-wrapper.dropdown-active .ts-dropdown {
  z-index: 10050 !important;
}

.modal .ts-dropdown {
  max-height: 280px;
  overflow-y: auto;
}

.ts-option-line {
  color: var(--color-neutral-800);
  font-weight: var(--font-weight-medium);
}

.ts-option-meta {
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
  margin-top: 0.1rem;
}

/* ==========================================================================
   SETTINGS / ROLES INDEX
   ========================================================================== */

.roles-index-stack {
  display: grid;
  gap: 1rem;
}

.roles-index-card {
  overflow: hidden;
}

.roles-index-count {
  margin-left: 0.5rem;
}

.roles-index-hint {
  padding: 0.75rem 1.25rem;
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm);
}

.roles-index-table-wrapper {
  border: 0;
  border-radius: 0;
}

.roles-index-table {
  table-layout: fixed;
}

.roles-index-table th,
.roles-index-table td {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.roles-center-col {
  text-align: center !important;
  width: 88px;
}

.roles-actions-col {
  text-align: right !important;
  width: 110px;
}

.roles-name-cell {
  min-width: 220px;
}

.roles-name-main {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-neutral-900);
  font-weight: var(--font-weight-medium);
}

.roles-slug {
  color: var(--color-neutral-500);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--font-size-xs);
  margin-top: 0.12rem;
  word-break: break-all;
}

.roles-description-cell {
  color: var(--color-neutral-600);
}

.roles-system-badge {
  font-size: 10px;
}

.roles-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
}

.roles-actions form {
  margin: 0;
  display: inline-flex;
}

.roles-delete-btn {
  color: var(--color-danger-500);
}

@media (max-width: 900px) {
  .roles-index-table {
    min-width: 760px;
  }
}

/* ==========================================================================
   BIOSECURITY MODULE
   ========================================================================== */

.biosecurity-filters {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.wastes-index-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-0);
}

.wastes-index-pagination-meta {
  margin: 0;
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
}

.wastes-index-pagination-meta strong {
  color: var(--color-neutral-700);
  font-weight: var(--font-weight-semibold);
}

.wastes-index-pagination-nav {
  padding: 0;
  border-top: none;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .wastes-index-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .wastes-index-pagination-nav {
    justify-content: center;
  }
}

.form-actions-inline {
  display: inline-flex;
  gap: 0.5rem;
}

.sterilization-packages {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.sterilization-package-row {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr 46px;
  gap: 0.75rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-50);
}

.sterilization-package-remove {
  display: flex;
  align-items: end;
  justify-content: center;
}

.sterilization-quality-table td {
  vertical-align: top !important;
}

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

/* ==========================================================================
   SETTINGS CENTER (LEGACY PARITY)
   ========================================================================== */

.settings-content {
  min-width: 0;
}

.settings-content--full {
  width: 100%;
}

.settings-status-badge {
  flex-shrink: 0;
  font-size: 0.64rem;
  border-radius: var(--radius-full);
  padding: 0.14rem 0.4rem;
  border: 1px solid transparent;
}

.settings-status-badge.is-ready {
  background: #ecfdf3;
  color: #027a48;
  border-color: #abefc6;
}

.settings-status-badge.is-pending {
  background: #fff7ed;
  color: #b54708;
  border-color: #fed7aa;
}

.settings-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.settings-home-card {
  border: 1px solid var(--color-neutral-200);
  border-radius: 14px;
  background: var(--color-neutral-0);
  box-shadow: var(--shadow-card);
  padding: 0.95rem;
}

.settings-home-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.7rem;
}

.settings-home-card-header h2 {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-neutral-800);
}

.settings-home-card-header span {
  color: var(--color-neutral-500);
  font-size: var(--font-size-xs);
}

.settings-home-card-items {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.settings-home-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: 10px;
  padding: 0.5rem 0.65rem;
  text-decoration: none;
  color: var(--color-neutral-700);
}

.settings-home-item:hover {
  border-color: var(--color-primary-200);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.settings-home-item-label {
  min-width: 0;
  font-size: 0.79rem;
  line-height: 1.2;
}

.settings-home-item-status {
  flex-shrink: 0;
  font-size: 0.67rem;
  border-radius: var(--radius-full);
  padding: 0.12rem 0.45rem;
}

.settings-home-item.is-ready .settings-home-item-status {
  background: #ecfdf3;
  color: #027a48;
}

.settings-home-item.is-pending .settings-home-item-status {
  background: #fff7ed;
  color: #b54708;
}

.settings-module-placeholder {
  max-width: 860px;
}

.settings-module-placeholder-status {
  margin-bottom: 0.75rem;
}

.settings-module-placeholder-title {
  margin: 0 0 0.35rem;
  color: var(--color-neutral-900);
}

.settings-module-placeholder-description {
  margin-bottom: 1rem;
  color: var(--color-neutral-600);
}

.settings-module-placeholder-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

.settings-facilities-filters-card {
  margin-bottom: 1rem;
}

.settings-facilities-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.settings-facilities-filters-line {
  flex: 1;
  min-width: 340px;
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.settings-facilities-filter-group {
  margin: 0;
}

.settings-facilities-filter-group-search {
  flex: 1;
  min-width: 240px;
}

.settings-facilities-filter-group-state {
  width: 190px;
}

.settings-facilities-search {
  width: 100%;
}

.settings-facilities-state-select {
  width: 100%;
}

.settings-facilities-filters-right {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.settings-facilities-table-card {
  margin-bottom: 1rem;
}

.settings-facilities-table td {
  vertical-align: middle;
}

.settings-facilities-name-link {
  color: var(--color-primary-600);
  text-decoration: none;
}

.settings-facilities-name-link:hover {
  text-decoration: underline;
}

.settings-facilities-actions-header {
  text-align: right;
}

.settings-facilities-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
}

.settings-facilities-action-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
}

.settings-facilities-action-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.settings-facilities-actions form {
  display: contents;
}

.settings-facility-form {
  display: grid;
  gap: 1rem;
}

.settings-facility-errors-list {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.settings-facility-form-grid {
  margin-bottom: 0;
}

.settings-facility-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-facility-show-card {
  margin-bottom: 1rem;
}

.settings-facility-show-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-facility-show-actions form {
  display: inline-flex;
  margin: 0;
}

.settings-devices-filters-card {
  margin-bottom: 1rem;
}

.settings-devices-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.settings-devices-filters-line {
  flex: 1;
  min-width: 340px;
  display: flex;
  align-items: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.settings-devices-filter-group {
  margin: 0;
  min-width: 240px;
  flex: 1;
}

.settings-devices-filter-group-state {
  flex: 0 0 180px;
  min-width: 180px;
}

.settings-devices-select,
.settings-devices-state-select {
  width: 100%;
}

.settings-devices-table-card {
  margin-bottom: 1rem;
}

.settings-devices-table td {
  vertical-align: middle;
}

.settings-devices-name-link {
  color: var(--color-primary-600);
  text-decoration: none;
}

.settings-devices-name-link:hover {
  text-decoration: underline;
}

.settings-devices-facility-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-devices-actions-header {
  text-align: right;
}

.settings-devices-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
}

.settings-devices-action-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
}

.settings-devices-action-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.settings-devices-actions form {
  display: contents;
}

.settings-device-form {
  display: grid;
  gap: 1rem;
}

.settings-device-errors-list {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.settings-device-form-grid {
  margin-bottom: 0;
}

.settings-device-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-device-show-card {
  margin-bottom: 1rem;
}

.settings-device-show-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-device-show-actions form {
  display: inline-flex;
  margin: 0;
}

.settings-specializations-table-card {
  margin-bottom: 1rem;
}

.settings-specializations-table td {
  vertical-align: middle;
}

.settings-specializations-name-link {
  color: var(--color-primary-600);
  text-decoration: none;
}

.settings-specializations-name-link:hover {
  text-decoration: underline;
}

.settings-specializations-actions-header {
  text-align: right;
}

.settings-specializations-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
}

.settings-specializations-action-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
}

.settings-specializations-action-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.settings-specializations-actions form {
  display: contents;
}

.settings-specialization-form {
  display: grid;
  gap: 1rem;
}

.settings-specialization-errors-list {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.settings-specialization-form-grid {
  margin-bottom: 0;
}

.settings-specialization-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-specialization-show-card {
  margin-bottom: 1rem;
}

.settings-specialization-show-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-specialization-show-actions form {
  display: inline-flex;
  margin: 0;
}

.settings-clinical-filters-card {
  margin-bottom: 1rem;
}

.settings-clinical-filters {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.875rem;
  flex-wrap: wrap;
}

.settings-clinical-filters-line {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex: 1 1 56rem;
  min-width: 30rem;
}

.settings-clinical-filters-line-procedures {
  flex: 1 1 64rem;
}

.settings-clinical-filter-group {
  flex: 1 1 14rem;
  min-width: 11rem;
  margin-bottom: 0;
}

.settings-clinical-filter-group-search {
  flex: 2 1 20rem;
}

.settings-clinical-filter-group-state {
  flex: 0 0 11rem;
  min-width: 10rem;
}

.settings-clinical-filters-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.settings-clinical-table-card {
  margin-bottom: 1rem;
}

.settings-clinical-table {
  min-width: 56rem;
}

.settings-clinical-name-link {
  color: var(--color-primary-600);
  text-decoration: none;
}

.settings-clinical-name-link:hover {
  text-decoration: underline;
}

.settings-clinical-muted {
  color: var(--color-neutral-500);
  font-size: 0.8125rem;
  margin-top: 0.125rem;
}

.settings-clinical-actions-header {
  text-align: right;
}

.settings-clinical-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: nowrap;
}

.settings-clinical-action-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0;
}

.settings-clinical-action-btn svg {
  width: 0.9rem;
  height: 0.9rem;
}

.settings-clinical-actions form {
  display: contents;
}

.settings-clinical-form {
  display: grid;
  gap: 1rem;
}

.settings-clinical-form-grid {
  margin-bottom: 0;
}

.settings-clinical-errors-list {
  margin: 0.5rem 0 0;
  padding-left: 1rem;
}

.settings-clinical-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-clinical-show-card {
  margin-bottom: 1rem;
}

.settings-clinical-show-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.settings-clinical-show-actions form {
  display: inline-flex;
  margin: 0;
}

.settings-consentimientos-show-card {
  margin-bottom: 1rem;
}

.settings-consentimientos-divider {
  margin: 1.25rem 0 1rem;
  border: 0;
  border-top: 1px solid var(--color-neutral-200);
}

.settings-consentimientos-content-title {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.settings-consentimientos-content-body {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  color: var(--color-neutral-800);
  background: var(--color-neutral-0);
}

.settings-consentimientos-content-field {
  min-height: 18rem;
}

.settings-consent-variables-box {
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-0);
  padding: 0.75rem;
}

.settings-consent-variables-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.625rem;
}

.settings-consent-variable-add {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.settings-consent-variables-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.settings-consent-variable-chip-wrap {
  position: relative;
  display: inline-flex;
}

.settings-consent-variable-chip {
  border: 1px solid var(--color-primary-200);
  border-radius: 9999px;
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.settings-consent-variable-chip:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
}

.settings-consent-variable-chip.is-custom {
  padding-right: 1.65rem;
}

.settings-consent-variable-chip.is-fixed {
  border-color: var(--color-neutral-300);
  background: var(--color-neutral-50);
  color: var(--color-neutral-700);
}

.settings-consent-variable-remove {
  position: absolute;
  right: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: none;
  background: transparent;
  padding: 0;
  color: var(--color-danger-600);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-consent-variable-remove:hover {
  color: var(--color-danger-500);
}

.settings-consent-variable-dialog {
  max-width: 520px;
}

.form-help-text {
  margin: 0.375rem 0 0;
  color: var(--color-neutral-500);
  font-size: 0.8125rem;
}

.settings-procedure-code-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-procedure-cups-btn {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-procedure-cups-dialog {
  max-width: 980px;
  width: min(980px, calc(100vw - 3rem));
}

.settings-procedure-cups-body {
  max-height: min(76vh, 820px);
  overflow: auto;
}

.settings-procedure-cups-filters {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.settings-procedure-cups-tabs {
  margin-bottom: 0.75rem;
}

.settings-procedure-cups-empty {
  text-align: center;
  color: var(--color-neutral-500);
  padding: 1.5rem 0;
}

/* ------------------------------------------------------------
   Settings > Integraciones Contables (SIIGO)
   ------------------------------------------------------------ */
.settings-accounting-card {
  margin-bottom: 1rem;
}

.settings-accounting-provider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.settings-accounting-provider-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-accounting-provider-title h2 {
  margin: 0;
  font-size: 1.125rem;
}

.settings-accounting-credentials-form {
  margin-top: 0.5rem;
}

.settings-accounting-credentials-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.settings-accounting-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.settings-accounting-tab-link {
  border: 1px solid var(--color-neutral-300);
  border-radius: 999px;
  color: var(--color-neutral-700);
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  text-decoration: none;
}

.settings-accounting-tab-link:hover {
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

.settings-accounting-tab-link.is-active {
  background: var(--color-primary-100);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

.settings-accounting-empty {
  align-items: center;
  background: var(--color-neutral-50);
  border: 1px dashed var(--color-neutral-300);
  border-radius: 0.75rem;
  color: var(--color-neutral-600);
  display: flex;
  justify-content: center;
  min-height: 120px;
  padding: 1rem;
  text-align: center;
}

.settings-accounting-table-head h3 {
  font-size: 1rem;
  margin: 0;
}

.settings-accounting-table-head p {
  color: var(--color-neutral-500);
  font-size: 0.875rem;
  margin: 0.35rem 0 0.9rem;
}

.settings-accounting-table th,
.settings-accounting-table td {
  vertical-align: middle;
}

.settings-accounting-actions-header {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.settings-accounting-inline-form {
  display: flex;
  justify-content: flex-end;
}

.settings-accounting-config-head {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.settings-accounting-config-head h3 {
  font-size: 1rem;
  margin: 0;
}

.settings-accounting-config-head p {
  color: var(--color-neutral-500);
  font-size: 0.875rem;
  margin: 0.35rem 0 0;
}

.settings-accounting-muted {
  color: var(--color-neutral-500);
  font-size: 0.875rem;
}

.settings-accounting-separator {
  border: 0;
  border-top: 1px solid var(--color-neutral-200);
  margin: 1rem 0;
}

@media (max-width: 1400px) {
  .settings-home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .settings-home-grid {
    grid-template-columns: 1fr;
  }

  .settings-facilities-filters-line {
    min-width: 0;
  }

  .settings-facilities-filter-group-state {
    width: 100%;
  }

  .settings-facilities-filter-group-search {
    min-width: 0;
  }

  .settings-facilities-actions {
    flex-wrap: wrap;
  }

  .settings-devices-filters-line {
    min-width: 0;
  }

  .settings-devices-filter-group,
  .settings-devices-filter-group-state {
    min-width: 0;
    flex: 1 1 100%;
  }

  .settings-devices-actions {
    flex-wrap: wrap;
  }

  .settings-specializations-actions {
    flex-wrap: wrap;
  }

  .settings-clinical-filters-line,
  .settings-clinical-filters-line-procedures {
    min-width: 0;
  }

  .settings-clinical-filter-group,
  .settings-clinical-filter-group-state {
    min-width: 0;
    flex: 1 1 100%;
  }

  .settings-clinical-actions {
    flex-wrap: wrap;
  }

  .settings-procedure-cups-filters {
    grid-template-columns: 1fr;
  }
}


/* Reports module */
.reports-page {
  display: grid;
  gap: 1.25rem;
}

.reports-home-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.reports-home-card,
.reports-placeholder-card,
.reports-summary-card,
.reports-table-card,
.reports-filters-card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.reports-home-card {
  padding: 1.25rem;
}

.reports-home-card--compact {
  min-height: 0;
}

.reports-home-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.reports-home-card-header h2,
.reports-placeholder-card h2 {
  margin: 0;
  color: var(--color-neutral-900);
  font-size: 1.125rem;
  font-weight: 700;
}

.reports-home-card-header p,
.reports-placeholder-card p {
  margin: 0.35rem 0 0;
  color: var(--color-neutral-500);
  font-size: 0.925rem;
  line-height: 1.5;
}

.reports-home-card-header span {
  color: var(--color-neutral-500);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.reports-home-card-items {
  display: grid;
  gap: 0.85rem;
}

.reports-home-item {
  display: grid;
  gap: 0.35rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: 0.9rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.reports-home-item:hover {
  border-color: var(--color-primary-300);
  box-shadow: 0 8px 24px rgba(52, 46, 102, 0.08);
  transform: translateY(-1px);
}

.reports-home-item.is-ready {
  background: var(--color-neutral-0);
}

.reports-home-item.is-pending {
  background: var(--color-neutral-50);
}

.reports-home-item-label {
  color: var(--color-neutral-900);
  font-weight: 600;
}

.reports-home-item-description {
  color: var(--color-neutral-500);
  font-size: 0.875rem;
}

.reports-home-item-status {
  justify-self: start;
  margin-top: 0.15rem;
  border-radius: var(--radius-full);
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.reports-home-item.is-ready .reports-home-item-status {
  color: var(--color-success-600);
  background: var(--color-success-50);
}

.reports-home-item.is-pending .reports-home-item-status {
  color: var(--color-warning-600);
  background: var(--color-warning-50);
}

.reports-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.reports-subnav-item {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-full);
  background: var(--color-neutral-0);
  color: var(--color-neutral-600);
  font-weight: 600;
  text-decoration: none;
}

.reports-subnav-item.is-active {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.reports-filters-card .card-body {
  padding: 1.125rem 1.25rem;
}

.reports-filters-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  align-items: end;
}

.reports-filter-group {
  min-width: 0;
}

.reports-filter-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.reports-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.reports-summary-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reports-summary-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reports-summary-card {
  padding: 1.1rem 1.25rem;
}

.reports-summary-label {
  margin: 0 0 0.45rem;
  color: var(--color-neutral-500);
  font-size: 0.875rem;
  font-weight: 500;
}

.reports-summary-card h2 {
  margin: 0;
  color: var(--color-neutral-900);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

.reports-table-card {
  overflow: hidden;
}

.reports-table-card .table-wrapper {
  overflow-x: auto;
}

.reports-table th,
.reports-table td {
  vertical-align: top;
}

.reports-table .table-empty-state {
  padding: 2rem 1.5rem;
  text-align: center;
  color: var(--color-neutral-500);
}

.reports-link {
  color: var(--color-primary-700);
  text-decoration: none;
  font-weight: 600;
}

.reports-link:hover {
  text-decoration: underline;
}

.reports-amount {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
}

.reports-amount--negative {
  color: var(--color-danger-600);
}

.reports-amount--positive {
  color: var(--color-success-600);
}

.reports-placeholder-card {
  padding: 1.5rem;
}

@media (max-width: 1200px) {
  .reports-home-grid,
  .reports-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .reports-filter-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .reports-home-grid,
  .reports-summary-grid,
  .reports-summary-grid--three,
  .reports-summary-grid--two,
  .reports-filters-form {
    grid-template-columns: 1fr;
  }

  .reports-home-card-header {
    flex-direction: column;
  }

  .reports-subnav {
    gap: 0.5rem;
  }

  .reports-subnav-item {
    width: 100%;
    justify-content: center;
  }
}