/* ============================================================
   CONNECTIONS — Admin Panel Design System
   Aplica sobre AdminLTE como capa de personalización
   ============================================================ */

/* ──────────────────────────────────────────
   VARIABLES & BASE
────────────────────────────────────────── */
:root {
    --ap-green:       #1d6b38;
    --ap-green-mid:   #198754;
    --ap-green-bg:    #d1fae5;
    --ap-green-soft:  #f0faf4;
    --ap-bg:          #f0f2f5;
    --ap-white:       #ffffff;
    --ap-border:      #e5e7eb;
    --ap-text:        #111827;
    --ap-text-muted:  #6b7280;
    --ap-shadow:      0 1px 3px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05);
    --ap-radius:      12px;
    --ap-font:        'Inter', 'Source Sans Pro', system-ui, sans-serif;
    --ap-sidebar-bg:  #1e3a28;
    --ap-navbar-bg:   #162b1e;
}

body,
.content-wrapper,
.main-footer {
    font-family: var(--ap-font) !important;
    background: var(--ap-bg) !important;
}

/* ──────────────────────────────────────────
   NAVBAR SUPERIOR — Gris Transparente (Datta Style)
────────────────────────────────────────── */
.main-header.navbar {
    background: rgba(55, 65, 81, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.25) !important;
    height: 52px !important;
    min-height: 52px !important;
    position: relative !important;
}
.main-header.navbar::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(14,165,233,0.20) 30%, rgba(14,165,233,0.30) 50%, rgba(14,165,233,0.20) 70%, transparent 100%) !important;
}
.main-header .nav-link,
.main-header .navbar-nav .nav-link {
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.84rem !important;
    font-weight: 500 !important;
    font-family: var(--ap-font) !important;
    padding: 6px 10px !important;
    transition: color 0.18s !important;
}
.main-header .nav-link:hover,
.main-header .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}
/* Badge "Administrador" en navbar — alineado al ancho del sidebar (250px) */
.ap-nav-admin-badge {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.3px !important;
    background: rgba(255,255,255,0.12) !important;
    border-radius: 8px !important;
    padding: 5px 0 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    width: 200px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ap-nav-admin-badge i {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.78rem !important;
}
.ap-nav-admin-badge:hover {
    background: rgba(255,255,255,0.2) !important;
}
/* Cuando sidebar se colapsa, reducir el badge */
.sidebar-collapse .ap-nav-admin-badge {
    width: auto !important;
    padding: 5px 10px !important;
}
.ap-nav-sep {
    color: rgba(255,255,255,0.22) !important;
    padding: 0 4px !important;
    font-weight: 300 !important;
}
.ap-nav-tenant-wrap {
    display: inline-flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.83rem !important;
}
.ap-nav-tenant-wrap i {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.78rem !important;
}
.ap-nav-tenant {
    color: #fff !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}
/* Avatar del usuario en navbar */
.ap-nav-user-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    cursor: default !important;
}
.ap-nav-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: #fff;
    border: 1.5px solid rgba(255,255,255,0.25);
}
.ap-nav-logout {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 0.83rem !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    transition: background 0.18s, color 0.18s !important;
}
.ap-nav-logout:hover {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

/* ──────────────────────────────────────────
   SIDEBAR — Gris Transparente (Datta Style)
────────────────────────────────────────── */

/* Fondo gris semi-transparente — frosted glass */
.main-sidebar {
    background: linear-gradient(180deg, rgba(55,65,81,0.92) 0%, rgba(55,65,81,0.85) 50%, rgba(75,85,99,0.75) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 2px 0 20px rgba(0,0,0,0.20) !important;
    overflow: hidden !important;
}
/* Borde sutil de vidrio a la derecha */
.main-sidebar::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    width: 1px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05), rgba(255,255,255,0.15)) !important;
    pointer-events: none !important;
    z-index: 2 !important;
    display: block !important;
}
/* Transparencia más visible en la parte inferior */
.main-sidebar::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    height: 180px !important;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.06)) !important;
    pointer-events: none !important;
    display: block !important;
}

/* Brand: logo centrado sobre fondo navy */
.brand-link {
    background: transparent !important;
    border-bottom: none !important;
    padding: 8px 12px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    min-height: auto !important;
    position: relative !important;
    z-index: 1 !important;
}
.brand-link::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 16px !important;
    right: 16px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%) !important;
}
/* Logo blanco: 80% del ancho del sidebar */
.main-sidebar .brand-link .brand-image.ap-brand-logo,
.main-sidebar .brand-link img.ap-brand-logo,
.ap-brand-logo {
    width: 80% !important;
    height: auto !important;
    max-height: none !important;
    max-width: 80% !important;
    min-height: unset !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    object-fit: contain !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    float: none !important;
    line-height: 1 !important;
    filter: brightness(0) invert(1) !important;
    display: block !important;
}
/* Sidebar: selector sucursal + menu multiline */
.ap-sidebar-label { color: #fff !important; font-size: 0.75rem; }
.ap-sidebar-select { font-size: 12px; }
.ap-menu-multiline span { display: block; margin-left: 0; font-size: 0.85em; opacity: 0.8; }

.brand-text,
.brand-text.font-weight-light,
.brand-text.font-weight-bold {
    font-family: var(--ap-font) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
    float: none !important;
    margin: 0 !important;
}
.ap-brand-sub {
    font-family: var(--ap-font) !important;
    font-size: 0.6rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.30) !important;
    letter-spacing: 1.8px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    float: none !important;
}

/* User panel — sin espacio muerto entre logo y sucursal */
.user-panel {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 4px 12px !important;
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}
.user-panel .info a {
    color: rgba(255,255,255,0.8) !important;
    font-family: var(--ap-font) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}
.user-panel .image img {
    border: 2px solid rgba(255,255,255,0.15) !important;
}

/* Sidebar scroll */
.sidebar {
    padding-top: 4px !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ── Sección header ───────────────────── */
.sidebar .nav-header {
    color: rgba(255,255,255,0.30) !important;
    font-size: 0.63rem !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 16px 18px 6px !important;
    font-weight: 700 !important;
}

/* ── Ítems principales ──────────────────── */
.sidebar .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link {
    font-family: var(--ap-font) !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.50) !important;
    background: transparent !important;
    border-left: none !important;
    border-radius: 10px !important;
    margin: 2px 8px !important;
    padding: 10px 14px !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* Ítem activo — estilo Datta */
.sidebar .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active {
    background: transparent !important;
    color: #fff !important;
    border-left: none !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
/* Hover */
.sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
    border-left: none !important;
    box-shadow: none !important;
}

/* ── Iconos con badge ──────────────────── */
.sidebar .nav-sidebar > .nav-item > .nav-link .nav-icon,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link .nav-icon {
    color: rgba(255,255,255,0.35) !important;
    font-size: 0.85rem !important;
    width: 28px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.04) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}
.sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: #fff !important;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important;
    box-shadow: 0 3px 10px rgba(14,165,233,0.35) !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
}
.sidebar .nav-sidebar > .nav-item > .nav-link:hover .nav-icon,
.sidebar-dark-success .nav-sidebar > .nav-item > .nav-link:hover .nav-icon {
    color: rgba(255,255,255,0.7) !important;
    background: rgba(255,255,255,0.08) !important;
}

/* ── Flecha de submenú ───────────────────── */
.sidebar .nav-sidebar .nav-link > p > .right,
.sidebar-dark-success .nav-sidebar .nav-link > p > .right {
    color: rgba(255,255,255,0.2) !important;
    font-size: 0.7rem !important;
    transition: transform 0.2s, color 0.18s !important;
}
.sidebar .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right,
.sidebar-dark-success .nav-sidebar > .nav-item.menu-open > .nav-link > p > .right {
    color: rgba(255,255,255,0.6) !important;
}

/* ── Sub-ítems (treeview) — fondo más transparente ── */
.sidebar .nav-treeview,
.sidebar-dark-success .nav-treeview {
    background: rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 8px !important;
    margin: 2px 6px !important;
    padding: 4px 0 6px !important;
}
.sidebar .nav-treeview > .nav-item > .nav-link,
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link {
    font-family: var(--ap-font) !important;
    font-size: 0.80rem !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.35) !important;
    background: transparent !important;
    border-left: none !important;
    border-radius: 8px !important;
    margin: 1px 12px !important;
    padding: 7px 14px 7px 52px !important;
    transition: all 0.18s !important;
}
.sidebar .nav-treeview > .nav-item > .nav-link.active,
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active {
    background: transparent !important;
    color: #22d3ee !important;
    border-left: none !important;
    font-weight: 600 !important;
}
.sidebar .nav-treeview > .nav-item > .nav-link:hover,
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link:hover {
    background: rgba(255,255,255,0.03) !important;
    color: rgba(255,255,255,0.7) !important;
    border-left: none !important;
}
.sidebar .nav-treeview > .nav-item > .nav-link .nav-icon,
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link .nav-icon {
    color: rgba(255,255,255,0.2) !important;
    font-size: 0.82rem !important;
    width: 1.2rem !important;
}
.sidebar .nav-treeview > .nav-item > .nav-link.active .nav-icon,
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link.active .nav-icon {
    color: #22d3ee !important;
}
.sidebar .nav-treeview > .nav-item > .nav-link:hover .nav-icon,
.sidebar-dark-success .nav-treeview > .nav-item > .nav-link:hover .nav-icon {
    color: rgba(255,255,255,0.6) !important;
}

/* ── Scrollbar del sidebar ────────────── */
.main-sidebar .sidebar::-webkit-scrollbar { width: 4px; }
.main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
}
.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}

/* ──────────────────────────────────────────
   CONTENT HEADER (cabecera de página)
────────────────────────────────────────── */
.content-header {
    padding: 18px 20px 0 !important;
}
.content-header h1 {
    font-family: var(--ap-font) !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: var(--ap-text) !important;
}

/* Nuevo componente: cabecera de página con icono */
.ap-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ap-white);
    border-radius: var(--ap-radius);
    padding: 14px 20px;
    margin-bottom: 4px;
    box-shadow: var(--ap-shadow);
    border: 1px solid var(--ap-border);
    position: relative;
    overflow: hidden;
}
.ap-page-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #7dd3fc 0%, #0369a1 100%);
    border-radius: var(--ap-radius) 0 0 var(--ap-radius);
}
.ap-page-header-left  { display: flex; align-items: center; gap: 14px; }
.ap-page-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #0369a1; flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(3,105,161,0.12);
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ap-page-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(3,105,161,0.08) 0%, transparent 60%);
    pointer-events: none;
}
.ap-page-title    { font-size: 1.15rem; font-weight: 700; color: var(--ap-text); font-family: var(--ap-font); line-height: 1.2; }
.ap-page-subtitle { font-size: 0.77rem; color: var(--ap-text-muted); font-family: var(--ap-font); margin-top: 1px; }

/* Variante amarilla para imagenología */
.ap-page-icon--warning {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    color: #f57f17;
    box-shadow: 0 2px 8px rgba(245,127,23,0.12);
}
.ap-page-icon--warning::after {
    background: linear-gradient(135deg, rgba(245,127,23,0.08) 0%, transparent 60%);
}

/* ──────────────────────────────────────────
   CARDS
────────────────────────────────────────── */
.card {
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) !important;
    box-shadow: var(--ap-shadow) !important;
    font-family: var(--ap-font) !important;
    margin-bottom: 16px !important;
}
.card-header {
    background: linear-gradient(180deg, #fafbfc 0%, #f4f5f7 100%) !important;
    border-bottom: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius) var(--ap-radius) 0 0 !important;
    padding: 11px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 0 !important;
}
.card-header h3.card-title,
.card-header .card-title {
    font-family: var(--ap-font) !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: var(--ap-text) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.card-body {
    padding: 18px !important;
}

/* Icono de sección dentro del card-header — estilo tech */
.ap-sec-icon {
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; flex-shrink: 0;
    position: relative;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Default: azul-cyan matching login */
.ap-sec-icon:not([class*=" "]):not(.green):not(.red):not(.blue):not(.amber):not(.orange):not(.teal):not(.gray):not(.purple) {
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0369a1;
    box-shadow: 0 1px 4px rgba(3,105,161,0.12);
}
.ap-sec-icon.green  { background: linear-gradient(135deg, #d1fae5, #a7f3d0);  color: var(--ap-green); box-shadow: 0 1px 4px rgba(29,107,56,0.12); }
.ap-sec-icon.red    { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #dc2626; box-shadow: 0 1px 4px rgba(220,38,38,0.12); }
.ap-sec-icon.blue   { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #2563eb; box-shadow: 0 1px 4px rgba(37,99,235,0.12); }
.ap-sec-icon.amber  { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #d97706; box-shadow: 0 1px 4px rgba(217,119,6,0.12); }
.ap-sec-icon.orange { background: linear-gradient(135deg, #ffedd5, #fed7aa); color: #ea580c; box-shadow: 0 1px 4px rgba(234,88,12,0.12); }
.ap-sec-icon.teal   { background: linear-gradient(135deg, #ccfbf1, #99f6e4); color: #0d9488; box-shadow: 0 1px 4px rgba(13,148,136,0.12); }
.ap-sec-icon.gray   { background: linear-gradient(135deg, #f3f4f6, #e5e7eb); color: #6b7280; box-shadow: 0 1px 4px rgba(107,114,128,0.10); }
.ap-sec-icon.purple { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #7c3aed; box-shadow: 0 1px 4px rgba(124,58,237,0.12); }

/* ──────────────────────────────────────────
   BOTONES
────────────────────────────────────────── */
.btn {
    font-family: var(--ap-font) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
    transition: all 0.18s !important;
    letter-spacing: 0.1px !important;
}
.btn-success,
.bg-gradient-success,
.btn-block.bg-gradient-success {
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid)) !important;
    border-color: var(--ap-green) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(29,107,56,0.28) !important;
}
.btn-success:hover,
.bg-gradient-success:hover {
    background: linear-gradient(135deg, #155a2e, var(--ap-green)) !important;
    box-shadow: 0 4px 14px rgba(29,107,56,0.38) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.btn-primary,
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid)) !important;
    border-color: var(--ap-green) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(29,107,56,0.28) !important;
}
.btn-primary:hover,
.bg-gradient-primary:hover {
    background: linear-gradient(135deg, #155a2e, var(--ap-green)) !important;
    box-shadow: 0 4px 14px rgba(29,107,56,0.38) !important;
    transform: translateY(-1px) !important;
    color: #fff !important;
}
.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #eab308) !important;
    border-color: #f59e0b !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(245,158,11,0.25) !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border-color: #d97706 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(245,158,11,0.35) !important;
    transform: translateY(-1px) !important;
}
.btn-danger {
    background: linear-gradient(135deg, #ef4444, #f87171) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(239,68,68,0.25) !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(239,68,68,0.35) !important;
    transform: translateY(-1px) !important;
}
.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #9ca3af) !important;
    border-color: #6b7280 !important;
    color: #fff !important;
    box-shadow: 0 1px 4px rgba(107,114,128,0.20) !important;
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #6b7280) !important;
    border-color: #4b5563 !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(107,114,128,0.30) !important;
    transform: translateY(-1px) !important;
}

/* Botón de acción redondo (editar/eliminar) — estilo tech */
.btn.rounded-circle {
    width: 32px !important; height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn.rounded-circle:hover {
    transform: translateY(-2px) scale(1.08) !important;
}

/* ──────────────────────────────────────────
   FORMULARIOS
────────────────────────────────────────── */
.form-group label {
    font-family: var(--ap-font) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 5px !important;
    display: block !important;
}
.form-control,
.form-control-border {
    font-family: var(--ap-font) !important;
    font-size: 0.84rem !important;
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    color: var(--ap-text) !important;
    height: auto !important;
    padding: 7px 12px !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
}
.form-control:focus,
.form-control-border:focus {
    border-color: var(--ap-green-mid) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.14) !important;
    outline: none !important;
}
.form-control::placeholder { color: #adb5c0 !important; }
.custom-select {
    font-family: var(--ap-font) !important;
    font-size: 0.84rem !important;
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 8px !important;
    background-color: #f9fafb !important;
}
.custom-select:focus {
    border-color: var(--ap-green-mid) !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.14) !important;
}
/* ── Checkboxes modernos con animación ── */
/* Forzar flexbox en .form-check para alinear checkbox + label en línea */
.form-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-left: 0 !important;
    min-height: auto !important;
    margin-bottom: 6px !important;
}
.form-check-input {
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: 2px solid #d1d5db !important;
    border-radius: 5px !important;
    background: #f9fafb !important;
    position: relative !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    vertical-align: middle !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    /* Reset Bootstrap absolute positioning */
    position: static !important;
}
.form-check-input:hover {
    border-color: var(--ap-green-mid) !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.08) !important;
}
.form-check-input:checked {
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid)) !important;
    border-color: var(--ap-green) !important;
    box-shadow: 0 2px 6px rgba(29,107,56,0.25) !important;
    animation: apCheckBounce 0.3s cubic-bezier(0.34,1.4,0.64,1) !important;
}
@keyframes apCheckBounce {
    0%   { transform: scale(0.85); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.form-check-input:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    animation: apCheckmark 0.2s ease-out 0.1s both !important;
}
@keyframes apCheckmark {
    from { opacity: 0; transform: rotate(45deg) scale(0); }
    to   { opacity: 1; transform: rotate(45deg) scale(1); }
}
.form-check-input:focus {
    border-color: var(--ap-green-mid) !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.14) !important;
    outline: none !important;
}
/* Radio buttons modernos */
.form-check-input[type="radio"] {
    border-radius: 50% !important;
}
.form-check-input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 3px !important;
    top: 3px !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: none !important;
    transform: none !important;
    animation: apCheckmark 0.2s ease-out 0.1s both !important;
}
.form-check-label {
    font-family: var(--ap-font) !important;
    font-size: 0.82rem !important;
    color: var(--ap-text) !important;
    cursor: pointer !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
    user-select: none !important;
    transition: color 0.15s !important;
    line-height: 1.3 !important;
}
.form-check:hover .form-check-label { color: var(--ap-green) !important; }
.form-check:hover .form-check-input:not(:checked) {
    border-color: var(--ap-green-mid) !important;
    background: #f0fdf4 !important;
}

/* Custom switch moderno (Bootstrap toggle) */
.custom-control.custom-switch {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    gap: 0 !important;
}
.custom-switch .custom-control-input ~ .custom-control-label {
    padding-left: 48px !important;
    position: relative !important;
}
.custom-switch .custom-control-input ~ .custom-control-label::before {
    border-radius: 12px !important;
    height: 22px !important;
    width: 40px !important;
    border: 2px solid #d1d5db !important;
    background: #e5e7eb !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.custom-switch .custom-control-input ~ .custom-control-label::after {
    border-radius: 50% !important;
    height: 16px !important;
    width: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    left: 3px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid)) !important;
    border-color: var(--ap-green) !important;
    box-shadow: 0 2px 8px rgba(29,107,56,0.25) !important;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateY(-50%) translateX(18px) !important;
    box-shadow: 0 2px 4px rgba(29,107,56,0.2) !important;
}
.invalid-feedback {
    font-family: var(--ap-font) !important;
    font-size: 0.74rem !important;
}

/* Select2 overrides */
.select2-container .select2-selection--single {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 8px !important;
    height: 37px !important;
    background: #f9fafb !important;
    font-family: var(--ap-font) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
    font-family: var(--ap-font) !important;
    font-size: 0.84rem !important;
    color: var(--ap-text) !important;
    padding-left: 12px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
    height: 35px !important;
}
.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single {
    border-color: var(--ap-green-mid) !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.14) !important;
}
.select2-dropdown {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 10px !important;
    font-family: var(--ap-font) !important;
    font-size: 0.84rem !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
    margin-top: 4px !important;
    overflow: hidden !important;
}
.select2-results__option {
    padding: 8px 14px !important;
    transition: all 0.15s !important;
}
.select2-results__option--highlighted {
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid)) !important;
    color: #fff !important;
}

/* ── Select2 Multiple — estilo success fluorescente ── */
.select2-container .select2-selection--multiple {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 8px !important;
    background: #f9fafb !important;
    font-family: var(--ap-font) !important;
    min-height: 37px !important;
    padding: 3px 6px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: text !important;
}
.select2-container--focus .select2-selection--multiple,
.select2-container--open .select2-selection--multiple {
    border-color: var(--ap-green-mid) !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.14) !important;
    background: #fff !important;
}
/* Tags fluorescentes verdes */
.select2-container .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(5,150,105,0.08) 100%) !important;
    border: 1px solid rgba(16,185,129,0.3) !important;
    border-radius: 6px !important;
    color: #047857 !important;
    font-family: var(--ap-font) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    margin: 3px 4px 3px 0 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: apTagIn 0.25s cubic-bezier(0.34,1.4,0.64,1) !important;
}
@keyframes apTagIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
.select2-container .select2-selection--multiple .select2-selection__choice:hover {
    background: linear-gradient(135deg, rgba(16,185,129,0.22) 0%, rgba(5,150,105,0.16) 100%) !important;
    border-color: rgba(16,185,129,0.5) !important;
    box-shadow: 0 2px 6px rgba(16,185,129,0.15) !important;
    transform: translateY(-1px) !important;
}
/* Botón de eliminar tag */
.select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: #059669 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
    border: none !important;
    background: none !important;
    padding: 0 2px !important;
    transition: color 0.15s !important;
    cursor: pointer !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #dc2626 !important;
}
/* Input de búsqueda dentro del multiple */
.select2-container .select2-selection--multiple .select2-search__field {
    font-family: var(--ap-font) !important;
    font-size: 0.82rem !important;
    color: var(--ap-text) !important;
    margin-top: 3px !important;
}
.select2-container .select2-selection--multiple .select2-search__field::placeholder {
    color: #adb5c0 !important;
}

/* ──────────────────────────────────────────
   TABLAS / DATATABLES — estilo moderno Vue
────────────────────────────────────────── */
.table {
    font-family: var(--ap-font) !important;
    font-size: 0.83rem !important;
    border-collapse: separate !important;
    border-spacing: 0 4px !important;
    border: none !important;
    margin-top: -4px !important;
}
.table thead th {
    background: transparent !important;
    color: var(--ap-text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.70rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    border-bottom: none !important;
    border-top: none !important;
    white-space: nowrap !important;
    padding: 10px 16px 8px !important;
    position: relative !important;
}
/* Línea decorativa bajo thead */
.table thead tr {
    border-bottom: 2px solid var(--ap-border) !important;
}
.table thead tr::after {
    content: '' !important;
    display: block !important;
    height: 0 !important;
}
.table tbody tr {
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: var(--ap-white) !important;
    border-radius: 8px !important;
}
.table tbody td {
    border-top: none !important;
    border-bottom: none !important;
    padding: 4px 16px !important;
    vertical-align: middle !important;
    color: var(--ap-text) !important;
    font-weight: 400 !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent !important;
}
/* Redondear primera y última celda de cada fila */
.table tbody td:first-child { border-radius: 8px 0 0 8px !important; }
.table tbody td:last-child  { border-radius: 0 8px 8px 0 !important; }

/* Filas alternas con fondo sutil */
.table tbody tr:nth-child(even) {
    background: #f9fafb !important;
}

/* Hover moderno — fila elevada con gradiente azul-cyan */
.table-hover tbody tr:hover,
.table tbody tr:hover {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe, #f8fafc) !important;
    box-shadow: 0 2px 12px rgba(3,105,161,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    transform: translateY(-1px) !important;
}
.table-hover tbody tr:hover td,
.table tbody tr:hover td {
    color: var(--ap-text) !important;
}

/* Bordes tipo borderless moderno */
.table-bordered { border: none !important; }
.table-bordered td,
.table-bordered th { border: none !important; }

/* Primera columna con peso visual */
.table tbody td:first-child {
    font-weight: 500 !important;
    color: #1f2937 !important;
}

/* Fila activa/seleccionada */
.table tbody tr.selected,
.table tbody tr.active {
    background: var(--ap-green-bg) !important;
    box-shadow: inset 3px 0 0 var(--ap-green) !important;
}

/* Botones de acción en tabla — centrar */
.table tbody td:last-child .d-flex {
    justify-content: center !important;
    gap: 4px !important;
}

/* Empty state */
.table tbody .dataTables_empty,
.dataTables_wrapper .dataTables_empty {
    text-align: center !important;
    color: var(--ap-text-muted) !important;
    padding: 40px 16px !important;
    font-style: italic !important;
    font-size: 0.85rem !important;
}

/* DataTables wrapper */
.dataTables_wrapper {
    font-family: var(--ap-font) !important;
}
/* Toolbar superior */
.dataTables_wrapper .row:first-child {
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: none !important;
    align-items: center !important;
}
/* Toolbar inferior */
.dataTables_wrapper .row:last-child {
    margin-top: 8px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f3f4f6 !important;
    align-items: center !important;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-family: var(--ap-font) !important;
    font-size: 0.78rem !important;
    color: var(--ap-text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    font-family: var(--ap-font) !important;
    font-size: 0.78rem !important;
    color: var(--ap-text-muted) !important;
}
/* Search input estilo moderno */
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 10px !important;
    padding: 7px 14px !important;
    font-family: var(--ap-font) !important;
    font-size: 0.82rem !important;
    background: #f9fafb !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 220px !important;
}
.dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 8px !important;
    padding: 5px 28px 5px 10px !important;
    font-family: var(--ap-font) !important;
    font-size: 0.82rem !important;
    background: #f9fafb !important;
    outline: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--ap-green-mid) !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,0.12) !important;
    background: #fff !important;
}
/* Paginación moderna — estilo pill */
.dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: var(--ap-font) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 6px 12px !important;
    margin: 0 1px !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    color: var(--ap-text-muted) !important;
    min-width: 32px !important;
    text-align: center !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(29,107,56,0.28) !important;
    transform: scale(1.05) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover {
    background: var(--ap-green-bg) !important;
    color: var(--ap-green) !important;
    border: none !important;
    transform: translateY(-1px) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: #d1d5db !important;
    opacity: 0.4 !important;
    pointer-events: none !important;
}
.sorting, .sorting_asc, .sorting_desc {
    cursor: pointer !important;
}
/* Indicador de ordenamiento verde */
.sorting_asc::after,
.sorting_desc::after {
    color: var(--ap-green) !important;
    opacity: 1 !important;
}
/* Info count */
.dataTables_wrapper .dataTables_info {
    font-size: 0.76rem !important;
    color: var(--ap-text-muted) !important;
    padding-top: 0 !important;
}

/* ──────────────────────────────────────────
   MODALES
────────────────────────────────────────── */
.modal-content {
    border-radius: var(--ap-radius) !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
    font-family: var(--ap-font) !important;
}
.modal-header {
    border-bottom: 1px solid var(--ap-border) !important;
    padding: 14px 20px !important;
    border-radius: var(--ap-radius) var(--ap-radius) 0 0 !important;
}
.modal-title {
    font-family: var(--ap-font) !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    color: var(--ap-text) !important;
}
.modal-body {
    font-family: var(--ap-font) !important;
    font-size: 0.85rem !important;
    color: var(--ap-text-muted) !important;
    padding: 16px 20px !important;
}
.modal-footer {
    border-top: 1px solid var(--ap-border) !important;
    padding: 12px 20px !important;
    border-radius: 0 0 var(--ap-radius) var(--ap-radius) !important;
}
.close {
    font-family: var(--ap-font) !important;
}

/* Modal de carga */
#loading .modal-content { background: #fff !important; }
#loading h3 {
    font-family: var(--ap-font) !important;
    font-size: 0.95rem !important;
    color: var(--ap-text-muted) !important;
}

/* ──────────────────────────────────────────
   FOOTER
────────────────────────────────────────── */
.main-footer {
    background: var(--ap-white) !important;
    border-top: 1px solid var(--ap-border) !important;
    padding: 10px 20px !important;
    font-family: var(--ap-font) !important;
    font-size: 0.78rem !important;
    color: var(--ap-text-muted) !important;
}
.main-footer a { color: var(--ap-green) !important; font-weight: 600 !important; }
.main-footer .terminos-condiciones { color: #3b82f6 !important; }
.main-footer .float-right { font-family: var(--ap-font) !important; font-size: 0.77rem !important; }

/* ──────────────────────────────────────────
   UTILIDADES
────────────────────────────────────────── */
.ap-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 20px;
    font-size: 0.72rem; font-weight: 600;
    font-family: var(--ap-font);
}
.ap-badge.green  { background: var(--ap-green-bg);  color: var(--ap-green); }
.ap-badge.red    { background: #fee2e2; color: #dc2626; }
.ap-badge.gray   { background: #f3f4f6; color: #6b7280; }
.ap-badge.blue   { background: #dbeafe; color: #2563eb; }
.ap-badge.amber  { background: #fef3c7; color: #d97706; }

/* ──────────────────────────────────────────
   MODAL CONFIRMACIÓN ELIMINAR
────────────────────────────────────────── */
.ap-confirm-modal .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
    overflow: hidden !important;
}
.ap-confirm-modal .modal-header {
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.ap-confirm-badge {
    width: 42px; height: 42px; border-radius: 11px;
    background: #fef2f2; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; flex-shrink: 0;
}
.ap-confirm-modal .modal-title {
    font-family: var(--ap-font) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1a202c !important;
    margin: 0 !important;
    flex: 1 !important;
}
.ap-confirm-modal .close {
    margin: 0 !important;
    padding: 4px 6px !important;
    font-size: 1.1rem !important;
    color: #9ca3af !important;
    opacity: 1 !important;
    line-height: 1 !important;
}
.ap-confirm-modal .close:hover { color: #4b5563 !important; }
.ap-confirm-modal .modal-body {
    padding: 28px 28px 20px !important;
    text-align: center !important;
    font-family: var(--ap-font) !important;
}
.ap-confirm-body-icon {
    width: 72px; height: 72px; border-radius: 50%;
    background: #fef2f2; color: #ef4444;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; margin: 0 auto 18px;
}
.ap-confirm-question {
    font-size: 0.92rem; font-weight: 500; color: #2d3748;
    font-family: var(--ap-font); margin-bottom: 6px; line-height: 1.5;
}
.ap-confirm-question strong { font-weight: 700; }
.ap-confirm-sub {
    font-size: 0.80rem; color: #718096;
    font-family: var(--ap-font); margin: 0;
}
.ap-confirm-modal .modal-footer {
    border-top: 1px solid #f3f4f6 !important;
    padding: 14px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

/* ──────────────────────────────────────────
   TOAST NOTIFICATIONS
────────────────────────────────────────── */
#ap-toast-container {
    position: fixed; top: 20px; right: 20px;
    z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.ap-toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border-radius: 13px; border-left: 4px solid var(--ap-green);
    box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 6px rgba(0,0,0,0.06);
    padding: 14px 16px; min-width: 300px; max-width: 380px;
    pointer-events: all; position: relative; overflow: hidden;
    animation: apToastIn 0.38s cubic-bezier(0.34,1.4,0.64,1) forwards;
    font-family: var(--ap-font);
}
.ap-toast.hiding { animation: apToastOut 0.28s ease-in forwards; }
@keyframes apToastIn  { from { opacity:0; transform:translateX(60px) scale(0.93); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes apToastOut { from { opacity:1; transform:translateX(0) scale(1); } to { opacity:0; transform:translateX(60px) scale(0.93); } }

/* Variantes */
.ap-toast.success { border-left-color: var(--ap-green); }
.ap-toast.error   { border-left-color: #ef4444; }
.ap-toast.warning { border-left-color: #f59e0b; }
.ap-toast.info    { border-left-color: #3b82f6; }

.ap-toast-icon {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.88rem; margin-top: 1px;
}
.ap-toast.success .ap-toast-icon { background: var(--ap-green-bg); color: var(--ap-green); }
.ap-toast.error   .ap-toast-icon { background: #fef2f2; color: #ef4444; }
.ap-toast.warning .ap-toast-icon { background: #fef3c7; color: #f59e0b; }
.ap-toast.info    .ap-toast-icon { background: #dbeafe; color: #3b82f6; }

.ap-toast-body { flex: 1; min-width: 0; }
.ap-toast-title { font-size: 0.83rem; font-weight: 700; color: #1a202c; margin-bottom: 2px; }
.ap-toast-msg   { font-size: 0.77rem; color: #718096; line-height: 1.45; }

.ap-toast-close {
    background: none; border: none; cursor: pointer; color: #a0aec0;
    font-size: 0.75rem; padding: 2px 4px; flex-shrink: 0; margin-top: 1px;
    transition: color 0.18s; line-height: 1;
}
.ap-toast-close:hover { color: #4b5563; }

.ap-toast-bar {
    position: absolute; bottom: 0; left: 0; height: 3px; width: 100%;
    opacity: 0.35; border-radius: 0 0 0 13px;
}
.ap-toast.success .ap-toast-bar { background: var(--ap-green); animation: apBarShrink 3.5s linear forwards; }
.ap-toast.error   .ap-toast-bar { background: #ef4444;          animation: apBarShrink 6s   linear forwards; }
.ap-toast.warning .ap-toast-bar { background: #f59e0b;          animation: apBarShrink 5s   linear forwards; }
.ap-toast.info    .ap-toast-bar { background: #3b82f6;          animation: apBarShrink 4s   linear forwards; }
@keyframes apBarShrink { from { width: 100%; } to { width: 0%; } }

/* ──────────────────────────────────────────
   TABS (zonas-promotores, etc.)
────────────────────────────────────────── */
.ap-tabs {
    display: flex; gap: 4px;
    padding: 14px 20px 0;
    border-bottom: 2px solid var(--ap-border);
    margin: 0;
}
.ap-tab {
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    color: var(--ap-text-muted); text-decoration: none !important;
    border-radius: 8px 8px 0 0; transition: all 0.15s;
    border: 1px solid transparent; border-bottom: none;
    margin-bottom: -2px; display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ap-font);
}
.ap-tab:hover { color: var(--ap-green); background: var(--ap-green-soft); }
.ap-tab.active {
    color: var(--ap-green); background: var(--ap-white);
    border-color: var(--ap-border); border-bottom-color: var(--ap-white);
}

/* ── Switch card (intercambio promotores) ── */
.ap-switch-card {
    background: #f8faff; border: 1.5px solid #dbeafe;
    border-radius: 10px; padding: 16px; margin-top: 16px;
}
.ap-switch-title {
    font-size: 12.5px; font-weight: 700; color: #1d4ed8;
    display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
    font-family: var(--ap-font);
}

/* ──────────────────────────────────────────
   TAB CONTENT — cards debajo de ap-tabs
   Patron: <div class="ap-tabs"> + <section class="content ap-tab-content">
────────────────────────────────────────── */
/* ─── Internal pills styled as ap-tabs ─── */
.ap-tabs-inner {
    display: flex; gap: 4px; padding: 14px 20px 0; margin: 0;
    border-bottom: 2px solid var(--ap-border) !important;
    background: transparent !important;
}
.ap-tabs-inner .nav-item { margin-bottom: -2px; }
.ap-tabs-inner .nav-link {
    padding: 9px 18px; font-size: 13px; font-weight: 600;
    color: var(--ap-text-muted) !important; text-decoration: none !important;
    border-radius: 8px 8px 0 0 !important; border: 1px solid transparent !important;
    border-bottom: none !important; font-family: var(--ap-font);
    transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px;
    background: transparent !important;
}
.ap-tabs-inner .nav-link:hover {
    color: var(--ap-green) !important; background: var(--ap-green-soft) !important;
}
.ap-tabs-inner .nav-link.active {
    color: var(--ap-green) !important; background: var(--ap-white) !important;
    border-color: var(--ap-border) !important; border-bottom-color: var(--ap-white) !important;
}
.ap-tabs-inner .nav-link i { font-size: 12px; opacity: 0.7; }

.ap-tab-content    { padding-top: 0 !important; }
.ap-card-left      { border-radius: 0 0 0 12px !important; }
.ap-card-right     { border-radius: 0 0 12px 0 !important; }
.ap-card-full      { border-radius: 0 0 12px 12px !important; }
.ap-col-actions    { width: 80px; }

/* ──────────────────────────────────────────
   CONFIRM MODAL — ancho y form footer
────────────────────────────────────────── */
.ap-confirm-modal .modal-dialog { max-width: 440px; }
.ap-confirm-modal .modal-footer form { margin: 0; }

/* ──────────────────────────────────────────
   FORMS — feedback, acciones, utilidades
────────────────────────────────────────── */
.invalid-feedback { font-size: 11.5px; }
.ap-form-actions  { padding: 0 4px; }
.ap-contact-icon  { font-size: 10px; color: #94a3b8; }
.ap-vsep           { width: 1px; background: var(--ap-border); align-self: stretch; }

/* ──────────────────────────────────────────
   FICHAS — agrupación de campos en formularios
────────────────────────────────────────── */
.ap-form-ficha {
    border: 1px solid var(--ap-border);
    border-radius: 8px;
    margin-bottom: 1rem;
    background: #fff;
}
.ap-ficha-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--ap-border);
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: #334155;
}
.ap-ficha-header i {
    color: var(--ap-green-mid);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
}
.ap-ficha-body {
    padding: 16px;
}
.ap-ficha-body .form-group { margin-bottom: 0.75rem; }
@media (max-width: 767.98px) {
    .ap-ficha-header { font-size: 0.8rem; padding: 8px 12px; }
    .ap-ficha-body   { padding: 12px; }
}

/* ──────────────────────────────────────────
   DOCTORES — modal buscar doctor
────────────────────────────────────────── */
.ap-search-badge      { background: #d1fae5; color: #1d6b38; }
.ap-search-subtitle   { color: #64748b; }
.ap-search-label      { font-size: 12px; font-weight: 600; }
.ap-search-table      { font-size: 13px; }

/* ──────────────────────────────────────────
   ESTUDIO — page-specific
────────────────────────────────────────── */
.page-estudio .table td,
.page-estudio .table th        { padding: 5px; }
.page-estudio .table-responsive { height: 400px; }
.content-componente            { height: 75vh; }
.content-component-numerica    { height: 77vh; }
.modal-xxl                     { max-width: 95%; }
.content-referencia            { height: 65vh; }
.elemento-formula              { cursor: pointer; }

/* ── Modal Componentes (#modal-estudio) — usa clases rp-* compartidas ── */
.rp-comp-actions                        { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-btn-ordenar                         { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; padding: 8px 22px; height: 36px; white-space: nowrap; transition: box-shadow .2s, transform .15s; }
.rp-btn-ordenar:hover                   { color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.35); transform: translateY(-1px); }
#modal-estudio .rp-patient-table tbody tr { transition: background 0.15s; }
#modal-estudio .rp-patient-table tbody tr.isDragging { background: #dbeafe !important; opacity: 0.85; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
#modal-estudio .drag-handle { cursor: grab; color: #9ca3af; width: 36px; padding: 5px 4px !important; }
#modal-estudio .drag-handle:active { cursor: grabbing; }
#modal-estudio .drag-handle i { font-size: 14px; }
/* Flechas ↑↓ ocultas en desktop, visibles solo en mobile */
#modal-estudio .btn-move-up,
#modal-estudio .btn-move-down { display: none !important; }
#modal-estudio .rp-table-wrap           { max-height: 60vh; }

/* ── Modal Componente individual (#modal-component) ── */
#modal-component .content-componente    { height: auto; max-height: 72vh; overflow-y: auto; }
#modal-component .ap-form-ficha         { margin-bottom: 12px; }
#modal-component .ap-ficha-body .form-group { margin-bottom: 10px; }
#modal-component .ap-form-actions       { padding: 12px 0 4px; }
/* Summernote dentro del modal — responsivo */
#modal-component .note-editor           { border: 1px solid var(--ap-border, #dee2e6); border-radius: 0 0 6px 6px; }
#modal-component .note-editor,
#modal-component .note-editor .note-editing-area { max-width: 100%; overflow-x: hidden; }
#modal-component .note-toolbar          { flex-wrap: wrap; padding: 4px; }
#modal-component .note-toolbar .note-btn { padding: 4px 7px; font-size: 12px; }

/* ── Modal Valores de Referencia Numérica (#modal-component-numerica) ── */
.rp-modal-ref-num .content-component-numerica { height: auto; overflow-y: visible; }
.rp-modal-ref-num .ap-form-ficha        { margin-bottom: 10px; }
.rp-modal-ref-num .ap-ficha-body .form-group { margin-bottom: 8px; }
.rp-modal-ref-num .rp-patient-table     { min-width: 550px; }
@media (max-width: 767.98px) {
    .rp-modal-ref-num .modal-dialog     { margin: 0.5rem; max-width: calc(100% - 1rem); }
    /* En mobile: tabla primero, form después */
    .rp-modal-ref-num .row > .rp-ref-tabla-col { order: 1; }
    .rp-modal-ref-num .row > .rp-ref-form-col  { order: 2; }
    .rp-modal-ref-num .rp-patient-table { min-width: 0; }
    .rp-modal-ref-num .rp-patient-table thead { display: none; }
    .rp-modal-ref-num .rp-patient-table tbody tr {
        display: block; background: #fff; border: 1px solid var(--ap-border);
        border-left: 3px solid #3b82f6; border-radius: 8px;
        margin-bottom: 8px; padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .rp-modal-ref-num .rp-patient-table tbody td {
        display: flex; align-items: center; justify-content: space-between;
        padding: 3px 0; border: none !important; font-size: 12px; text-align: right;
    }
    .rp-modal-ref-num .rp-patient-table tbody td::before {
        font-weight: 700; font-size: 10px; color: #6b7280;
        text-transform: uppercase; letter-spacing: .3px;
        flex-shrink: 0; margin-right: 12px; text-align: left;
    }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(1)::before { content: 'Sexo'; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(2)::before { content: 'Rango'; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(3)::before { content: 'Alto Acep.'; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(4)::before { content: 'Alto'; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(5)::before { content: 'Bajo'; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(6)::before { content: 'Bajo Acep.'; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(7)::before { content: ''; }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(1) {
        font-weight: 700; font-size: 13px; color: #2563eb; padding-bottom: 4px;
    }
    .rp-modal-ref-num .rp-patient-table tbody td:nth-child(7) {
        justify-content: center; padding-top: 8px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .rp-modal-ref-num .rp-patient-table .btn-sm.rounded-circle {
        width: 32px; height: 32px; font-size: 12px; margin: 2px !important;
    }
    .rp-modal-ref-num .rp-table-wrap    { max-height: 45vh !important; border: none; overflow-x: hidden; }
}

/* ── Modal Valores de Referencia Lista (#modal-component-lista) ── */
@media (max-width: 767.98px) {
    .rp-modal-ref-lista .modal-dialog   { margin: 0.5rem; max-width: calc(100% - 1rem); }
    .rp-modal-ref-lista .row > .rp-ref-tabla-col { order: 1; }
    .rp-modal-ref-lista .row > .rp-ref-form-col  { order: 2; }
    .rp-modal-ref-lista .rp-patient-table { min-width: 0; }
    .rp-modal-ref-lista .rp-patient-table thead { display: none; }
    .rp-modal-ref-lista .rp-patient-table tbody tr {
        display: block; background: #fff; border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid); border-radius: 8px;
        margin-bottom: 8px; padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .rp-modal-ref-lista .rp-patient-table tbody td {
        display: flex; align-items: center; justify-content: space-between;
        padding: 3px 0; border: none !important; font-size: 12px; text-align: right;
    }
    .rp-modal-ref-lista .rp-patient-table tbody td::before {
        font-weight: 700; font-size: 10px; color: #6b7280;
        text-transform: uppercase; letter-spacing: .3px;
        flex-shrink: 0; margin-right: 12px; text-align: left;
    }
    .rp-modal-ref-lista .rp-patient-table tbody td:nth-child(1)::before { content: 'Predet.'; }
    .rp-modal-ref-lista .rp-patient-table tbody td:nth-child(2)::before { content: 'Valor'; }
    .rp-modal-ref-lista .rp-patient-table tbody td:nth-child(3)::before { content: ''; }
    .rp-modal-ref-lista .rp-patient-table tbody td:nth-child(2) {
        font-weight: 700; font-size: 13px; color: var(--ap-green);
    }
    .rp-modal-ref-lista .rp-patient-table tbody td:nth-child(3) {
        justify-content: center; padding-top: 6px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .rp-modal-ref-lista .rp-patient-table .btn-sm.rounded-circle {
        width: 32px; height: 32px; font-size: 12px; margin: 2px !important;
    }
    .rp-modal-ref-lista .rp-table-wrap  { max-height: 45vh; border: none; overflow-x: hidden; }
}

/* ── Modal Fórmula (#modal-component-formula) ── */
.rp-modal-ref-formula .elemento-formula { cursor: pointer; }
@media (max-width: 767.98px) {
    .rp-modal-ref-formula .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
}

/* ── Modal Tabla por Sexo (#modal-tabla) ── */
/* Summernote dentro del modal-tabla — responsivo */
#modal-tabla .note-editor                          { border: 1px solid var(--ap-border, #dee2e6); border-radius: 0 0 6px 6px; max-width: 100%; overflow-x: hidden; }
#modal-tabla .note-editor .note-editing-area       { max-width: 100%; overflow-x: hidden; }
#modal-tabla .note-toolbar                         { flex-wrap: wrap; padding: 4px; }
#modal-tabla .note-toolbar .note-btn               { padding: 4px 7px; font-size: 12px; }
#modal-tabla .ap-ficha-body.p-0 .note-editor       { border-top: none; border-radius: 0 0 6px 6px; }
@media (max-width: 767.98px) {
    .rp-modal-ref-tabla .modal-dialog   { margin: 0.5rem; max-width: calc(100% - 1rem); }
    .rp-modal-ref-tabla .row > .rp-ref-tabla-col { order: 1; }
    .rp-modal-ref-tabla .row > .rp-ref-form-col  { order: 2; }
    .rp-modal-ref-tabla .rp-patient-table { min-width: 0; }
    .rp-modal-ref-tabla .rp-patient-table thead { display: none; }
    .rp-modal-ref-tabla .rp-patient-table tbody tr {
        display: block; background: #fff; border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid); border-radius: 8px;
        margin-bottom: 8px; padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .rp-modal-ref-tabla .rp-patient-table tbody td {
        display: flex; align-items: center; justify-content: space-between;
        padding: 3px 0; border: none !important; font-size: 12px; text-align: right;
    }
    .rp-modal-ref-tabla .rp-patient-table tbody td::before {
        font-weight: 700; font-size: 10px; color: #6b7280;
        text-transform: uppercase; letter-spacing: .3px;
        flex-shrink: 0; margin-right: 12px; text-align: left;
    }
    .rp-modal-ref-tabla .rp-patient-table tbody td:nth-child(1)::before { content: 'Sexo'; }
    .rp-modal-ref-tabla .rp-patient-table tbody td:nth-child(2)::before { content: ''; }
    .rp-modal-ref-tabla .rp-patient-table tbody td:nth-child(1) {
        font-weight: 700; font-size: 13px; color: var(--ap-green);
    }
    .rp-modal-ref-tabla .rp-patient-table tbody td:nth-child(2) {
        justify-content: center; padding-top: 6px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .rp-modal-ref-tabla .rp-patient-table .btn-sm.rounded-circle {
        width: 32px; height: 32px; font-size: 12px; margin: 2px !important;
    }
    .rp-modal-ref-tabla .rp-table-wrap  { max-height: 35vh; border: none; overflow-x: hidden; }
    /* Summernote responsivo en mobile */
    .rp-modal-ref-tabla .rp-ref-form-col .ap-form-ficha { overflow: hidden; }
    #modal-tabla .note-editor              { width: 100% !important; min-width: 0 !important; }
    #modal-tabla .note-editing-area        { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 150px; }
    #modal-tabla .note-editable            { min-width: 0 !important; min-height: 120px !important; word-wrap: break-word; overflow-wrap: break-word; }
    #modal-tabla .note-toolbar .note-btn-group { margin: 1px; }
}

/* ──────────────────────────────────────────
   PAQUETE / LISTA — tabla compacta
────────────────────────────────────────── */
#table_paquete td, #table_paquete th { padding: 0; }
#table_lista td, #table_lista th    { padding: 0; }
.ui-menu { overflow: auto; max-height: 200px; }

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Cabecera de página: apilada en móvil */
    .ap-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
    }
    .ap-page-header .btn,
    .ap-page-header a.btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .ap-page-header-left { gap: 10px; }
    .ap-page-title  { font-size: 1rem; }

    /* Cards: menos padding en móvil */
    .card-body { padding: 12px !important; }
    .card-header { padding: 9px 12px !important; }

    /* Tabla: scroll horizontal */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* DataTables: alinear controles */
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length {
        text-align: left !important;
        float: none !important;
    }
    .dataTables_wrapper .dataTables_filter input {
        width: 100% !important;
        margin-top: 4px !important;
    }

    /* Navbar: ocultar separador y tenant en muy pequeño */
    .ap-nav-sep { display: none !important; }

    /* Content: reducir padding */
    .content { padding: 10px !important; }
    .content-header { padding: 12px 12px 0 !important; }

    /* Formularios: inputs más cómodos al tacto */
    .form-control,
    .form-control-border {
        font-size: 0.9rem !important;
        padding: 9px 12px !important;
    }

    /* Botón guardar: ancho completo en móvil */
    .d-flex.justify-content-end { justify-content: stretch !important; }
    .d-flex.justify-content-end .btn { width: 100% !important; }

    /* Select2: ancho completo */
    .select2-container { width: 100% !important; }

    /* Espaciado entre tarjetas de sección */
    .card { margin-bottom: 12px !important; }
}

@media (max-width: 575px) {
    /* Botones redondos: ligeramente más grandes para touch */
    .btn.rounded-circle { width: 36px !important; height: 36px !important; }
    /* Navbar compacta */
    .main-header.navbar { height: 48px !important; min-height: 48px !important; }
    /* Brand: logo más compacto en móvil */
    .brand-link { min-height: 80px !important; padding: 12px 10px !important; }
    .ap-brand-logo { width: 52px !important; height: 52px !important; padding: 6px !important; }
    .brand-text { font-size: 0.9rem !important; }
    .ap-brand-sub { display: none !important; }
    /* Toast: ancho completo en móvil */
    #ap-toast-container { right: 10px; left: 10px; }
    .ap-toast { min-width: 0; max-width: 100%; }
    /* Modal confirmación: margen */
    .ap-confirm-modal .modal-dialog { margin: 12px !important; max-width: calc(100% - 24px) !important; }
}

/* ══════════════════════════════════════════
   LOGIN PAGE — www/index.php
   Pantalla de autenticación (no AdminLTE)
══════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes loginSlideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginSlideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginPopIn {
    0%   { opacity: 0; transform: scale(0.6) rotate(-6deg); }
    70%  { transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes loginPulse {
    0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50%      { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
}
@keyframes loginFloatOrb {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.04); }
}
@keyframes loginDrawLine {
    from { width: 0; }
    to   { width: 48px; }
}
@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginToastIn {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(120%); }
}
@keyframes loginProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

/* ── Reset para la página de login (no AdminLTE) ── */
body.login-page {
    font-family: 'Inter', sans-serif;
    height: 100vh;
    display: flex;
    overflow: hidden;
    background: #f1f5f9;
    margin: 0;
    padding: 0;
}
body.login-page * {
    box-sizing: border-box;
}

/* ── Panel izquierdo (branding) ── */
.login-brand {
    width: 42%;
    background: linear-gradient(145deg, #0c4a6e 0%, #0369a1 55%, #0ea5e9 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    position: relative;
    overflow: hidden;
    animation: loginSlideInLeft 0.65s cubic-bezier(.22,.68,0,1.2) both;
}

.login-brand .orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.login-brand .orb-1 {
    width: 420px; height: 420px;
    bottom: -150px; right: -150px;
    animation: loginFloatOrb 7s ease-in-out infinite;
}
.login-brand .orb-2 {
    width: 260px; height: 260px;
    top: -90px; left: -90px;
    animation: loginFloatOrb 9s ease-in-out infinite 1s;
}
.login-brand .orb-3 {
    width: 140px; height: 140px;
    top: 40%; right: 12%;
    animation: loginFloatOrb 6s ease-in-out infinite 2s;
}

.brand-inner { z-index: 1; text-align: center; }

.brand-logo-wrap {
    width: 200px; height: 130px;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    animation: loginPopIn 0.8s cubic-bezier(.22,.68,0,1.3) 0.3s both;
}
.brand-logo-wrap img {
    width: 100%; height: 100%;
    object-fit: contain;
    animation: loginPulse 3.5s ease-in-out 1.2s infinite;
}

.brand-name {
    font-size: 36px; font-weight: 800; color: #fff;
    letter-spacing: -1px; line-height: 1;
    animation: loginFadeUp 0.6s ease 0.7s both;
}
.brand-dot { color: #7dd3fc; }

.brand-sub {
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin-top: 6px;
    animation: loginFadeUp 0.6s ease 0.85s both;
}
.brand-divider {
    height: 3px; background: rgba(255,255,255,0.35);
    border-radius: 2px; margin: 22px auto; width: 0;
    animation: loginDrawLine 0.5s ease 1.1s forwards;
}
.brand-desc {
    font-size: 13.5px; color: rgba(255,255,255,0.5);
    line-height: 1.7; max-width: 270px;
    animation: loginFadeUp 0.6s ease 1s both;
}

/* ── Panel derecho (formulario) ── */
.login-form-wrap {
    flex: 1; display: flex;
    align-items: center; justify-content: center;
    background: #f1f5f9; padding: 40px;
    overflow-y: auto;
    animation: loginSlideInRight 0.65s cubic-bezier(.22,.68,0,1.2) both;
}

.login-card {
    width: 100%; max-width: 400px;
    background: #fff; border-radius: 18px;
    padding: 48px 40px 36px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06),
                0 12px 40px -4px rgba(0,0,0,0.1);
}
.login-card::before {
    content: ''; display: block;
    height: 3px;
    background: linear-gradient(90deg, #0369a1, #0ea5e9);
    border-radius: 3px 3px 0 0;
    margin: -48px -40px 40px;
}

.login-greeting {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #0369a1; margin-bottom: 6px;
    animation: loginFadeUp 0.5s ease 0.25s both;
}
.login-title {
    font-size: 26px; font-weight: 700;
    color: #0f172a; margin-bottom: 4px;
    animation: loginFadeUp 0.5s ease 0.35s both;
}
.login-subtitle {
    font-size: 13.5px; color: #64748b;
    margin-bottom: 32px;
    animation: loginFadeUp 0.5s ease 0.42s both;
}

/* ── Alerta de error ── */
.login-card .alert-error {
    display: flex; align-items: center; gap: 8px;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 8px; padding: 10px 14px;
    font-size: 13px; color: #dc2626; margin-bottom: 20px;
    animation: loginFadeUp 0.4s ease both;
}

/* ── Campos del formulario ── */
.login-card .form-field { margin-bottom: 20px; }
.login-card .form-field:nth-child(1) { animation: loginFadeUp 0.5s ease 0.5s both; }
.login-card .form-field:nth-child(2) { animation: loginFadeUp 0.5s ease 0.6s both; }

.login-card .form-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: #374151; margin-bottom: 7px; letter-spacing: 0.3px;
}

.login-card .input-wrap { position: relative; }
.login-card .input-wrap .icon-left {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: #94a3b8;
    font-size: 14px; pointer-events: none; transition: color 0.2s;
}
.login-card .input-wrap:focus-within .icon-left { color: #0369a1; }

.login-card .input-wrap input {
    width: 100%; padding: 12px 14px 12px 42px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; color: #1e293b; background: #f8fafc;
    outline: none; transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}
.login-card .input-wrap input:focus {
    border-color: #0369a1; background: #fff;
    box-shadow: 0 0 0 3px rgba(3,105,161,0.11);
}
.login-card .input-wrap input::placeholder { color: #c0ccda; }

.login-card .eye-btn {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); background: none;
    border: none; cursor: pointer; color: #94a3b8;
    font-size: 14px; padding: 4px; transition: color 0.15s;
}
.login-card .eye-btn:hover { color: #0369a1; }

/* ── Botón login ── */
.login-card .btn-wrap {
    animation: loginFadeUp 0.5s ease 0.72s both;
}
.btn-login {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    color: #fff; font-size: 15px; font-weight: 600;
    border: none; border-radius: 10px; cursor: pointer;
    transition: all 0.2s; font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px; margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(3,105,161,0.38);
}
.btn-login:active {
    transform: translateY(0); box-shadow: none;
}

/* ── Footer del login ── */
.login-footer {
    text-align: center; margin-top: 28px;
    font-size: 11.5px; color: #94a3b8;
    animation: loginFadeUp 0.5s ease 0.85s both;
}
.login-footer .ver { font-weight: 600; color: #475569; }

/* ── Toast del login ── */
.login-toast-wrap {
    position: fixed; top: 24px; right: 24px; z-index: 9999;
}
.login-toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border-radius: 12px;
    padding: 14px 16px; min-width: 300px; max-width: 360px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid #dc2626;
    animation: loginToastIn 0.4s cubic-bezier(.22,.68,0,1.2) both;
    position: relative; overflow: hidden;
}
.login-toast.hide {
    animation: loginToastOut 0.35s ease forwards;
}
.login-toast .toast-icon {
    width: 36px; height: 36px; background: #fef2f2;
    border-radius: 8px; display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0; color: #dc2626; font-size: 16px;
}
.login-toast .toast-body { flex: 1; }
.login-toast .toast-title {
    font-size: 13px; font-weight: 700;
    color: #0f172a; margin-bottom: 2px;
}
.login-toast .toast-msg {
    font-size: 12.5px; color: #64748b; line-height: 1.4;
}
.login-toast .toast-close {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 14px; padding: 2px;
    flex-shrink: 0; transition: color 0.15s;
}
.login-toast .toast-close:hover { color: #475569; }
.login-toast .toast-progress {
    position: absolute; bottom: 0; left: 0;
    height: 3px; background: #dc2626;
    border-radius: 0 0 0 8px;
    animation: loginProgress 4s linear forwards;
    opacity: 0.5;
}

/* ── Login responsive ── */
@media (max-width: 768px) {
    body.login-page {
        flex-direction: column;
        overflow-y: auto;
        height: 100vh;
    }
    .login-brand {
        width: 100%;
        min-height: auto;
        padding: 32px 24px 24px;
        flex-shrink: 0;
    }
    .login-brand .orb { display: none; }
    .brand-logo-wrap { width: 140px; height: 90px; margin-bottom: 12px; }
    .brand-name { font-size: 26px; margin-bottom: 0; }
    .brand-sub,
    .brand-divider,
    .brand-desc { display: none !important; }
    .login-form-wrap {
        flex: none;
        width: 100%;
        padding: 0 20px 24px;
        margin-top: -20px;
        background: transparent;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .login-card {
        padding: 32px 28px 28px;
        border-radius: 16px;
        max-width: 100%;
    }
    .login-card::before { margin: -32px -28px 24px; }
    .login-greeting { margin-bottom: 2px; }
    .login-title { font-size: 24px; margin-bottom: 4px; }
    .login-subtitle { margin-bottom: 20px; font-size: 13px; }
}

/* ============================================================
   INVENTARIO PAGE
   ============================================================ */
.page-inventario .bg-teal,
.page-inventario .bg-teal > a { color: #000 !important; }

/* ============================================================
   FILTER BAR — barra de filtros reutilizable (fechas, búsqueda)
   ============================================================ */
/* ── Filter bar (barra de fechas + buscar) ── */
/* Usa Bootstrap row/col-auto para layout horizontal confiable */
.ap-filter-bar {
    display: block !important;
    padding: 14px 20px !important;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f5f7 100%) !important;
}

.ap-filter-bar form { margin: 0; }

/* Cada campo: label + input en línea */
.ap-filter-field {
    display: flex !important;
    align-items: center !important;
}

.ap-filter-field label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin: 0 8px 0 0;
    white-space: nowrap;
}

/* Input fecha con borde verde redondeado */
.ap-date {
    width: 170px;
    height: 36px;
    font-size: 13px;
    border: 2px solid #28a745;
    border-radius: 20px;
    padding: 4px 14px;
    color: #495057;
    background-color: #fff;
    transition: border-color .2s, box-shadow .2s;
    -webkit-appearance: none;
    appearance: none;
}

.ap-date:focus {
    border-color: #1e7e34;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .18);
    outline: none;
}

/* Botón buscar redondeado */
.ap-btn-search {
    height: 36px;
    padding: 0 24px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
}

/* ── Filter bar — Responsive GLOBAL ── */
/* Tablet (≤991px) — filter bar flexible */
@media (max-width: 991.98px) {
    .ap-filter-bar .row { gap: 8px; }
    .ap-filter-field { flex: 1 1 auto; min-width: 140px; }
}

/* Mobile (≤767px) — filter bar y campos apilados */
@media (max-width: 767.98px) {
    .ap-filter-bar .row {
        flex-direction: column;
    }
    .ap-filter-field {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .ap-filter-field label {
        margin-bottom: 4px;
    }
    .ap-date {
        width: 100%;
    }
    .ap-filter-field .form-control,
    .ap-filter-field select.form-control {
        width: 100%;
    }
    .ap-btn-search {
        width: 100%;
    }
}

/* Small (≤575px) — compactar más */
@media (max-width: 575.98px) {
    .ap-filter-bar {
        padding: 10px 14px !important;
    }
    .ap-date {
        height: 40px;
        font-size: 14px;
    }
    .ap-btn-search {
        height: 40px;
        font-size: 14px;
    }
}

/* ── Formatos sidebar (editor de formatos de imagenología) ── */
.ap-formatos-sidebar {
    border: 1px solid var(--ap-border);
}

.ap-formatos-sidebar > .card-body {
    padding: 14px 16px !important;
}

.ap-formatos-sidebar .form-group {
    margin-bottom: 12px;
}

.ap-formatos-sidebar .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
}

.ap-formatos-list-header {
    font-size: 0.82rem !important;
    border-top: 1px solid var(--ap-border) !important;
}

.ap-formatos-list {
    max-height: 58vh;
    overflow-y: auto;
}

.ap-formatos-list .table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6c757d;
    border-top: none;
    padding: 8px 12px;
    background: #f8f9fa;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ap-formatos-list .table td {
    font-size: 13px;
    padding: 7px 12px;
    vertical-align: middle;
}

/* ── Reporte laboratorio — layout denso para captura de resultados ── */
.page-reporte-lab .rp-section-title {
    font-size: 11px; font-weight: 700; color: var(--ap-green-mid, #10b981);
    text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px;
    padding-bottom: 3px; border-bottom: 2px solid var(--ap-green-mid, #10b981);
    display: inline-block;
}
/* Card interno datos del paciente */
.page-reporte-lab .rp-datos-card {
    background: #f8f9fa; border: 1px solid #e5e7eb;
    border-radius: 10px; margin-bottom: 8px; overflow: hidden;
}
.page-reporte-lab .rp-datos-card-header {
    font-size: 10px; font-weight: 700; color: var(--ap-green-mid, #10b981);
    text-transform: uppercase; letter-spacing: .5px;
    padding: 4px 12px; background: #f1f3f5; border-bottom: 1px solid #e5e7eb;
}
.page-reporte-lab .rp-datos-card-body { padding: 6px 10px 4px; }
.page-reporte-lab .rp-datos-card .rp-field-value { border-bottom-color: #d1d5db; }
.page-reporte-lab .rp-label {
    font-size: 9px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .3px; margin-bottom: 0;
}
.page-reporte-lab .rp-field-value {
    font-size: 11.5px; color: #1f2937; border-bottom: 1px solid var(--ap-border, #dee2e6);
    padding: 0 0 1px; min-height: 18px; line-height: 1.3;
}
.page-reporte-lab .rp-paciente-datos .col-md-1,
.page-reporte-lab .rp-paciente-datos .col-md-2,
.page-reporte-lab .rp-paciente-datos .col-md-3 { padding-left: 6px; padding-right: 6px; }
.page-reporte-lab .form-group { margin-bottom: 0.15rem; }
.page-reporte-lab label { margin-bottom: 0; }
.page-reporte-lab .custom-control { min-height: 0.25rem; }
.page-reporte-lab .text-black, .page-reporte-lab .text-dark { color: #343a40 !important; }
.page-reporte-lab .card-body { padding: 8px 12px; }
/* Tabla estudios — ultra compacta para 5-6 filas visibles */
.page-reporte-lab .rp-estudios-table th { padding: 0 3px; font-size: 0.65rem; line-height: 1; }
.page-reporte-lab .rp-estudios-table th i { color: var(--ap-green-mid, #10b981); }
.page-reporte-lab .rp-estudios-table td { padding: 0 3px; font-size: 0.68rem; line-height: 1; vertical-align: middle; height: 22px; }
.page-reporte-lab .rp-estudios-table .btn-link { font-size: 0.68rem; padding: 0; line-height: 1; }
/* Checkboxes nativos — quitar custom-control wrapper */
.page-reporte-lab .rp-estudios-table .custom-control { display: none; }
.page-reporte-lab .rp-estudios-table .rp-chk-native { width: 13px; height: 13px; cursor: pointer; accent-color: var(--ap-green-mid, #10b981); }
/* Botón bitácora — icono plano sin circle */
.page-reporte-lab .rp-estudios-table .btn-bitacora { padding: 0; border: none; background: none; color: var(--ap-green-mid, #10b981); font-size: 0.75rem; line-height: 1; cursor: pointer; }
.page-reporte-lab .rp-estudios-table .btn-bitacora:hover { color: #059669; }
/* Tabla resultados (componentes) */
.page-reporte-lab #tipo-componente .table th { padding: 1px 6px !important; font-size: 0.75rem !important; line-height: 1.1 !important; }
.page-reporte-lab #tipo-componente .table th i { color: var(--ap-green-mid, #10b981); }
.page-reporte-lab #tipo-componente .table td { padding: 0 6px !important; font-size: 0.78rem !important; line-height: 1.1 !important; height: 22px !important; vertical-align: middle !important; }
.page-reporte-lab #tipo-componente .table tbody tr { background: #fff !important; }
.page-reporte-lab #tipo-componente .table-striped tbody tr:nth-of-type(odd) { background: #fff !important; }
.page-reporte-lab #tipo-componente .form-control,
.page-reporte-lab #tipo-componente .form-control-border {
    height: 20px !important; padding: 0 4px !important; font-size: 0.75rem !important;
    line-height: 1 !important; border-radius: 0 !important;
    border: none !important; border-bottom: 1px solid var(--ap-border, #dee2e6) !important;
    background: transparent !important;
}
.page-reporte-lab #tipo-componente .form-control:focus,
.page-reporte-lab #tipo-componente .form-control-border:focus {
    border-bottom-color: var(--ap-green-mid, #10b981) !important;
    box-shadow: none !important; background: #f0fdf4 !important;
}
.page-reporte-lab #tipo-componente select.form-control { height: 22px !important; }
/* Componentes tipo título — fondo claro destacado */
.page-reporte-lab .rp-comp-titulo td {
    background: #e8f0fe !important; color: #1e3a5f !important;
    font-weight: 700; font-size: 0.75rem; height: 20px !important;
    padding: 0 8px !important; letter-spacing: .3px;
    border-bottom: none !important;
}
/* SweetAlert2 — modales WhatsApp y Correo */
.rp-swal-popup { border-radius: 16px !important; padding: 24px 20px 16px !important; max-width: 380px !important; }
.rp-swal-icon {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff;
}
.rp-swal-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }
.rp-swal-mail { background: linear-gradient(135deg, #10b981, #047857); }
.rp-swal-title { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
.rp-swal-subtitle { font-size: 13px; color: #6b7280; margin: 0 0 4px; }
.rp-swal-input {
    border: 2px solid var(--ap-green-mid, #10b981) !important; border-radius: 8px !important;
    font-size: 14px !important; padding: 8px 12px !important; text-align: left !important;
}
.rp-swal-input:focus { box-shadow: 0 0 0 3px rgba(16,185,129,.2) !important; }
.rp-swal-btn-whatsapp {
    background: #25D366; color: #fff;
    border: none; border-radius: 8px; padding: 8px 24px; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: opacity .2s;
}
.rp-swal-btn-whatsapp:hover { background: #1ebe5b; }
.rp-swal-btn-mail {
    background: linear-gradient(135deg, #10b981, #047857); color: #fff;
    border: none; border-radius: 8px; padding: 8px 24px; font-size: 14px;
    font-weight: 600; cursor: pointer; transition: opacity .2s;
}
.rp-swal-btn-mail:hover { opacity: .9; }
.rp-swal-btn-cancel {
    background: #6b7280; color: #fff; border: none; border-radius: 8px;
    padding: 8px 20px; font-size: 14px; font-weight: 600; cursor: pointer;
    margin-left: 8px; transition: opacity .2s;
}
.rp-swal-btn-cancel:hover { opacity: .85; }

/* Botón imprimir — color PDF rojo */
.rp-btn-pdf {
    background: #dc3545; color: #fff; border: none;
    font-weight: 600; transition: box-shadow .2s, transform .2s;
}
.rp-btn-pdf:hover, .rp-btn-pdf:focus {
    color: #fff; background: #c82333;
    box-shadow: 0 3px 10px rgba(220,53,69,.35); transform: translateY(-1px);
}
/* Acciones header */
.rp-report-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rp-report-actions .btn { font-size: 12px; padding: 6px 16px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
.rp-report-actions .btn.rounded-circle { min-width: 0; width: 32px; height: 32px; padding: 0; }
.page-reporte-lab .content-header { padding: 6px .5rem; }
.page-reporte-lab .content { padding-top: 4px; }
/* Panel acciones compacto */
.page-reporte-lab .rp-acciones-col .btn-sm { font-size: 0.75rem; padding: 2px 8px; }
.page-reporte-lab .rp-acciones-col .form-control-sm { font-size: 0.78rem; height: calc(1.2em + .5rem + 2px); }
.page-reporte-lab .rp-acciones-col .custom-file-label { font-size: 11px; padding: 2px 8px; height: auto; }
.page-reporte-lab .rp-acciones-col small { font-size: 0.7rem; }

/* Responsive — Reporte laboratorio */
@media (max-width: 767.98px) {
    .page-reporte-lab .rp-report-actions { justify-content: center; width: 100%; margin-top: 8px; }
    .page-reporte-lab .rp-report-actions .btn { font-size: 11px; padding: 4px 10px; }
    .page-reporte-lab .rp-estudios-col { order: 1; }
    .page-reporte-lab .rp-acciones-col { order: 2; margin-top: 6px; }
    .page-reporte-lab .rp-paciente-datos { gap: 0; }
    .page-reporte-lab .rp-field-value { font-size: 11px; }
    /* Quitar max-height en móvil para que fluya */
    .page-reporte-lab .rp-estudios-col .rp-table-wrap { max-height: none !important; overflow: visible; }
    /* Tabla estudios — card mode en móvil */
    .page-reporte-lab .rp-estudios-table { min-width: 0; }
    .page-reporte-lab .rp-estudios-table thead { display: none; }
    .page-reporte-lab .rp-estudios-table tbody tr {
        display: flex; align-items: center; flex-wrap: wrap;
        border: 1px solid var(--ap-border, #dee2e6); border-left: 3px solid var(--ap-green-mid, #10b981);
        border-radius: 6px; margin-bottom: 4px; padding: 5px 8px; gap: 4px 8px;
    }
    .page-reporte-lab .rp-estudios-table tbody td { border: none; padding: 0; font-size: 0.8rem; display: flex; align-items: center; }
    .page-reporte-lab .rp-estudios-table tbody td::before {
        content: attr(data-label);
        font-weight: 700; font-size: 0.65rem; color: #6b7280;
        text-transform: uppercase; margin-right: 4px;
    }
    .page-reporte-lab .rp-estudios-table tbody td[data-label=""]::before { display: none; }
    .page-reporte-lab .rp-estudios-table tbody td[data-label="Estudio"] { flex: 1 1 100%; order: -1; }
    .page-reporte-lab .rp-estudios-table tbody td[data-label="Estudio"] .btn-link { font-size: 0.82rem; font-weight: 700; }
    .page-reporte-lab .rp-estudios-table .rp-chk-native { width: 15px; height: 15px; }
    /* Componentes responsivos — card mode */
    .page-reporte-lab #tipo-componente { padding: 0 !important; max-width: 100% !important; }
    .page-reporte-lab #tipo-componente .table-responsive { overflow: visible !important; }
    .page-reporte-lab #tipo-componente .table { min-width: 0 !important; }
    .page-reporte-lab #tipo-componente .table thead { display: none !important; }
    .page-reporte-lab #tipo-componente .table tbody tr {
        display: block !important; border: 1px solid var(--ap-border, #dee2e6) !important;
        border-radius: 6px !important; margin-bottom: 6px !important; padding: 8px 10px !important;
        background: #fff !important; height: auto !important;
    }
    .page-reporte-lab #tipo-componente .table tbody tr.rp-comp-titulo {
        padding: 6px 10px !important; margin-bottom: 4px !important;
        border-left: 3px solid #3b82f6 !important; background: #e8f0fe !important;
    }
    .page-reporte-lab #tipo-componente .table tbody tr.rp-comp-titulo td {
        display: block !important; text-align: center !important;
        border-bottom: none !important; height: auto !important;
        padding: 0 !important; font-size: 0.82rem !important;
    }
    .page-reporte-lab #tipo-componente .table tbody td {
        display: flex !important; flex-wrap: wrap !important; align-items: center !important;
        border: none !important; padding: 3px 0 !important; font-size: 0.8rem !important;
        text-align: left !important; height: auto !important; line-height: 1.3 !important;
    }
    .page-reporte-lab #tipo-componente .table tbody td::before {
        content: attr(data-label);
        font-weight: 700; font-size: 0.65rem; color: #6b7280;
        text-transform: uppercase; width: 80px; flex-shrink: 0;
    }
    .page-reporte-lab #tipo-componente .table tbody td[colspan] { padding: 0 !important; }
    .page-reporte-lab #tipo-componente .table tbody td[colspan]::before { display: none !important; }
    .page-reporte-lab #tipo-componente .form-control,
    .page-reporte-lab #tipo-componente .form-control-border {
        height: 28px !important; font-size: 0.82rem !important;
        padding: 2px 6px !important; flex: 1 !important;
        border: 1px solid var(--ap-border, #dee2e6) !important;
        border-radius: 4px !important; background: #fff !important;
    }
    .page-reporte-lab #tipo-componente select.form-control { height: 30px !important; }
}

/* ── Page Tabs — navegación entre páginas tipo tabs ── */
.ap-page-tabs {
    padding: 10px 20px !important;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f5f7 100%) !important;
    border-bottom: 1px solid var(--ap-border);
}
.ap-page-tabs .row {
    justify-content: center;
}
.ap-page-tabs .btn {
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 20px;
    min-width: 120px;
    transition: all .2s;
}

/* ── Admisión — layout denso para registro de pacientes / caja ── */
.page-admision .col-form-label {
    font-weight: 400 !important;
    color: #060606;
    font-size: 16px;
}
.page-admision .form-control {
    height: calc(1.75rem + 2px);
}
.page-admision .btn-sm {
    font-size: .650rem;
}
.page-admision .bg-teal,
.page-admision .bg-teal > a {
    color: #000 !important;
}
.page-admision .select2-container--default .select2-selection--single {
    padding: .26875rem .55rem !important;
}
.page-admision .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 30px !important;
}
.page-admision .ui-menu {
    overflow: auto;
    max-height: 200px;
}

/* ─── PAGE: REGISTRO PACIENTE — Rediseño moderno ─── */

/* Card principal */
.page-registro-paciente .card {
    border: none;
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    overflow: visible;
}
.page-registro-paciente .card > .card-body {
    padding: 20px 24px;
}

/* Folio central */
.page-registro-paciente #folio {
    font-size: 1.1rem !important;
    font-weight: 700;
    color: var(--ap-green);
    letter-spacing: .3px;
    padding: 8px 0 4px;
}

/* --- Sección: Datos del Paciente --- */
.page-registro-paciente .rp-section {
    background: #fafbfc;
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    padding: 14px 16px 6px;
    margin-bottom: 16px;
    position: relative;
}
.page-registro-paciente .rp-section-title {
    position: absolute;
    top: -10px;
    left: 16px;
    background: #fafbfc;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--ap-green-mid);
}

/* Labels modernos */
.page-registro-paciente .col-form-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Inputs modernos */
.page-registro-paciente .form-control,
.page-registro-paciente .custom-select {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    height: auto;
    min-height: 34px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
.page-registro-paciente .form-control:focus,
.page-registro-paciente .custom-select:focus {
    border-color: var(--ap-green-mid);
    box-shadow: 0 0 0 3px rgba(25,135,84,.10);
    background: #fff;
}
.page-registro-paciente .form-control-border {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* Botón buscar pacientes */
.page-registro-paciente .load-ordenes {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(25,135,84,.25);
    transition: transform .15s, box-shadow .15s;
}
.page-registro-paciente .load-ordenes:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25,135,84,.35);
}

/* Botón limpiar médico */
.page-registro-paciente .clear-medico {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 11px;
}

/* --- Sección: Panel de opciones (Adicionales/Monedero/Factura) --- */
.page-registro-paciente .rp-section-options {
    padding-top: 18px;
}
.page-registro-paciente .rp-options-panel {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 10px !important;
    background: #f9fafb;
    padding: 10px 12px 4px !important;
}

/* Toggle buttons (ojo) para Adicionales/Monedero/Factura */
.page-registro-paciente .rp-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
    transition: all .2s;
}
.page-registro-paciente .rp-toggle-btn.btn-info {
    background: #e0f2fe !important;
    border-color: #bae6fd !important;
    color: #0284c7 !important;
}
.page-registro-paciente .rp-toggle-btn.btn-info:hover {
    background: #bae6fd !important;
    color: #0369a1 !important;
}

/* Collapse cards inside options panel */
.page-registro-paciente .rp-options-panel .card.card-body {
    border-radius: 8px;
    border: 1px solid var(--ap-border);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
    padding: 12px 16px;
}

/* Checkboxes modernos */
.page-registro-paciente .custom-control-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    padding-top: 1px;
}
.page-registro-paciente .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ap-green-mid);
    border-color: var(--ap-green-mid);
}

/* Selects de Referencia y Tipo Cliente */
.page-registro-paciente .rp-options-panel .custom-select {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 8px;
}

/* Notas */
.page-registro-paciente .rp-options-panel .form-control-border {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* --- Tabla de Estudios --- */
.page-registro-paciente #table_registro {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--ap-border);
    border-collapse: separate;
    border-spacing: 0;
}
.page-registro-paciente #table_registro thead {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%) !important;
}
.page-registro-paciente #table_registro thead th {
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 10px 8px;
    border: none;
    white-space: nowrap;
}
.page-registro-paciente #table_registro thead th .maquila-badge {
    background: rgba(255,255,255,.2);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
}
.page-registro-paciente #table_registro tbody td {
    padding: 6px 8px;
    vertical-align: middle;
    font-size: 13px;
    border-color: var(--ap-border);
}
.page-registro-paciente #table_registro tbody tr:hover {
    background: var(--ap-green-soft);
}
.page-registro-paciente #table_registro .codigo {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 8px;
}

/* Botones de acción en tabla */
.page-registro-paciente .delete-estudio {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 12px;
}
.page-registro-paciente .info-estudio {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px !important;
    font-size: 12px;
}

/* Botón agregar estudio (+) */
.page-registro-paciente .btn-add-paq {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(25,135,84,.25);
    transition: transform .15s, box-shadow .15s;
    font-size: 14px;
}
.page-registro-paciente .btn-add-paq:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25,135,84,.35);
}

/* --- Footer: Descuento / Aumento / Importe --- */
.page-registro-paciente .rp-footer {
    background: #f9fafb;
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 12px;
}
.page-registro-paciente .rp-footer .col-form-label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
}
.page-registro-paciente .rp-footer #total {
    font-size: 18px;
    font-weight: 800;
    color: var(--ap-green);
    background: var(--ap-green-bg);
    border: 2px solid var(--ap-green-mid);
    border-radius: 10px;
    text-align: center;
    padding: 6px 12px;
}

/* Botón Guardar principal (global) */
.rp-save-btn {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 40px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: .3px;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(25,135,84,.3);
    transition: all .2s;
}
.rp-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(25,135,84,.4);
}

/* Mensaje de orden */
.page-registro-paciente .menssage {
    color: var(--ap-green);
    font-size: 1.2rem !important;
    padding: 8px 0;
}

/* Fecha de entrega display */
.page-registro-paciente #fecha_entrega {
    font-weight: 700;
    color: var(--ap-green);
    font-size: 14px;
    border-bottom: 2px solid var(--ap-green-bg) !important;
    padding: 4px 0 6px;
}

/* Select2 dentro de registro */
.page-registro-paciente .select2-container--default .select2-selection--single {
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    height: 34px;
    padding: 4px 10px;
}
.page-registro-paciente .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    color: #374151;
}
.page-registro-paciente .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px !important;
}

/* ── Modales de Pacientes — header, filter bar, tabla, badges ── */

/* Modal header limpio — override del verde para modales de registro/admisión */
.rp-modal-header {
    background: #fff !important;
    color: var(--ap-text) !important;
    border-bottom: 1px solid var(--ap-border) !important;
    padding: 16px 20px !important;
}
.rp-modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ap-text);
}
.rp-modal-header .close {
    color: var(--ap-text-muted) !important;
    text-shadow: none !important;
    opacity: .6 !important;
    font-size: 22px;
}
.rp-modal-header .close:hover {
    opacity: 1 !important;
}
.rp-modal-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .18);
}

/* Modal body — padding consistente */
.rp-modal-pacientes .modal-body,
.rp-modal-busqueda .modal-body {
    padding: 18px 20px;
}

/* Filter bar — barra de búsqueda horizontal */
.rp-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(180deg, #fafbfc 0%, #f1f3f5 100%);
    border: 1px solid var(--ap-border);
    border-radius: 10px;
    margin-bottom: 18px;
}
.rp-filter-bar .rp-filter-field {
    flex: 1;
    min-width: 0;
}
.rp-filter-bar .rp-filter-field--text {
    flex: 1.5;
}
.rp-filter-bar .rp-filter-field--date {
    flex: 0.9;
}
.rp-filter-bar .rp-filter-field--btn {
    flex: 0 0 auto;
    padding-bottom: 1px;
}
.rp-filter-bar label {
    display: block;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: 4px;
    white-space: nowrap;
}
.rp-filter-bar label i {
    color: var(--ap-green-mid);
}
.rp-filter-bar .form-control {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    height: 36px;
    padding: 6px 12px;
    transition: border-color .2s, box-shadow .2s;
}
.rp-filter-bar .form-control:focus {
    border-color: var(--ap-green-mid);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, .12);
}
/* Título descriptivo dentro del filter bar */
.rp-filter-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    padding-top: 2px;
}

/* Botón buscar — verde gradiente */
.rp-btn-search {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 22px;
    height: 36px;
    white-space: nowrap;
    transition: box-shadow .2s, transform .15s;
}
.rp-btn-search:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(40, 167, 69, .35);
    transform: translateY(-1px);
}

/* Botón registrar nuevo */
.rp-btn-registrar {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%);
    color: #fff;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 24px;
    transition: box-shadow .2s, transform .15s;
}
.rp-btn-registrar:hover {
    color: #fff;
    box-shadow: 0 4px 14px rgba(40, 167, 69, .35);
    transform: translateY(-1px);
}
.rp-btn-registrar:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Tabla de pacientes — envoltorio con scroll vertical + horizontal */
.rp-table-wrap {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ap-border);
    border-radius: 10px;
}
.rp-table-wrap::-webkit-scrollbar {
    width: 6px;
}
.rp-table-wrap::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 0 10px 10px 0;
}
.rp-table-wrap::-webkit-scrollbar-thumb {
    background: #c5c9d0;
    border-radius: 3px;
}
.rp-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #a0a5ad;
}

/* Tabla de pacientes — estilo moderno */
.rp-patient-table {
    margin-bottom: 0;
}
/* Solo separate en tablas sin DataTables (dentro de rp-table-wrap) */
.rp-table-wrap .rp-patient-table {
    border-collapse: separate;
    border-spacing: 0;
}
.rp-table-wrap .rp-patient-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.rp-patient-table thead th {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 10px 12px;
    border: none;
    white-space: nowrap;
    vertical-align: middle;
}
.rp-table-wrap .rp-patient-table thead th:first-child {
    border-radius: 9px 0 0 0;
}
.rp-table-wrap .rp-patient-table thead th:last-child {
    border-radius: 0 9px 0 0;
}
.rp-patient-table thead th i {
    opacity: .75;
    font-size: 10px;
}
.rp-patient-table tbody td {
    font-size: 12.5px;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f1f3;
    vertical-align: middle;
    color: #374151;
}
.rp-patient-table tbody tr:hover {
    background: var(--ap-green-bg);
}
.rp-patient-table tbody tr.text-danger td {
    color: #dc3545;
    text-decoration: line-through;
    opacity: .7;
}

/* Acciones — botones pequeños circulares */
.rp-patient-table .btn-sm.rounded-circle {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
    transition: transform .15s, box-shadow .15s;
}
.rp-patient-table .btn-sm.rounded-circle:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

/* ── Badges de estado — Saldo Deudor ── */
.rp-saldo-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: .2px;
}
.rp-saldo-badge i {
    font-size: 11px;
}
.rp-saldo-badge.deuda {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}
.rp-saldo-badge.deuda i {
    opacity: .8;
}
.rp-saldo-badge.pagado {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.rp-saldo-badge.credito {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}
.rp-saldo-badge.cancelado {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
    text-decoration: line-through;
}

/* Badge de reportado en detalle de estudios */
.rp-status-icon {
    font-size: 10px;
    margin-left: 4px;
    vertical-align: middle;
}
.rp-status-icon.reportado {
    color: #2563eb;
}
.rp-status-icon.impreso {
    color: #16a34a;
}

/* ── Responsive modales de pacientes ── */

/* Tablet (≤991px) */
@media (max-width: 991.98px) {
    .rp-filter-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 14px;
    }
    .rp-filter-bar .rp-filter-field,
    .rp-filter-bar .rp-filter-field--text,
    .rp-filter-bar .rp-filter-field--date,
    .rp-filter-bar .rp-filter-field--btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px;
    }
    .rp-filter-bar .rp-filter-field--btn {
        margin-bottom: 0;
    }
    /* Ocultar campo de título sin input (ej. "Lista de Resultados") */
    .rp-filter-bar .rp-filter-field--text:has(.rp-filter-title):not(:has(input)) {
        display: none !important;
    }
    .rp-filter-title {
        display: none;
    }
    .rp-filter-bar label {
        display: block !important;
        text-align: left !important;
        font-size: 11px;
        margin-bottom: 3px;
    }
    .rp-filter-bar .form-control {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 38px;
        font-size: 13px;
        border-radius: 6px;
        box-sizing: border-box !important;
    }
    .rp-filter-bar .rp-btn-search {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 40px;
        font-size: 14px;
        border-radius: 8px;
    }
    /* Card-header con filter bar — padding reducido */
    .card-header > form > .rp-filter-bar,
    .card-body > .rp-filter-bar {
        margin: -5px -5px 10px;
        border: none;
        background: #f8f9fa;
        border-radius: 8px;
    }
    .card-header:has(.rp-filter-bar) {
        padding: 10px;
    }
    .card-header > form {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .card-body > form {
        width: 100% !important;
    }
    .rp-patient-table {
        min-width: 700px;
    }

    /* ── Caja / Corte / Gastos — tablet adjustments ── */
    .ap-tab-content .rp-section .row .col-md-2 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
    .ap-tab-content .rp-save-btn {
        font-size: 13px !important;
        padding: 8px 20px !important;
    }
}

/* Mobile (≤767px) — fullscreen, columna única, scroll horizontal en tabla */
@media (max-width: 767.98px) {
    /* Modal fullscreen */
    .rp-modal-pacientes .modal-dialog,
    .rp-modal-busqueda .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 100vh;
    }
    .rp-modal-pacientes .modal-content,
    .rp-modal-busqueda .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
    }
    .rp-modal-pacientes .modal-body,
    .rp-modal-busqueda .modal-body {
        padding: 10px !important;
    }

    /* Header compacto */
    .rp-modal-header {
        padding: 10px 14px !important;
        border-radius: 0 !important;
    }
    .rp-modal-header .modal-title {
        font-size: 13px !important;
        gap: 8px;
    }
    .rp-modal-icon {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        font-size: 12px;
    }

    /* Filter bar — columna, full width, labels a la izquierda */
    .rp-filter-bar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    .rp-filter-bar .rp-filter-field,
    .rp-filter-bar .rp-filter-field--text,
    .rp-filter-bar .rp-filter-field--date,
    .rp-filter-bar .rp-filter-field--btn {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px;
    }
    .rp-filter-bar .rp-filter-field--btn {
        margin-bottom: 0;
    }
    /* Ocultar campo de título sin input (ej. "Lista de Resultados") */
    .rp-filter-bar .rp-filter-field--text:has(.rp-filter-title):not(:has(input)) {
        display: none !important;
    }
    .rp-filter-bar label {
        display: block !important;
        text-align: left !important;
        font-size: 10px;
        margin-bottom: 3px;
    }
    .rp-filter-bar .form-control {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 38px;
        font-size: 13px;
        border-radius: 6px;
        box-sizing: border-box !important;
    }
    .rp-btn-search {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 40px;
        font-size: 14px;
        border-radius: 8px;
    }

    /* ── Tablas rp-patient-table en mobile — scroll horizontal ── */
    .rp-patient-table {
        min-width: 550px;
    }
    .rp-patient-table thead th {
        font-size: 9.5px;
        padding: 7px 5px;
    }
    .rp-patient-table thead th i {
        display: none;
    }
    .rp-patient-table tbody td {
        font-size: 11px;
        padding: 5px 5px;
    }
    .rp-patient-table .btn-sm.rounded-circle {
        width: 26px;
        height: 26px;
        font-size: 10px;
        margin: 1px !important;
    }
    .rp-saldo-badge {
        font-size: 9px;
        padding: 2px 5px;
        gap: 2px;
    }
    .rp-saldo-badge i {
        font-size: 8px;
    }

    /* ── Tablas dentro de MODALES — modo CARDS ── */
    .rp-modal-pacientes .rp-table-wrap,
    .rp-modal-busqueda .rp-table-wrap {
        max-height: 55vh;
        border: none;
        overflow-x: hidden;
    }
    .rp-modal-pacientes .rp-patient-table,
    .rp-modal-busqueda .rp-patient-table {
        min-width: 0;
        border: none;
    }
    .rp-modal-pacientes .rp-patient-table thead,
    .rp-modal-busqueda .rp-patient-table thead {
        display: none;
    }
    .rp-modal-pacientes .rp-patient-table tbody tr,
    .rp-modal-busqueda .rp-patient-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid);
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .rp-modal-pacientes .rp-patient-table tbody tr:hover,
    .rp-modal-busqueda .rp-patient-table tbody tr:hover {
        background: #fff;
    }
    .rp-modal-pacientes .rp-patient-table tbody td,
    .rp-modal-busqueda .rp-patient-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px 0;
        border: none !important;
        font-size: 12px;
        color: #374151;
        text-align: right;
    }
    .rp-modal-pacientes .rp-patient-table tbody td::before,
    .rp-modal-busqueda .rp-patient-table tbody td::before {
        font-weight: 700;
        font-size: 10px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .3px;
        flex-shrink: 0;
        margin-right: 12px;
        text-align: left;
    }
    /* Labels — modal búsqueda principal (8 cols) */
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(1)::before { content: 'Orden'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(2)::before { content: 'Paciente'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(3)::before { content: 'F. Nac.'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(4)::before { content: 'Expediente'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(5)::before { content: 'F. Orden'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(6)::before { content: 'Saldo'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(7)::before { content: 'Maquila'; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(8)::before { content: ''; }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(1) {
        font-weight: 700; font-size: 13px; color: var(--ap-green); padding-bottom: 4px;
    }
    .rp-modal-pacientes .rp-patient-table tbody td:nth-child(8) {
        justify-content: center; padding-top: 8px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    /* Labels — modal búsqueda por nombre (6 cols) */
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(1)::before { content: 'Expediente'; }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(2)::before { content: 'Órdenes'; }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(3)::before { content: 'Nombre'; }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(4)::before { content: 'F. Nac.'; }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(5)::before { content: 'F. Registro'; }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(6)::before { content: ''; }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(1) {
        font-weight: 700; font-size: 13px; color: var(--ap-green); padding-bottom: 4px;
    }
    .rp-modal-busqueda .rp-patient-table tbody td:nth-child(6) {
        justify-content: center; padding-top: 8px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .rp-modal-pacientes .rp-patient-table .btn-sm.rounded-circle,
    .rp-modal-busqueda .rp-patient-table .btn-sm.rounded-circle {
        width: 32px; height: 32px; font-size: 12px; margin: 2px !important;
    }
    /* Fila cancelada en modal */
    .rp-modal-pacientes .rp-patient-table tbody tr.text-danger {
        border-left: 3px solid #dc3545; opacity: .75;
    }
    .rp-modal-pacientes .rp-patient-table tbody tr.text-danger td {
        text-decoration: none; color: #374151;
    }

    /* ── Modal Componentes (#modal-estudio) — modo CARDS ── */
    .rp-modal-componentes .rp-table-wrap {
        max-height: 55vh; border: none; overflow-x: hidden;
    }
    .rp-modal-componentes .rp-patient-table {
        min-width: 0; border: none;
    }
    .rp-modal-componentes .rp-patient-table thead {
        display: none;
    }
    .rp-modal-componentes .rp-patient-table tbody tr {
        display: block; background: #fff; border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid); border-radius: 8px;
        margin-bottom: 8px; padding: 10px 12px; position: relative;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .rp-modal-componentes .rp-patient-table tbody tr:hover {
        background: #fff;
    }
    /* Ocultar drag-handle en mobile, usar flechas ↑↓ en su lugar */
    .rp-modal-componentes .rp-patient-table tbody td.drag-handle { display: none !important; }
    /* Mostrar botones de flechas en mobile (ID para ganar especificidad al desktop) */
    #modal-estudio .btn-move-up,
    #modal-estudio .btn-move-down {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        width: 30px; height: 30px; padding: 0;
        background: var(--ap-green-bg, #d1fae5); color: var(--ap-green-mid, #198754);
        border-color: var(--ap-green-mid, #198754);
    }
    .rp-modal-componentes .rp-patient-table tbody td {
        display: flex; align-items: center; justify-content: space-between;
        padding: 3px 0; border: none !important;
        font-size: 12px; color: #374151; text-align: right;
    }
    .rp-modal-componentes .rp-patient-table tbody td::before {
        font-weight: 700; font-size: 10px; color: #6b7280;
        text-transform: uppercase; letter-spacing: .3px;
        flex-shrink: 0; margin-right: 12px; text-align: left;
    }
    /* nth-child ajustado: 1=handle, 2=componente, 3=alias, 4=capturable, 5=imprimible, 6=tipo, 7=acciones */
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(2)::before { content: 'Componente'; }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(3)::before { content: 'Alias'; }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(4)::before { content: 'Capturable'; }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(5)::before { content: 'Imprimible'; }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(6)::before { content: 'Tipo'; }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(7)::before { content: ''; }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(2) {
        font-weight: 700; font-size: 13px; color: var(--ap-green); padding-bottom: 4px;
    }
    .rp-modal-componentes .rp-patient-table tbody td:nth-child(7) {
        justify-content: center; padding-top: 8px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .rp-modal-componentes .rp-patient-table .btn-sm.rounded-circle {
        width: 32px; height: 32px; font-size: 12px; margin: 2px !important;
    }
    .rp-comp-actions {
        flex-direction: column; align-items: stretch;
    }
    .rp-comp-actions .rp-btn-ordenar,
    .rp-comp-actions .rp-btn-search {
        width: 100%; text-align: center;
    }

    /* ── DataTables en cards — scroll horizontal ── */
    .card-body .rp-patient-table {
        min-width: 500px;
    }
    .card-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Footer modal */
    .rp-modal-pacientes .modal-footer,
    .rp-modal-busqueda .modal-footer {
        border-radius: 0 !important;
    }

    /* Card-header / card-body con filter bar — reducir padding */
    .card-header > form > .rp-filter-bar,
    .card-body > .rp-filter-bar {
        margin: -5px -5px 10px;
        border: none;
        background: #f8f9fa;
        border-radius: 8px;
    }
    .card-header:has(.rp-filter-bar) {
        padding: 10px;
    }
    .card-header > form {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    .card-body > form {
        width: 100% !important;
    }

    /* Ocultar rp-filter-title en mobile (ocupa espacio innecesario) */
    .rp-filter-title {
        display: none;
    }

    /* ── Etiquetas — tabla como CARDS en mobile ── */
    .page-etiquetas .card-body {
        overflow-x: visible;
    }
    .page-etiquetas .rp-patient-table {
        min-width: 0;
        border: none;
    }
    .page-etiquetas .rp-patient-table thead {
        display: none;
    }
    .page-etiquetas .rp-patient-table tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid);
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .page-etiquetas .rp-patient-table tbody tr:hover {
        background: #fff;
    }
    .page-etiquetas .rp-patient-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px 0;
        border: none !important;
        font-size: 12px;
        color: #374151;
        text-align: right;
    }
    .page-etiquetas .rp-patient-table tbody td::before {
        font-weight: 700;
        font-size: 10px;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: .3px;
        flex-shrink: 0;
        margin-right: 12px;
        text-align: left;
    }
    .page-etiquetas .rp-patient-table tbody td:nth-child(1)::before { content: 'Estudio'; }
    .page-etiquetas .rp-patient-table tbody td:nth-child(2)::before { content: 'Tubo'; }
    .page-etiquetas .rp-patient-table tbody td:nth-child(3)::before { content: 'Alias'; }
    .page-etiquetas .rp-patient-table tbody td:nth-child(4)::before { content: ''; }
    .page-etiquetas .rp-patient-table tbody td:nth-child(1) {
        font-weight: 700; font-size: 13px; color: var(--ap-green); padding-bottom: 4px;
    }
    .page-etiquetas .rp-patient-table tbody td:nth-child(4) {
        justify-content: center; padding-top: 8px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .page-etiquetas .rp-patient-table .btn-sm.rounded-circle {
        width: 32px; height: 32px; font-size: 12px; margin: 2px !important;
    }

    /* Fila Imprimir/input — stack vertical */
    .page-etiquetas .card-body > .row > .col-md-3 {
        display: none;
    }
    .page-etiquetas .card-body > .row > .col-md-2,
    .page-etiquetas .card-body > .row > .col-md-4 {
        padding-top: 8px !important;
        padding-bottom: 4px !important;
    }

    /* ── Caja / Corte / Gastos — responsive mobile ── */

    /* rp-section en mobile */
    .ap-tab-content .rp-section {
        padding: 12px 10px;
        margin-bottom: 12px;
    }
    .ap-tab-content .rp-section-title {
        font-size: 12px;
    }

    /* Botones toggle en mobile — full width */
    .ap-tab-content .rp-toggle-btn {
        width: 100%;
        margin-bottom: 6px;
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Save button en mobile */
    .ap-tab-content .rp-save-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* Corte: resumen en columna */
    .ap-tab-content .rp-section .row .col-md-2,
    .ap-tab-content .rp-section .row .col-md-3,
    .ap-tab-content .rp-section .row .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Caja: sección de pago en columna */
    .ap-tab-content .col-md-4.offset-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }

    /* Caja: monedero colapsable en columna */
    .ap-tab-content .row .col-md-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Caja: print buttons en stack */
    #print-recibo .row .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-bottom: 6px;
    }

    /* Corte: botones detalles en stack */
    .ap-tab-content .row .col-md-3.offset-md-6 {
        margin-left: 0;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Saldo badges en mobile */
    .rp-saldo-badge {
        display: inline-flex;
        font-size: 13px;
        padding: 6px 14px;
    }

    /* Labels con iconos */
    .ap-tab-content .form-group label {
        font-size: 12px;
    }

    /* Tablas dentro de colapsables */
    .ap-tab-content .collapse .rp-patient-table {
        min-width: 600px;
    }
    .ap-tab-content .collapse .card-body,
    .ap-tab-content .collapse {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --- Responsive: Registro Paciente --- */

/* Tablet (768–991px) — labels truncados, secciones compactas */
@media (max-width: 991.98px) {
    .page-registro-paciente .card > .card-body {
        padding: 14px 14px;
    }
    .page-registro-paciente .rp-section {
        padding: 12px 10px 4px;
    }
    /* Labels truncados en una línea con ellipsis */
    .page-registro-paciente .col-form-label {
        font-size: 10px !important;
        letter-spacing: 0 !important;
        padding-right: 2px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page-registro-paciente .form-control,
    .page-registro-paciente .custom-select {
        font-size: 12px;
        padding: 4px 8px;
        min-height: 30px;
    }
    .page-registro-paciente .rp-options-panel {
        padding: 6px 8px 4px !important;
    }
    .page-registro-paciente .rp-options-panel .col-form-label {
        font-size: 10px !important;
    }
    /* Checkboxes labels NO truncar */
    .page-registro-paciente .custom-control-label {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: 11px;
    }
    /* Footer compacto en tablet */
    .page-registro-paciente .rp-footer {
        padding: 10px 12px;
    }
    .page-registro-paciente .rp-footer .col-form-label {
        font-size: 10px !important;
    }
    .page-registro-paciente .rp-footer #total {
        font-size: 15px;
    }
    .page-registro-paciente .rp-save-btn {
        font-size: 13px !important;
        padding: 8px 20px !important;
    }
    /* Tabla compacta */
    .page-registro-paciente #table_registro thead th {
        font-size: 10px;
        padding: 8px 4px;
        letter-spacing: 0;
    }
    .page-registro-paciente #table_registro tbody td {
        font-size: 12px;
        padding: 5px 4px;
    }
}

/* Mobile (≤767px) — full width, stacked */
@media (max-width: 767.98px) {
    .page-registro-paciente .card > .card-body {
        padding: 10px 10px;
    }
    .page-registro-paciente .rp-section {
        padding: 10px 10px 2px;
        margin-bottom: 12px;
    }
    /* En mobile las columnas se apilan, labels arriba del input */
    .page-registro-paciente .form-group.row {
        margin-bottom: 6px !important;
    }
    .page-registro-paciente .col-form-label {
        text-align: left !important;
        padding-bottom: 0;
        padding-top: 4px;
        font-size: 10px !important;
    }
    .page-registro-paciente .form-control,
    .page-registro-paciente .custom-select {
        font-size: 13px;
        min-height: 34px;
    }
    /* Secciones médico y opciones full-width en mobile */
    .page-registro-paciente .rp-options-panel {
        padding: 6px 6px 2px !important;
    }
    /* Tabla horizontal scroll en mobile */
    .page-registro-paciente #table_registro {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page-registro-paciente #table_registro thead th {
        font-size: 9px;
        padding: 6px 3px;
        white-space: nowrap;
    }
    .page-registro-paciente #table_registro tbody td {
        font-size: 11px;
        padding: 4px 3px;
    }
    /* Footer stacked en mobile */
    .page-registro-paciente .rp-footer {
        padding: 10px;
    }
    .page-registro-paciente .rp-footer .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 8px;
    }
    .page-registro-paciente .rp-footer #total {
        font-size: 15px;
    }
    .page-registro-paciente .rp-save-btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
    /* Botón agregar más compacto */
    .page-registro-paciente .btn-add-paq {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* Small mobile (≤575px) */
@media (max-width: 575.98px) {
    .page-registro-paciente .ap-page-tabs .btn {
        font-size: 11px;
        padding: 5px 12px;
        min-width: auto;
    }
    .page-registro-paciente .rp-section-title {
        font-size: 10px;
    }
    .page-registro-paciente .rp-footer .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ── Modal — estilo ap-modal para modales consistentes ── */
.ap-modal .modal-header {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%);
    color: #fff;
    border-bottom: none;
    padding: 14px 20px;
    border-radius: calc(var(--ap-radius) - 1px) calc(var(--ap-radius) - 1px) 0 0;
}
.ap-modal .modal-header .modal-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
}
.ap-modal .modal-header .close {
    color: #fff;
    text-shadow: none;
    opacity: .8;
}
.ap-modal .modal-header .close:hover {
    opacity: 1;
}
.ap-modal .modal-content {
    border: none;
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}
.ap-modal .modal-footer {
    background: #f8f9fa;
    border-top: 1px solid var(--ap-border);
    border-radius: 0 0 calc(var(--ap-radius) - 1px) calc(var(--ap-radius) - 1px);
    padding: 12px 20px;
}

/* ── Agenda — FullCalendar estilo moderno ── */
.page-agenda .ap-agenda-filter {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f5f7 100%);
    border-bottom: 1px solid var(--ap-border);
}
.page-agenda .ap-agenda-filter label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    margin: 0;
    white-space: nowrap;
}
.page-agenda .ap-agenda-filter .form-control,
.page-agenda .ap-agenda-filter .select2-container {
    max-width: 320px;
}

/* Calendar container */
.page-agenda #calendar {
    padding: 4px 0;
}

/* Toolbar header */
.page-agenda .fc .fc-toolbar {
    padding: 12px 0;
    gap: 12px;
}
.page-agenda .fc .fc-toolbar-title {
    font-size: 1.35rem !important;
    font-weight: 700;
    color: var(--ap-text);
    text-transform: capitalize;
}

/* Navigation buttons */
.page-agenda .fc .fc-button {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border: 1px solid var(--ap-border) !important;
    background: var(--ap-white) !important;
    color: var(--ap-text) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
    transition: all .15s !important;
}
.page-agenda .fc .fc-button:hover {
    background: #f0f2f5 !important;
    border-color: #d1d5db !important;
}
.page-agenda .fc .fc-button-active,
.page-agenda .fc .fc-button:active {
    background: var(--ap-green) !important;
    color: #fff !important;
    border-color: var(--ap-green) !important;
    box-shadow: 0 2px 4px rgba(29,107,56,.25) !important;
}
.page-agenda .fc .fc-button-group > .fc-button {
    border-radius: 0 !important;
}
.page-agenda .fc .fc-button-group > .fc-button:first-child {
    border-radius: 8px 0 0 8px !important;
}
.page-agenda .fc .fc-button-group > .fc-button:last-child {
    border-radius: 0 8px 8px 0 !important;
}

/* prev/next arrows */
.page-agenda .fc .fc-prev-button,
.page-agenda .fc .fc-next-button {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.page-agenda .fc .fc-today-button {
    border-radius: 20px !important;
    padding: 6px 18px !important;
    background: var(--ap-green-bg) !important;
    color: var(--ap-green) !important;
    border-color: var(--ap-green-bg) !important;
    font-weight: 700 !important;
}
.page-agenda .fc .fc-today-button:hover {
    background: var(--ap-green-mid) !important;
    color: #fff !important;
    border-color: var(--ap-green-mid) !important;
}
.page-agenda .fc .fc-today-button:disabled {
    opacity: .5 !important;
}

/* Table & day grid */
.page-agenda .fc .fc-scrollgrid {
    border: 1px solid var(--ap-border) !important;
    border-radius: var(--ap-radius);
    overflow: hidden;
}
.page-agenda .fc .fc-scrollgrid td,
.page-agenda .fc .fc-scrollgrid th {
    border-color: #eef0f3 !important;
}

/* Day headers (dom, lun, mar...) */
.page-agenda .fc .fc-col-header-cell {
    background: #f8fafb;
    padding: 10px 0 !important;
}
.page-agenda .fc .fc-col-header-cell-cushion {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #6b7280;
    text-decoration: none !important;
}

/* Day cells */
.page-agenda .fc .fc-daygrid-day {
    transition: background .15s;
    min-height: 100px;
}
.page-agenda .fc .fc-daygrid-day:hover {
    background: #f0faf4 !important;
}
.page-agenda .fc .fc-daygrid-day-number {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    padding: 8px 10px !important;
    text-decoration: none !important;
}
.page-agenda .fc .fc-day-today {
    background: var(--ap-green-bg) !important;
}
.page-agenda .fc .fc-day-today .fc-daygrid-day-number {
    background: var(--ap-green);
    color: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

/* Events */
.page-agenda .fc .fc-event {
    border: none !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    font-size: 12px !important;
    font-weight: 500;
    background: var(--ap-green-mid) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.page-agenda .fc .fc-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,.15);
}

/* Time grid (week/day view) */
.page-agenda .fc .fc-timegrid-slot {
    height: 40px !important;
}
.page-agenda .fc .fc-timegrid-slot-label-cushion {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* Other months days - muted */
.page-agenda .fc .fc-day-other .fc-daygrid-day-number {
    color: #d1d5db;
}

/* ── Agenda — RESPONSIVE ── */
@media (max-width: 991.98px) {
    .page-agenda .ap-agenda-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .page-agenda .ap-agenda-filter .form-control,
    .page-agenda .ap-agenda-filter .select2-container {
        max-width: 100%;
    }
    .page-agenda .fc .fc-toolbar {
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
    }
    .page-agenda .fc .fc-toolbar-title {
        font-size: 1.15rem !important;
        order: -1;
        text-align: center;
    }
    .page-agenda .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
    }
}
@media (max-width: 767.98px) {
    .page-agenda .card-body {
        padding: 10px !important;
    }
    .page-agenda .fc .fc-toolbar-title {
        font-size: 1rem !important;
    }
    .page-agenda .fc .fc-button {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
    .page-agenda .fc .fc-prev-button,
    .page-agenda .fc .fc-next-button {
        width: 30px;
        height: 30px;
    }
    .page-agenda .fc .fc-today-button {
        padding: 4px 12px !important;
        font-size: 11px !important;
    }
    .page-agenda .fc .fc-col-header-cell {
        padding: 6px 0 !important;
    }
    .page-agenda .fc .fc-col-header-cell-cushion {
        font-size: 10px;
        letter-spacing: .3px;
    }
    .page-agenda .fc .fc-daygrid-day {
        min-height: 60px;
    }
    .page-agenda .fc .fc-daygrid-day-number {
        font-size: 12px;
        padding: 4px 6px !important;
    }
    .page-agenda .fc .fc-day-today .fc-daygrid-day-number {
        width: 26px;
        height: 26px;
        font-size: 11px;
    }
    .page-agenda .fc .fc-event {
        font-size: 10px !important;
        padding: 1px 4px !important;
    }
    .page-agenda .fc .fc-daygrid-event-dot {
        margin: 0 2px 0 0;
    }
    /* List view on mobile for better readability */
    .page-agenda .fc .fc-scrollgrid {
        border-radius: 8px;
    }
}

/* ── Agenda — Modal de citas mejorado ── */
.page-agenda .ap-modal .modal-dialog {
    max-width: 480px;
}
.page-agenda .ap-modal .modal-header {
    padding: 16px 24px;
}
.page-agenda .ap-modal .modal-header .modal-title {
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.page-agenda .ap-modal .modal-body {
    padding: 24px;
}
.page-agenda .ap-modal .modal-body .form-group {
    margin-bottom: 18px;
}
.page-agenda .ap-modal .modal-body label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.page-agenda .ap-modal .modal-body label .fas,
.page-agenda .ap-modal .modal-body label .far {
    color: var(--ap-green-mid);
    font-size: 13px;
}
.page-agenda .ap-modal .modal-body .form-control {
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    height: auto;
    transition: border-color .2s, box-shadow .2s;
    background: #fafbfc;
}
.page-agenda .ap-modal .modal-body .form-control:focus {
    border-color: var(--ap-green-mid);
    box-shadow: 0 0 0 3px rgba(25,135,84,.12);
    background: #fff;
}
.page-agenda .ap-modal .modal-body .form-control::placeholder {
    color: #b0b7c3;
    font-weight: 400;
}
.page-agenda .ap-modal .ap-modal-dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.page-agenda .ap-modal .ap-modal-save {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}
.page-agenda .ap-modal .ap-modal-save .btn {
    border-radius: 10px;
    padding: 10px 40px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 2px 8px rgba(25,135,84,.3);
    transition: transform .15s, box-shadow .15s;
}
.page-agenda .ap-modal .ap-modal-save .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25,135,84,.4);
}
.page-agenda .ap-modal .modal-footer {
    padding: 0;
    border: none;
    min-height: 0;
}
/* Edit modal action buttons */
.page-agenda .ap-modal .ap-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ap-border);
}
.page-agenda .ap-modal .ap-modal-actions .btn {
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 20px;
}
@media (max-width: 575.98px) {
    .page-agenda .ap-modal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    .page-agenda .ap-modal .modal-body {
        padding: 16px;
    }
    .page-agenda .ap-modal .ap-modal-dates {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

/* ─── GLOBAL: Modal Loading — Lab Animation ─── */
.ap-loading-modal .modal-content {
    border: none;
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
}
.ap-loading-modal .modal-body {
    padding: 36px 20px 28px;
}
.ap-loading-modal h6 {
    color: #374151;
    letter-spacing: .3px;
}
/* Lab icons carousel */
.ap-lab-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    height: 48px;
    margin-bottom: 14px;
}
.ap-lab-loader i {
    font-size: 1.25rem;
    color: var(--ap-green-mid);
    opacity: 0.25;
    transform: translateY(0);
    animation: apLabBounce 1.6s ease-in-out infinite;
}
.ap-lab-loader i:nth-child(1) { animation-delay: 0s; }
.ap-lab-loader i:nth-child(2) { animation-delay: 0.2s; }
.ap-lab-loader i:nth-child(3) { animation-delay: 0.4s; }
.ap-lab-loader i:nth-child(4) { animation-delay: 0.6s; }
.ap-lab-loader i:nth-child(5) { animation-delay: 0.8s; }
@keyframes apLabBounce {
    0%, 100% { opacity: 0.2; transform: translateY(0) scale(1); }
    30% { opacity: 1; transform: translateY(-10px) scale(1.3); color: var(--ap-green); }
    60% { opacity: 0.4; transform: translateY(2px) scale(1); }
}
/* Pulsing bar under icons */
.ap-lab-bar {
    width: 120px;
    height: 3px;
    border-radius: 3px;
    background: #e5e7eb;
    margin: 0 auto 16px;
    overflow: hidden;
    position: relative;
}
.ap-lab-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -40%;
    width: 40%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--ap-green-mid), var(--ap-green));
    animation: apLabSlide 1.4s ease-in-out infinite;
}
@keyframes apLabSlide {
    0% { left: -40%; }
    100% { left: 100%; }
}

/* ─── GLOBAL: Modal Password icon ─── */
.ap-password-icon {
    font-size: 50px;
    color: var(--ap-green-mid);
    opacity: .7;
}

/* ─── GLOBAL: jQuery UI Autocomplete — Estilo moderno ─── */
.ui-autocomplete {
    background: #fff !important;
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px !important;
    z-index: 1060 !important;
}
.ui-autocomplete .ui-menu-item {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
.ui-autocomplete .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item div {
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    color: #374151 !important;
    cursor: pointer;
    transition: background .15s;
    border: none !important;
    line-height: 1.4;
}
.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item div:hover,
.ui-autocomplete .ui-state-active,
.ui-autocomplete .ui-state-focus {
    background: var(--ap-green-bg) !important;
    color: var(--ap-green) !important;
    border: none !important;
}
.ui-autocomplete .ui-menu-item-wrapper strong,
.ui-autocomplete .ui-menu-item div strong {
    color: var(--ap-green);
    font-weight: 700;
    font-size: 14px;
}
/* Scrollbar sutil */
.ui-autocomplete::-webkit-scrollbar {
    width: 6px;
}
.ui-autocomplete::-webkit-scrollbar-track {
    background: transparent;
}
.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
.ui-autocomplete::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ─── GLOBAL: SweetAlert2 — Estilo Connections ─── */
.swal2-popup {
    border-radius: var(--ap-radius) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.15) !important;
    font-family: var(--ap-font) !important;
    padding: 28px 24px !important;
}
.swal2-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
}
.swal2-html-container,
.swal2-content {
    font-size: 14px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
}
.swal2-icon.swal2-info {
    border-color: var(--ap-green-mid) !important;
    color: var(--ap-green-mid) !important;
}
.swal2-icon.swal2-warning {
    border-color: #f59e0b !important;
    color: #f59e0b !important;
}
.swal2-icon.swal2-success {
    border-color: var(--ap-green-mid) !important;
}
.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
    background-color: var(--ap-green-mid) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(25,135,84,.3) !important;
}
.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--ap-green) 0%, var(--ap-green-mid) 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 32px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(25,135,84,.3) !important;
    transition: all .2s !important;
}
.swal2-styled.swal2-confirm:hover {
    box-shadow: 0 4px 14px rgba(25,135,84,.4) !important;
}
.swal2-styled.swal2-cancel {
    border-radius: 10px !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
/* Input dentro de SweetAlert (WhatsApp, email) */
.swal2-input {
    border: 1.5px solid var(--ap-border) !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    padding: 10px 14px !important;
    transition: border-color .2s, box-shadow .2s !important;
}
.swal2-input:focus {
    border-color: var(--ap-green-mid) !important;
    box-shadow: 0 0 0 3px rgba(25,135,84,.12) !important;
}

/* ─── SweetAlert2: Modal Indicaciones (estudio) ─── */
.swal2-indicaciones {
    max-width: 440px !important;
    padding: 32px 28px 24px !important;
}
.swal2-indicaciones .swal2-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--ap-green) !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px !important;
}
.swal2-indicaciones .swal2-icon {
    display: none !important;
}
.swal2-indicaciones-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--ap-green-bg);
    border: 2px solid var(--ap-green-mid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swal2-indicaciones-icon .fas {
    font-size: 28px;
    color: var(--ap-green-mid);
}
.swal2-indicaciones-text {
    font-size: 15px;
    color: #1f2937;
    line-height: 1.7;
    text-align: center;
    font-weight: 500;
    margin: 12px 0 8px;
    padding: 0 8px;
}

/* ─── PAGE: LABORATORIO BÚSQUEDA (reporte-laboratorio / sucursales) ─── */
.page-lab-busqueda .rp-table-wrap { max-height: none; }
@media (max-width: 767.98px) {
    .page-lab-busqueda .rp-lab-busqueda-table { min-width: 0; }
    .page-lab-busqueda .rp-lab-busqueda-table thead { display: none; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody tr {
        display: block; background: #fff; border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid); border-radius: 8px;
        margin-bottom: 8px; padding: 10px 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td {
        display: flex; align-items: center; justify-content: space-between;
        padding: 3px 0; border: none !important; font-size: 12px; text-align: right;
    }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td::before {
        font-weight: 700; font-size: 10px; color: #6b7280;
        text-transform: uppercase; letter-spacing: .3px;
        flex-shrink: 0; margin-right: 12px; text-align: left;
    }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(1)::before { content: 'Código'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(2)::before { content: 'Paciente'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(3)::before { content: 'Sexo'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(4)::before { content: 'Edad'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(5)::before { content: 'Expediente'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(6)::before { content: 'Observaciones'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(7)::before { content: 'Fecha'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(8)::before { content: 'Sucursal'; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(9)::before { content: ''; }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(1) {
        font-weight: 700; font-size: 13px; color: var(--ap-green);
    }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(2) {
        font-weight: 600; font-size: 13px; padding-bottom: 4px;
    }
    .page-lab-busqueda .rp-lab-busqueda-table tbody td:nth-child(9) {
        justify-content: center; padding-top: 6px; margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .page-lab-busqueda .rp-lab-busqueda-table .btn-sm.rounded-circle {
        width: 34px; height: 34px; font-size: 13px;
    }
}

/* ─── PAGE: DOCUMENTOS COMPLEMENTARIOS ─── */
.page-doc-complementarios .table th i { color: var(--ap-green-mid); }
.page-doc-complementarios .lcomplementarios { min-width: 160px; }
@media (max-width: 767.98px) {
    .page-doc-complementarios .table th { font-size: 0.8rem; }
    .page-doc-complementarios .table td { font-size: 0.85rem; }
}

/* ─── PAGE: IMAGENOLOGÍA ─── */
.page-imagen .table th i { color: var(--ap-green-mid); }
.ap-th-action { width: 50px; }
.page-imagen .ap-editor-container { height: 70vh; }
.page-imagen .ap-editor-container .summernoteL { height: 60vh; }

/* Colores alternos de sección (estudios por sección) */
.ap-seccion-a { color: #078CA4; font-weight: 600; }
.ap-seccion-b { color: #28a745; font-weight: 600; }

/* Responsive tablas + editor — Imagenología */
@media (max-width: 767.98px) {
    .page-imagen .table th { font-size: 0.8rem; }
    .page-imagen .table td { font-size: 0.85rem; }
    .page-imagen .ap-editor-container { height: auto; }
}

/* ─── PAGE: CATÁLOGOS ─── */
.page-catalogos .table th i { color: var(--ap-green-mid); }
@media (max-width: 767.98px) {
    .page-catalogos .table th { font-size: 0.8rem; }
    .page-catalogos .table td { font-size: 0.85rem; }
}

/* ─── PAGE: ADMINISTRACIÓN ─── */
.page-admin .table th i { color: var(--ap-green-mid); }
@media (max-width: 767.98px) {
    .page-admin .table th { font-size: 0.8rem; }
    .page-admin .table td { font-size: 0.85rem; }
}

/* ─── PAGE: ADMINISTRADOR — BASE (aplica a todas las pages adm-*) ─── */
[class*="page-adm-"] .table td { font-size: 0.85rem !important; font-family: 'Inter', sans-serif !important; }
[class*="page-adm-"] .table th { font-family: 'Inter', sans-serif !important; }
[class*="page-adm-"] .card-header .card-title { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 600; }
[class*="page-adm-"] .form-control, [class*="page-adm-"] label { font-family: 'Inter', sans-serif; }

/* ─── PAGE: ADMINISTRADOR — USUARIOS ─── */
.page-adm-usuarios .table th i { color: var(--ap-green-mid); }
.page-adm-usuarios .d-flex { gap: 2px; }
@media (max-width: 991.98px) {
    .page-adm-usuarios .ap-page-header { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 767.98px) {
    .page-adm-usuarios .table th { font-size: 0.65rem; }
    .page-adm-usuarios .table td { font-size: 0.8rem !important; }
    .page-adm-usuarios .ap-page-header > div:last-child { width: 100%; }
    .page-adm-usuarios .ap-page-header > div:last-child .btn { width: 100%; }
}
@media (max-width: 575.98px) {
    .page-adm-usuarios .col-md-3 { margin-bottom: 8px; }
}

/* ─── PAGE: ADMINISTRADOR — CLIENTES ─── */
.page-adm-clientes .table th i { color: var(--ap-green-mid); }
.page-adm-clientes .btn-toggle-pass {
    padding: 2px 6px;
    font-size: 0.78rem;
    color: var(--ap-green-mid);
    background: transparent;
    border: 1px solid var(--ap-border);
    border-radius: 4px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.page-adm-clientes .btn-toggle-pass:hover {
    color: var(--ap-green-dark);
    border-color: var(--ap-green-mid);
}
@media (max-width: 767.98px) {
    .page-adm-clientes .table th { font-size: 0.65rem; }
    .page-adm-clientes .table td { font-size: 0.8rem !important; }
    .page-adm-clientes .row.align-items-end { flex-direction: column; }
    .page-adm-clientes .row.align-items-end > div { max-width: 100%; flex: 0 0 100%; }
}

/* ─── PAGE: ADMINISTRADOR — EMPRESAS ─── */
.page-adm-empresas .table th i { color: var(--ap-green-mid); }
@media (max-width: 767.98px) {
    .page-adm-empresas .table th { font-size: 0.65rem; }
    .page-adm-empresas .table td { font-size: 0.8rem !important; }
    .page-adm-empresas .row > div { margin-bottom: 4px; }
}

/* ── CATÁLOGOS (page-adm-catalogos) ── */
.page-adm-catalogos .table th i { color: var(--ap-green-mid); }
.page-adm-catalogos .d-flex { gap: 2px; }
@media (max-width: 767.98px) {
    .page-adm-catalogos .ap-page-header { flex-wrap: nowrap; gap: 8px; }
    .page-adm-catalogos .table th { font-size: 0.65rem; }
    .page-adm-catalogos .table td { font-size: 0.8rem !important; }
    .page-adm-catalogos .ap-page-header > a { width: auto; flex-shrink: 0; }
    .page-adm-catalogos .row > div { margin-bottom: 4px; }
}

/* ─── PAGE: EMPRESAS — ESTUDIOS ─── */
.page-emp-estudios .table th i { color: var(--ap-green-mid); }
.page-emp-estudios .d-flex { gap: 2px; }

@media (max-width: 767.98px) {
    .page-emp-estudios .ap-page-header { flex-wrap: wrap; gap: 8px; }
    .page-emp-estudios .table th { font-size: 0.65rem; }
    .page-emp-estudios .table td { font-size: 0.8rem !important; }
    .page-emp-estudios .ap-page-header > a { width: 100%; }
    .page-emp-estudios .row > div { margin-bottom: 4px; }
}

/* ─── PAGE: EMPRESAS — SUCURSALES ─── */
.page-emp-sucursales .table th i { color: var(--ap-green-mid); }
.page-emp-sucursales .d-flex { gap: 2px; }
.page-emp-sucursales .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #006fe6 !important;
}

@media (max-width: 767.98px) {
    .page-emp-sucursales .ap-page-header { flex-wrap: wrap; gap: 8px; }
    .page-emp-sucursales .table th { font-size: 0.65rem; }
    .page-emp-sucursales .table td { font-size: 0.8rem !important; }
    .page-emp-sucursales .ap-page-header > a { width: 100%; }
    .page-emp-sucursales .row > div { margin-bottom: 4px; }
}

/* ─── PAGE: EMPRESAS — FORMATOS ─── */
.page-emp-formatos .table th i { color: var(--ap-green-mid); }
.page-emp-formatos .card { border-radius: var(--ap-radius); }

@media (max-width: 767.98px) {
    .page-emp-formatos .ap-page-header { flex-wrap: wrap; gap: 8px; }
    .page-emp-formatos .row > div { margin-bottom: 4px; }
}

/* ─── PAGE: EMPRESAS — REPORTES ─── */
.page-emp-reportes .table th i { color: var(--ap-green-mid); }
.page-emp-reportes .card { border-radius: var(--ap-radius); }
.page-emp-reportes .table td[style*="text-align:center"] { text-align: center; }

@media (max-width: 991.98px) {
    .page-emp-reportes .ap-filter-bar .row { gap: 8px; }
    .page-emp-reportes .ap-filter-field { flex: 1 1 auto; min-width: 140px; }
}

@media (max-width: 767.98px) {
    .page-emp-reportes .ap-page-header { flex-wrap: wrap; gap: 8px; }
    .page-emp-reportes .table th { font-size: 0.7rem; }
    .page-emp-reportes .table td { font-size: 0.8rem !important; }
    .page-emp-reportes .row > div { margin-bottom: 4px; }
}

/* ─── PAGE: EMPRESAS — INVENTARIO ─── */
.page-emp-inventario .table th i { color: var(--ap-green-mid); }
.page-emp-inventario .card { border-radius: var(--ap-radius); }

@media (max-width: 767.98px) {
    .page-emp-inventario .ap-page-header { flex-wrap: wrap; gap: 8px; }
    .page-emp-inventario .ap-page-header > a { width: 100%; }
    .page-emp-inventario .ap-page-header > button { width: 100%; }
    .page-emp-inventario .table th { font-size: 0.65rem; }
    .page-emp-inventario .table td { font-size: 0.8rem !important; }
    .page-emp-inventario .row > div { margin-bottom: 4px; }
}

/* ──────────────────────────────────────────
   PAGE: REPORTEADOR
────────────────────────────────────────── */
/* ─── Tabs del reporteador ─── */
.ap-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 2px solid var(--ap-border);
    padding: 0 4px;
    margin-bottom: 0;
    list-style: none;
    background: #f8fafc;
    border-radius: 8px 8px 0 0;
}
.ap-report-tabs .nav-item { margin-bottom: -2px; }
.ap-report-tabs .nav-link {
    font-family: var(--ap-font);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ap-text-muted);
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.ap-report-tabs .nav-link:hover {
    color: var(--ap-green-mid);
    border-bottom-color: #d1fae5;
}
.ap-report-tabs .nav-link.active {
    color: var(--ap-green);
    border-bottom-color: var(--ap-green);
    background: #fff;
}
.ap-report-tabs .nav-link i {
    margin-right: 5px;
    font-size: 0.72rem;
}

/* ─── Contenedor de tab panes ─── */
.ap-report-tab-body {
    background: #fff;
    border: 1px solid var(--ap-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

/* ─── Botones de reporte ─── */
.ap-rpt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.ap-rpt-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--ap-border);
    background: #fff;
    font-family: var(--ap-font);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ap-text);
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    width: 100%;
    line-height: 1.3;
}
.ap-rpt-btn:hover {
    border-color: var(--ap-green-mid);
    background: var(--ap-green-soft);
    box-shadow: 0 2px 8px rgba(25,135,84,0.10);
    transform: translateY(-1px);
}
.ap-rpt-btn:active { transform: translateY(0); }
.ap-rpt-btn .ap-rpt-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: #fff;
    box-shadow: 0 2px 6px rgba(37,99,235,0.18);
}
.ap-rpt-btn--global .ap-rpt-icon {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 2px 6px rgba(217,119,6,0.18);
}
.ap-rpt-btn--factura .ap-rpt-icon {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6);
    box-shadow: 0 2px 6px rgba(124,58,237,0.18);
}

/* ─── Filtros del reporteador ─── */
.ap-report-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid var(--ap-border);
    border-radius: 8px;
    margin-bottom: 16px;
}
.ap-report-filters .form-group { margin-bottom: 0; flex: 1; min-width: 160px; }
.ap-report-filters label {
    font-family: var(--ap-font);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

@media (max-width: 767.98px) {
    .ap-report-tabs .nav-link { font-size: 0.7rem; padding: 8px 10px; }
    .ap-rpt-grid { grid-template-columns: 1fr; }
    .ap-report-filters { flex-direction: column; }
}


/* ──────────────────────────────────────────
   PAGE: PACIENTES PORTAL
────────────────────────────────────────── */
/* Iconos de cabecera de tabla en verde */
.page-pacientes .table thead th i {
    color: var(--ap-green-mid);
}

/* ─── Sucursal Info Card ─── */
.ap-clinic-card {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #fff;
    border: 1px solid var(--ap-border);
    border-radius: 12px;
    padding: 20px 28px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ap-clinic-logo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid var(--ap-border);
    padding: 6px;
}
.ap-clinic-info {
    flex: 1;
    min-width: 0;
}
.ap-clinic-name {
    font-family: var(--ap-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ap-text);
    margin-bottom: 2px;
    line-height: 1.3;
}
.ap-clinic-branch {
    font-family: var(--ap-font);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ap-green-mid);
    margin-bottom: 4px;
}
.ap-clinic-detail {
    font-family: var(--ap-font);
    font-size: 0.8rem;
    color: var(--ap-text-muted);
    line-height: 1.6;
}
.ap-clinic-detail i {
    width: 16px;
    text-align: center;
    color: #94a3b8;
    margin-right: 4px;
    font-size: 0.72rem;
}

/* ─── Entity Badge (Paciente / Doctor / Empresa) ─── */
.ap-entity-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--ap-green-soft);
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 20px;
}
.ap-entity-badge--blue {
    background: #eff6ff;
    border-color: #dbeafe;
}
.ap-entity-badge--amber {
    background: #fffbeb;
    border-color: #fef3c7;
}
.ap-entity-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--ap-green), var(--ap-green-mid));
    color: #fff;
    box-shadow: 0 2px 6px rgba(29,107,56,0.18);
}
.ap-entity-badge--blue .ap-entity-icon {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 2px 6px rgba(37,99,235,0.18);
}
.ap-entity-badge--amber .ap-entity-icon {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    box-shadow: 0 2px 6px rgba(217,119,6,0.18);
}
.ap-entity-name {
    font-family: var(--ap-font);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ap-text);
    line-height: 1.3;
}
.ap-entity-label {
    font-family: var(--ap-font);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ap-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* ─── Report Pill Badges ─── */
.ap-report-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ap-report-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-family: var(--ap-font);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none !important;
    background: var(--ap-green-bg);
    color: #065f46 !important;
    border: 1px solid #a7f3d0;
    transition: background 0.15s, box-shadow 0.15s;
    white-space: nowrap;
}
.ap-report-pill:hover {
    background: #a7f3d0;
    box-shadow: 0 1px 4px rgba(5,150,105,0.15);
    text-decoration: none !important;
}
.ap-report-pill i {
    font-size: 0.68rem;
    opacity: 0.7;
}
.ap-report-pill--complement {
    background: #eff6ff;
    color: #1e40af !important;
    border-color: #bfdbfe;
}
.ap-report-pill--complement:hover {
    background: #bfdbfe;
    box-shadow: 0 1px 4px rgba(37,99,235,0.15);
}
.ap-report-pending {
    font-family: var(--ap-font);
    font-size: 0.78rem;
    color: var(--ap-text-muted);
    font-style: italic;
}

/* ─────────────────────────────────────────
   PORTAL PACIENTES — overrides & componentes
───────────────────────────────────────── */

/* Ícono de página: azul médico calmado */
.page-pacientes .ap-page-icon {
    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.22) !important;
}
.page-pacientes .ap-page-icon::after {
    background: linear-gradient(135deg, rgba(59,130,246,0.14) 0%, transparent 60%) !important;
}

/* Clinic card: fondo suave + borde izquierdo azul */
.page-pacientes .ap-clinic-card {
    border-left: 4px solid #3b82f6;
    background: #f8fafc;
}

/* Badge paciente navy (oscuro — texto blanco) */
.ap-entity-badge--navy {
    background: linear-gradient(135deg, #1e3a5f, #1e40af);
    border-color: #1e3a5f;
}
.ap-entity-badge--navy .ap-entity-icon {
    background: rgba(255,255,255,0.18);
    box-shadow: none;
    color: #fff;
}
.ap-entity-badge--navy .ap-entity-name { color: #fff; }
.ap-entity-badge--navy .ap-entity-label { color: rgba(255,255,255,0.70); }

/* Aviso de confidencialidad */
.ap-privacy-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--ap-font);
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: -12px;
    margin-bottom: 20px;
}
.ap-privacy-notice i { font-size: 0.8em; color: #cbd5e1; }

/* Separador sección */
.ap-sep {
    border: none;
    border-top: 1px solid var(--ap-border);
    margin: 0 0 16px 0;
}

/* Fecha en dos líneas */
.ap-date-main {
    font-family: var(--ap-font);
    font-weight: 600;
    color: var(--ap-text);
    font-size: 0.84rem;
    line-height: 1.3;
}
.ap-date-time {
    font-family: var(--ap-font);
    font-size: 0.73rem;
    color: var(--ap-text-muted);
    margin-top: 1px;
}

/* Celda vacía */
.ap-cell-empty { color: #cbd5e1; }

/* Estado "En proceso" */
.ap-report-proceso {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 3px 10px;
    font-family: var(--ap-font);
    font-size: 0.72rem;
    font-weight: 600;
}
.ap-report-proceso i { font-size: 0.85em; }

/* ── Tabla compacta — Pacientes ── */
.page-pacientes .dataTable td,
.page-pacientes .dataTable th {
    padding: 4px 8px !important;
    vertical-align: middle !important;
    font-size: 0.82rem;
    line-height: 1.3;
}
.page-pacientes .dataTable th {
    font-size: 0.75rem;
    white-space: nowrap;
}
/* Botones de imagen: forzar inline, eliminar grid/br/margin */
.page-pacientes .dataTable td .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.page-pacientes .dataTable td .row > div,
.page-pacientes .dataTable td .row > div[class*="col"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.page-pacientes .dataTable td br {
    display: none !important;
}
.page-pacientes .dataTable td .btn-sm.rounded-circle {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 0.7rem !important;
    line-height: 28px !important;
    margin: 0 2px !important;
}
.page-pacientes .dataTable td .btn-sm.rounded-circle i {
    line-height: 28px;
}
.page-pacientes .dataTable td > div,
.page-pacientes .dataTable td > div > div {
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    .page-pacientes .ap-page-header { flex-wrap: wrap; gap: 8px; }
    .ap-clinic-card { flex-direction: column; text-align: center; padding: 16px; gap: 12px; }
    .ap-clinic-detail i { display: none; }
    .ap-entity-badge { width: 100%; justify-content: center; }
    .ap-report-pills { gap: 4px; }
    .ap-report-pill { font-size: 0.68rem; padding: 3px 8px; }

    /* ── DataTables como CARDS en móvil ── */
    .page-pacientes .table-responsive { overflow-x: visible; }
    .page-pacientes .dataTable { min-width: 0 !important; width: 100% !important; border: none; }
    .page-pacientes .dataTable thead { display: none; }
    .page-pacientes .dataTable tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--ap-border);
        border-left: 3px solid var(--ap-green-mid);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 14px 16px;
        box-shadow: 0 1px 4px rgba(0,0,0,.05);
    }
    .page-pacientes .dataTable tbody tr:hover { background: #fff; }
    .page-pacientes .dataTable tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
        border: none !important;
        font-family: var(--ap-font);
        font-size: 0.85rem;
        color: var(--ap-text);
        text-align: right;
        background: transparent !important;
    }
    .page-pacientes .dataTable tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.72rem;
        color: var(--ap-text-muted);
        text-transform: uppercase;
        letter-spacing: .3px;
        flex-shrink: 0;
        margin-right: 16px;
        text-align: left;
    }
    /* Primera celda (código/orden) resaltada */
    .page-pacientes .dataTable tbody td:first-child {
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--ap-green);
        padding-bottom: 6px;
        margin-bottom: 2px;
        border-bottom: 1px solid #f0f1f3 !important;
    }
    /* Última celda (acciones) centrada */
    .page-pacientes .dataTable tbody td:last-child {
        justify-content: center;
        padding-top: 10px;
        margin-top: 4px;
        border-top: 1px solid #f0f1f3 !important;
    }
    .page-pacientes .dataTable tbody td:last-child::before { display: none; }
    /* Botones redondeados en cards */
    .page-pacientes .dataTable .btn-sm.rounded-circle {
        width: 36px; height: 36px; font-size: 13px; margin: 3px !important;
    }
    /* DataTables controles en mobile */
    .page-pacientes .dataTables_wrapper .dataTables_length,
    .page-pacientes .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 10px;
    }
    .page-pacientes .dataTables_wrapper .dataTables_info,
    .page-pacientes .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 10px;
    }
}

/* ══════════════════════════════════════════════
   ADMINISTRADOR — Sidebar estilo preview
   ══════════════════════════════════════════════ */

/* Fondo principal */
.sidebar-dark-success.main-sidebar,
.sidebar-dark-success.main-sidebar .sidebar {
    background: #0f172a !important;
}

/* Brand link */
.sidebar-dark-success .brand-link {
    background: #0f172a !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.sidebar-dark-success .brand-link:hover,
.sidebar-dark-success .brand-link:focus {
    background: #0f172a !important;
}
.sidebar-dark-success .brand-link .adm-brand-icon {
    width: 36px; height: 36px; min-width: 36px;
    background: linear-gradient(135deg, #1d6b38, #34d399);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff;
    box-shadow: 0 2px 8px rgba(29,107,56,.35);
    flex-shrink: 0;
}
.sidebar-dark-success .brand-link .adm-brand-name {
    font-family: 'Inter', sans-serif !important;
    font-size: .85rem !important; font-weight: 700 !important;
    color: #f8fafc !important; letter-spacing: .3px; line-height: 1.2;
    display: block;
}
.sidebar-dark-success .brand-link .adm-brand-sub {
    font-family: 'Inter', sans-serif !important;
    font-size: .68rem !important; color: #94a3b8 !important; display: block;
}

/* Ocultar brand-image original si existe */
.sidebar-dark-success .brand-link .brand-image.ap-brand-logo { display: none !important; }

/* Nav padding */
.sidebar-dark-success .sidebar { padding: 8px 10px !important; }
.sidebar-dark-success .nav-sidebar { padding: 0 !important; }

/* Section labels */
.sidebar-dark-success .adm-nav-section {
    font-family: 'Inter', sans-serif !important;
    font-size: .62rem !important; font-weight: 700 !important;
    color: #475569 !important; text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    padding: 12px 10px 5px !important;
    display: block !important; line-height: 1;
}

/* Nav item links */
.sidebar-dark-success .nav-sidebar .nav-item .nav-link {
    font-family: 'Inter', sans-serif !important;
    color: #94a3b8 !important;
    font-size: .82rem !important; font-weight: 500 !important;
    border-radius: 9px !important;
    padding: 9px 12px !important;
    margin-bottom: 2px !important;
    background: transparent !important;
    transition: background .15s, color .15s !important;
}
.sidebar-dark-success .nav-sidebar .nav-item .nav-link:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #f1f5f9 !important;
}
.sidebar-dark-success .nav-sidebar .nav-item .nav-link.active {
    background: rgba(52,211,153,0.14) !important;
    color: #34d399 !important;
    box-shadow: none !important;
}
.sidebar-dark-success .nav-sidebar .nav-item .nav-link .nav-icon {
    color: inherit !important;
    width: 18px !important; font-size: .85rem !important;
    margin-right: 8px !important;
}
.sidebar-dark-success .nav-sidebar .nav-item .nav-link .right {
    color: #475569 !important;
}

/* Submenú */
.sidebar-dark-success .nav-treeview {
    background: transparent !important;
    padding-left: 6px !important;
}

/* HR separador */
.sidebar-dark-success .adm-hr {
    border: none !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    margin: 6px 2px !important;
}

/* User footer */
.sidebar-dark-success .adm-sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; gap: 10px;
    background: #0f172a;
    position: absolute; bottom: 0; left: 0; right: 0;
}
.sidebar-dark-success .adm-user-avatar {
    width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
    background: linear-gradient(135deg, #1d6b38, #34d399);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .85rem; font-weight: 700;
}
.sidebar-dark-success .adm-user-name {
    font-family: 'Inter', sans-serif !important;
    font-size: .8rem !important; font-weight: 600 !important; color: #f1f5f9 !important;
    display: block;
}
.sidebar-dark-success .adm-user-role {
    font-family: 'Inter', sans-serif !important;
    font-size: .68rem !important; color: #64748b !important;
    display: block;
}
.sidebar-dark-success .adm-logout-btn { margin-left: auto; }
.sidebar-dark-success .adm-logout-btn a {
    color: #475569 !important; font-size: .85rem;
    padding: 6px 8px; border-radius: 6px;
    display: flex; transition: color .15s, background .15s;
}
.sidebar-dark-success .adm-logout-btn a:hover {
    color: #f87171 !important;
    background: rgba(248,113,113,.08) !important;
}

/* Espacio para el footer fijo */
.sidebar-dark-success .sidebar { padding-bottom: 70px !important; }
.sidebar-dark-success.main-sidebar { overflow: hidden !important; }

/* ── Administrador navbar ── */
.main-header.navbar {
    background: #1e293b !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    font-family: 'Inter', sans-serif !important;
}
.main-header.navbar .nav-link,
.main-header.navbar .navbar-nav .nav-link {
    font-family: 'Inter', sans-serif !important;
    font-size: .82rem !important;
}

/* ── Forzar Inter en sidebar Administrador (excluir iconos FA) ── */
.sidebar-dark-success .nav-sidebar .nav-item .nav-link p,
.sidebar-dark-success .nav-sidebar .nav-item .nav-link > p,
.sidebar-dark-success .adm-nav-section,
.sidebar-dark-success .adm-brand-name,
.sidebar-dark-success .adm-brand-sub,
.sidebar-dark-success .adm-user-name,
.sidebar-dark-success .adm-user-role {
    font-family: 'Inter', sans-serif !important;
}


/* ═══════════════════════════════════════════════════════════════
   CATÁLOGOS ADMINISTRADOR — Estilo moderno (sin alterar funcionalidad)
═══════════════════════════════════════════════════════════════ */

/* Card contenedora de catálogos y formularios */
.ap-catalog-card {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 6px 20px rgba(0,0,0,0.05) !important;
    overflow: hidden;
}
.ap-catalog-card .card-header {
    background: #fff !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    position: relative;
}
.ap-catalog-card .card-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #10b981, #059669);
    border-radius: 0;
}
.ap-catalog-card .card-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: #374151 !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 7px;
}
.ap-catalog-card .card-title i {
    color: #10b981;
}
.ap-catalog-card .card-body {
    background: #fafbfc;
    padding: 20px !important;
}

/* ── Botón editar fila ── */
.ap-btn-accion {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    transition: all 0.18s ease !important;
    cursor: pointer !important;
}
/* Botón editar — ícono naranja (sin texto) */
.ap-btn-edit {
    background: #fff7ed !important;
    color: #ea580c !important;
    border: 1px solid #fed7aa !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(234,88,12,0.10) !important;
}
.ap-btn-edit:hover, .ap-btn-edit:focus {
    background: #ea580c !important;
    color: #fff !important;
    border-color: #ea580c !important;
    box-shadow: 0 3px 10px rgba(234,88,12,0.28) !important;
}
.ap-btn-edit i { font-size: 0.78rem; }

/* Badges de tipo en catálogo estudios */
.ap-tipo-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.71rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.2px;
}
.ap-tipo-estudios { background: #dbeafe; color: #1e40af; }
.ap-tipo-gabinete { background: #fce7f3; color: #9d174d; }

/* ── Botón guardar formularios ── */
.ap-btn-save {
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 36px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 14px rgba(22,163,74,0.28) !important;
    transition: all 0.2s ease !important;
}
.ap-btn-save:hover, .ap-btn-save:focus {
    background: linear-gradient(135deg, #15803d 0%, #047857 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(22,163,74,0.38) !important;
    transform: translateY(-1px) !important;
}
.ap-btn-save i { font-size: 0.85rem; }

/* ── Sidebar responsive — ocultar en móvil ── */
@media (max-width: 991.98px) {
    body:not(.sidebar-open) .main-sidebar {
        transform: translateX(-250px) !important;
        box-shadow: none !important;
    }
    body.sidebar-open .main-sidebar {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.30) !important;
    }
    /* Overlay oscuro al abrir sidebar */
    body.sidebar-open::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.40);
        z-index: 1037;
        pointer-events: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR MINI — estado colapsado (ocultar texto logo y usuario)
═══════════════════════════════════════════════════════════════ */

/* Ocultar texto del brand al colapsar */
.sidebar-mini.sidebar-collapse .main-sidebar .adm-brand-name,
.sidebar-mini.sidebar-collapse .main-sidebar .adm-brand-sub {
    display: none !important;
}
.sidebar-mini.sidebar-collapse .main-sidebar .brand-link {
    justify-content: center !important;
    padding: 10px 8px !important;
    gap: 0 !important;
}

/* Ocultar texto del footer al colapsar, solo mostrar avatar */
.sidebar-mini.sidebar-collapse .adm-sidebar-footer {
    justify-content: center !important;
    padding: 10px 6px !important;
    gap: 0 !important;
}
.sidebar-mini.sidebar-collapse .adm-user-name,
.sidebar-mini.sidebar-collapse .adm-user-role,
.sidebar-mini.sidebar-collapse .adm-logout-btn {
    display: none !important;
}

/* ── Sidebar oculto en móvil (sin sidebar-open) ── */
@media (max-width: 991.98px) {
    body:not(.sidebar-open) .main-sidebar {
        left: -250px !important;
        transform: translateX(0) !important;
        box-shadow: none !important;
    }
    body.sidebar-open .main-sidebar {
        left: 0 !important;
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.30) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BOTÓN NUEVO — estilo compacto moderno
═══════════════════════════════════════════════════════════════ */
.ap-btn-nuevo {
    background: linear-gradient(135deg, #16a34a, #059669) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 8px 18px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 10px rgba(22,163,74,0.25) !important;
    transition: all 0.18s ease !important;
    flex-shrink: 0 !important;
}
.ap-btn-nuevo:hover, .ap-btn-nuevo:focus {
    background: linear-gradient(135deg, #15803d, #047857) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(22,163,74,0.35) !important;
    transform: translateY(-1px) !important;
}

/* ══════════════════════════════════════════════════════════
   DATATABLES PAGINACIÓN — bloque único definitivo
   Números: sin borde. Activo: verde. Prev/Next: sin borde.
══════════════════════════════════════════════════════════ */

/* Contenedor ul — sin gaps (usando div. para ganar a DataTables) */
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    gap: 0 !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
}
/* li — sin margen propio */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item {
    margin: 0 !important;
    padding: 0 !important;
}
/* Botón individual — sobreescribe Bootstrap padding y margin */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item a.page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item span.page-link {
    border: 0 !important;
    background: transparent !important;
    color: #374151 !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin-left: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-family: 'Inter', sans-serif !important;
    box-shadow: none !important;
    line-height: 1 !important;
    transition: background 0.15s !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.active a.page-link {
    background: #16a34a !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(22,163,74,.22) !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item:not(.active):not(.disabled) a.page-link:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled a.page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item.disabled span.page-link {
    opacity: .35 !important;
    pointer-events: none !important;
}
/* Bootstrap border-radius reset en primer/último */
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item:first-child a.page-link,
div.dataTables_wrapper div.dataTables_paginate ul.pagination li.page-item:last-child a.page-link {
    border-radius: 8px !important;
}

/* ── Botón eliminar (outlined rojo) ── */
.ap-btn-delete {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #dc2626 !important;
    border: 1.5px solid #fecaca !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}
.ap-btn-delete:hover, .ap-btn-delete:focus {
    background: #fef2f2 !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
    box-shadow: 0 2px 8px rgba(220,38,38,.18) !important;
}
/* ── Botón toggle / visibilidad (outlined ámbar) ── */
.ap-btn-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    color: #d97706 !important;
    border: 1.5px solid #fde68a !important;
    border-radius: 8px !important;
    font-size: 0.78rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
}
.ap-btn-toggle:hover, .ap-btn-toggle:focus {
    background: #fffbeb !important;
    border-color: #d97706 !important;
    color: #b45309 !important;
    box-shadow: 0 2px 8px rgba(217,119,6,.18) !important;
}
/* Botón info/acción secundaria — ícono azul (sin texto) */
.ap-btn-info {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(37,99,235,0.10) !important;
}
.ap-btn-info:hover, .ap-btn-info:focus {
    background: #2563eb !important;
    color: #fff !important;
    border-color: #2563eb !important;
    box-shadow: 0 3px 10px rgba(37,99,235,0.28) !important;
}
.ap-btn-info i { font-size: 0.78rem; }
.ap-btn-success {
    background: #f0faf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(22,163,74,0.10) !important;
}
.ap-btn-success:hover, .ap-btn-success:focus {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
    box-shadow: 0 3px 10px rgba(22,163,74,0.28) !important;
}
.ap-btn-success i { font-size: 0.78rem; }

/* ── DataTables: botón responsive expandir/colapsar ──────── */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    top: 50% !important;
    left: 6px !important;
    transform: translateY(-50%) !important;
    content: '' !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(22,163,74,0.45) !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
        linear-gradient(135deg, #1d6b38, #34d399) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    box-shadow: 0 2px 8px rgba(15,23,42,0.30) !important;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
        #0f172a !important;
}

/* ══════════════════════════════════════════
   LOGIN PAGE — www/index.php
   Pantalla de autenticación (no AdminLTE)
══════════════════════════════════════════ */

@keyframes loginSlideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginSlideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginPopIn {
    0%   { opacity: 0; transform: scale(0.6) rotate(-6deg); }
    70%  { transform: scale(1.05) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes loginPulse {
    0%, 100% { filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255,255,255,0)); }
    50%      { filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
}
@keyframes loginFloatOrb {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.04); }
}
@keyframes loginDrawLine {
    from { width: 0; }
    to   { width: 48px; }
}
@keyframes loginFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes loginToastIn {
    from { opacity: 0; transform: translateX(120%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes loginToastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(120%); }
}
@keyframes loginProgress {
    from { width: 100%; }
    to   { width: 0%; }
}

body.login-page {
    font-family: 'Inter', sans-serif;
    height: 100vh;
    display: flex;
    overflow: hidden;
    background: #f1f5f9;
    margin: 0;
    padding: 0;
}
body.login-page * { box-sizing: border-box; }

.login-brand {
    width: 42%;
    background: linear-gradient(145deg, #0c4a6e 0%, #0369a1 55%, #0ea5e9 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 48px;
    position: relative;
    overflow: hidden;
    animation: loginSlideInLeft 0.65s cubic-bezier(.22,.68,0,1.2) both;
}
.login-brand .orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}
.login-brand .orb-1 { width: 420px; height: 420px; bottom: -150px; right: -150px; animation: loginFloatOrb 7s ease-in-out infinite; }
.login-brand .orb-2 { width: 260px; height: 260px; top: -90px; left: -90px; animation: loginFloatOrb 9s ease-in-out infinite 1s; }
.login-brand .orb-3 { width: 140px; height: 140px; top: 40%; right: 12%; animation: loginFloatOrb 6s ease-in-out infinite 2s; }

.brand-inner { z-index: 1; text-align: center; }
.brand-logo-wrap {
    width: 200px; height: 130px;
    margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    animation: loginPopIn 0.8s cubic-bezier(.22,.68,0,1.3) 0.3s both;
}
.brand-logo-wrap img {
    width: 100%; height: 100%; object-fit: contain;
    animation: loginPulse 3.5s ease-in-out 1.2s infinite;
}
.brand-name {
    font-size: 36px; font-weight: 800; color: #fff;
    letter-spacing: -1px; line-height: 1;
    animation: loginFadeUp 0.6s ease 0.7s both;
}
.brand-dot { color: #7dd3fc; }
.brand-sub {
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: rgba(255,255,255,0.55); margin-top: 6px;
    animation: loginFadeUp 0.6s ease 0.85s both;
}
.brand-divider {
    height: 3px; background: rgba(255,255,255,0.35);
    border-radius: 2px; margin: 22px auto; width: 0;
    animation: loginDrawLine 0.5s ease 1.1s forwards;
}
.brand-desc {
    font-size: 13.5px; color: rgba(255,255,255,0.5);
    line-height: 1.7; max-width: 270px;
    animation: loginFadeUp 0.6s ease 1s both;
}

.login-form-wrap {
    flex: 1; display: flex;
    align-items: center; justify-content: center;
    background: #f1f5f9; padding: 40px;
    overflow-y: auto;
    animation: loginSlideInRight 0.65s cubic-bezier(.22,.68,0,1.2) both;
}
.login-card {
    width: 100%; max-width: 400px;
    background: #fff; border-radius: 18px;
    padding: 48px 40px 36px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.06), 0 12px 40px -4px rgba(0,0,0,0.1);
}
.login-card::before {
    content: ''; display: block; height: 3px;
    background: linear-gradient(90deg, #0369a1, #0ea5e9);
    border-radius: 3px 3px 0 0;
    margin: -48px -40px 40px;
}
.login-greeting {
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 2.5px; text-transform: uppercase;
    color: #0369a1; margin-bottom: 6px;
    animation: loginFadeUp 0.5s ease 0.25s both;
}
.login-title {
    font-size: 26px; font-weight: 700;
    color: #0f172a; margin-bottom: 4px;
    animation: loginFadeUp 0.5s ease 0.35s both;
}
.login-subtitle {
    font-size: 13.5px; color: #64748b; margin-bottom: 32px;
    animation: loginFadeUp 0.5s ease 0.42s both;
}
.login-card .form-field { margin-bottom: 20px; }
.login-card .form-field:nth-child(1) { animation: loginFadeUp 0.5s ease 0.5s both; }
.login-card .form-field:nth-child(2) { animation: loginFadeUp 0.5s ease 0.6s both; }
.login-card .form-field label {
    display: block; font-size: 12px; font-weight: 600;
    color: #374151; margin-bottom: 7px; letter-spacing: 0.3px;
}
.login-card .input-wrap { position: relative; }
.login-card .input-wrap .icon-left {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: #94a3b8;
    font-size: 14px; pointer-events: none; transition: color 0.2s;
}
.login-card .input-wrap:focus-within .icon-left { color: #0369a1; }
.login-card .input-wrap input {
    width: 100%; padding: 12px 14px 12px 42px;
    border: 1.5px solid #e2e8f0; border-radius: 10px;
    font-size: 14px; color: #1e293b; background: #f8fafc;
    outline: none; transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}
.login-card .input-wrap input:focus {
    border-color: #0369a1; background: #fff;
    box-shadow: 0 0 0 3px rgba(3,105,161,0.11);
}
.login-card .input-wrap input::placeholder { color: #c0ccda; }
.login-card .eye-btn {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%); background: none;
    border: none; cursor: pointer; color: #94a3b8;
    font-size: 14px; padding: 4px; transition: color 0.15s;
}
.login-card .eye-btn:hover { color: #0369a1; }
.login-card .btn-wrap { animation: loginFadeUp 0.5s ease 0.72s both; }
.btn-login {
    width: 100%; padding: 13px;
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    color: #fff; font-size: 15px; font-weight: 600;
    border: none; border-radius: 10px; cursor: pointer;
    transition: all 0.2s; font-family: 'Inter', sans-serif;
    letter-spacing: 0.3px; margin-top: 8px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(3,105,161,0.38); }
.btn-login:active { transform: translateY(0); box-shadow: none; }
.login-footer {
    text-align: center; margin-top: 28px;
    font-size: 11.5px; color: #94a3b8;
    animation: loginFadeUp 0.5s ease 0.85s both;
}
.login-footer .ver { font-weight: 600; color: #475569; }

.login-toast-wrap { position: fixed; top: 24px; right: 24px; z-index: 9999; }
.login-toast {
    display: flex; align-items: flex-start; gap: 12px;
    background: #fff; border-radius: 12px;
    padding: 14px 16px; min-width: 300px; max-width: 380px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    border-left: 4px solid #dc2626;
    animation: loginToastIn 0.4s cubic-bezier(.22,.68,0,1.2) both;
    position: relative; overflow: hidden;
}
.login-toast.login-toast--warning { border-left-color: #d97706; }
.login-toast.hide { animation: loginToastOut 0.35s ease forwards; }
.login-toast .toast-icon {
    width: 36px; height: 36px; background: #fef2f2;
    border-radius: 8px; display: flex;
    align-items: center; justify-content: center;
    flex-shrink: 0; color: #dc2626; font-size: 16px;
}
.login-toast.login-toast--warning .toast-icon { background: #fffbeb; color: #d97706; }
.login-toast .toast-body { flex: 1; }
.login-toast .toast-title { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 2px; }
.login-toast .toast-msg { font-size: 12.5px; color: #64748b; line-height: 1.4; }
.login-toast .toast-close {
    background: none; border: none; cursor: pointer;
    color: #94a3b8; font-size: 14px; padding: 2px;
    flex-shrink: 0; transition: color 0.15s;
}
.login-toast .toast-close:hover { color: #475569; }
.login-toast .toast-progress {
    position: absolute; bottom: 0; left: 0;
    height: 3px; background: #dc2626;
    border-radius: 0 0 0 8px;
    animation: loginProgress 4s linear forwards; opacity: 0.5;
}
.login-toast.login-toast--warning .toast-progress { background: #d97706; }

/* ── Símbolos flotantes lab e imagen ── */
@keyframes lfFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-12px) rotate(4deg); }
}
@keyframes lfFloatAlt {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-8px) rotate(-3deg); }
}
@keyframes lfFadeIn {
    from { opacity: 0; transform: scale(0.6); }
    to   { opacity: 1; transform: scale(1); }
}

.lf-sym {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1.5px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.88);
    pointer-events: none;
    opacity: 0;
}
.lf-sym i { line-height: 1; }

.lf-sym--lg { width: 64px; height: 64px; font-size: 24px; }
.lf-sym--md { width: 50px; height: 50px; font-size: 19px; }
.lf-sym--sm { width: 38px; height: 38px; font-size: 14px; }

.lf-sym--1 { top: 8%;     left: 8%;   animation: lfFadeIn .5s ease 1.2s forwards, lfFloat    6.5s ease-in-out 1.7s infinite; }
.lf-sym--2 { top: 6%;     right: 10%; animation: lfFadeIn .5s ease 1.5s forwards, lfFloatAlt 8.0s ease-in-out 2.0s infinite; }
.lf-sym--3 { top: 36%;    left: 5%;   animation: lfFadeIn .5s ease 1.8s forwards, lfFloat    7.0s ease-in-out 2.3s infinite; }
.lf-sym--4 { top: 34%;    right: 7%;  animation: lfFadeIn .5s ease 2.1s forwards, lfFloatAlt 6.0s ease-in-out 2.6s infinite; }
.lf-sym--5 { bottom: 20%; left: 9%;   animation: lfFadeIn .5s ease 2.4s forwards, lfFloat    9.0s ease-in-out 2.9s infinite; }
.lf-sym--6 { bottom: 16%; right: 8%;  animation: lfFadeIn .5s ease 2.7s forwards, lfFloatAlt 7.5s ease-in-out 3.2s infinite; }
.lf-sym--7 { bottom: 36%; left: 3%;   animation: lfFadeIn .5s ease 3.0s forwards, lfFloat    5.5s ease-in-out 3.5s infinite; }
.lf-sym--8 { top: 60%;    right: 4%;  animation: lfFadeIn .5s ease 3.3s forwards, lfFloatAlt 8.5s ease-in-out 3.8s infinite; }

@media (max-width: 768px) {
    body.login-page { flex-direction: column; overflow-y: auto; height: 100vh; }
    .login-brand { width: 100%; min-height: auto; padding: 32px 24px 24px; flex-shrink: 0; }
    .login-brand .orb { display: none; }
    .lf-sym { display: none; }
    .brand-logo-wrap { width: 140px; height: 90px; margin-bottom: 12px; }
    .brand-name { font-size: 26px; margin-bottom: 0; }
    .brand-sub, .brand-divider, .brand-desc { display: none !important; }
    .login-form-wrap { flex: none; width: 100%; padding: 0 20px 24px; margin-top: -20px; background: transparent; align-items: flex-start; justify-content: flex-start; }
    .login-card { padding: 32px 28px 28px; border-radius: 16px; max-width: 100%; }
    .login-card::before { margin: -32px -28px 24px; }
    .login-greeting { margin-bottom: 2px; }
    .login-title { font-size: 24px; margin-bottom: 4px; }
    .login-subtitle { margin-bottom: 20px; font-size: 13px; }
}