/* ==========================================================================
   PALMED PREMIUM UI v2 - UNIFIED & OPTIMIZED (2026)
   ========================================================================== */

:root {
    --palmed-primary: #0A5FD8;
    --palmed-primary-dark: #0849ad;
    --palmed-secondary: #00A86B;
    --palmed-secondary-dark: #008f5b;
    --palmed-white: #FFFFFF;
    --palmed-bg: #f7f9fc;
    --palmed-text: #1a2b3c;
    --palmed-text-muted: #6b7c93;
    --palmed-border: #d7e1ee;
    --palmed-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    --palmed-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.08);
    --palmed-radius: 12px;
    --palmed-radius-lg: 16px;
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--palmed-bg);
    color: var(--palmed-text);
    margin: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Algunos elementos (p.ej. la barra "Guardar consulta") usan un margen
       negativo a propósito para verse de borde a borde dentro de su tarjeta;
       sin esto, ese pequeño desborde intencional podía generar una barra de
       desplazamiento horizontal en toda la página en ciertos anchos. */
    overflow-x: hidden;
}

/* ==========================================================================
   Auth Pages
   ========================================================================== */
.auth-wrapper {
    min-height: 100vh;
    /* 100vh en Safari móvil incluye el espacio detrás de la barra de
       direcciones, que se puede tapar/destapar al hacer scroll: eso deja
       contenido cubierto o "recortado" según el momento. 100dvh usa el
       alto real visible; se pone después para que los navegadores viejos
       (que no entienden dvh) simplemente ignoren esta línea y se queden
       con el 100vh de arriba. */
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0A5FD8 0%, #00A86B 100%);
    padding: 2rem;
}

.auth-card {
    background: var(--palmed-white);
    border-radius: var(--palmed-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    padding: 3rem;
    width: 100%;
    max-width: 440px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo h1 {
    color: var(--palmed-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.auth-logo p {
    color: var(--palmed-text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* ==========================================================================
   Layout & Sidebar (Premium Dark Theme)
   ========================================================================== */
.app-layout {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh; /* ver nota de Safari móvil en .auth-wrapper arriba */
}

.sidebar {
    width: 260px;
    background: linear-gradient(180deg, #0A5FD8 0%, #0849ad 100%);
    padding: 1.5rem 0;
    position: fixed;
    height: 100vh;
    height: 100dvh; /* ver nota de Safari móvil en .auth-wrapper arriba */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100;
}

.sidebar-brand {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 1rem;
}

.sidebar-brand h2 {
    color: var(--palmed-white);
    font-size: 1.25rem;
    margin: 0;
    font-weight: 700;
}

.sidebar-brand small {
    color: rgba(255, 255, 255, 0.70);
    font-size: 0.75rem;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    margin: 4px 12px;
    border-radius: 12px;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--palmed-white);
    backdrop-filter: blur(10px);
}

.main-content {
    flex: 1;
    /* .app-layout es flex (fila). Por defecto, un elemento flex nunca se
       encoge más allá del ancho de su contenido "no partible" más largo
       (min-width:auto implícito) — si una palabra sin espacios es más ancha
       que la pantalla, TODO el panel se ensancha para hacerle espacio en
       vez de dejar que esa palabra se parta dentro de su tarjeta. Con
       min-width:0 el panel sí se puede encoger al ancho real de la
       pantalla, y entonces overflow-wrap (abajo) puede hacer su trabajo. */
    min-width: 0;
    margin-left: 260px;
    padding: 2rem;
    background: var(--palmed-bg);
    /* Texto clínico largo y sin espacios (diagnósticos, notas, folios extra)
       puede desbordarse de su tarjeta sin que esto afecte el scrollWidth del
       contenedor (el navegador simplemente lo deja "sangrar" visualmente
       hacia la derecha). Con overflow-x:hidden en body, ese sobrante queda
       oculto en vez de recortado con una barra de scroll. Se hereda a todo
       el contenido del panel para no depender de arreglos por componente.
       OJO: solo overflow-wrap (parte SOLO si no hay otra forma de evitar el
       desborde) — "word-break: break-word" es más agresivo y le indica al
       navegador que CUALQUIER palabra se puede partir en cualquier punto.
       Eso hacía que las tablas encogieran sus columnas letra por letra en
       vez de activar el scroll horizontal (.table-responsive), y partía
       palabras cortas de un botón a la mitad ("Borra" + "dor"). */
    overflow-wrap: break-word;
}

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    color: var(--palmed-text);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
    background: var(--palmed-white);
    border-radius: var(--palmed-radius);
    box-shadow: var(--palmed-shadow);
    overflow: hidden;
    transition: all 0.25s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--palmed-shadow-hover);
}

.card-header {
    padding: 1.25rem 1.5rem;
    background: var(--palmed-white);
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-body {
    padding: 1.5rem;
}

.stat-card {
    background: var(--palmed-white);
    border-radius: var(--palmed-radius);
    padding: 1.5rem;
    box-shadow: var(--palmed-shadow);
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-2px);
}

.stat-card .stat-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--palmed-primary);
    line-height: 1;
}

.stat-card .stat-label {
    color: var(--palmed-text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.stat-card.accent .stat-value {
    color: var(--palmed-secondary);
}

/* ==========================================================================
   Buttons (Standard & Global Actions)
   ========================================================================== */
.btn-palmed {
    background: var(--palmed-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    box-shadow: 0 8px 20px rgba(10, 95, 216, 0.20);
    transition: all 0.20s ease;
}

.btn-palmed:hover {
    background: var(--palmed-primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(10, 95, 216, 0.30);
}

.btn-palmed-secondary {
    background: var(--palmed-secondary);
    box-shadow: 0 8px 20px rgba(0, 168, 107, 0.20);
}

.btn-palmed-secondary:hover {
    background: var(--palmed-secondary-dark);
    box-shadow: 0 12px 25px rgba(0, 168, 107, 0.30);
}

.btn-palmed-outline {
    background: var(--palmed-white);
    color: var(--palmed-primary);
    border: 1px solid var(--palmed-border);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    transition: all 0.20s ease;
}

.btn-palmed-outline:hover {
    background: var(--palmed-primary);
    color: white;
    border-color: var(--palmed-primary);
    transform: translateY(-1px);
}

.btn-palmed-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
    min-height: 56px;
}

/* Small Buttons & Action Overrides */
.btn-palmed-sm {
    height: 38px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}

.btn-palmed-outline.btn-palmed-sm {
    background: #ffffff;
    border: 1px solid #dbe3ef;
    color: #0A5FD8;
}

.btn-palmed-outline.btn-palmed-sm:hover {
    background: #0A5FD8;
    color: white;
    border-color: #0A5FD8;
}

/* Global Table Action Buttons Overrides */
td a,
.actions a,
.action-buttons a,
.table-palmed a.btn-palmed-outline,
.table-palmed a.btn-palmed,
.table-palmed .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px;
    height: 40px;
    padding: 0 16px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all .25s ease !important;
    margin-right: 6px;
}

.table-palmed a.btn-palmed-outline {
    background: #ffffff !important;
    border: 1px solid #dbe4f0 !important;
    color: #0A5FD8 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

.table-palmed a.btn-palmed-outline:hover {
    background: #0A5FD8 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(10,95,216,.20);
}

.table-palmed a.btn-palmed {
    background: linear-gradient(135deg, #0A5FD8, #2563eb) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 10px 20px rgba(10,95,216,.20);
}

.table-palmed a.btn-palmed:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px rgba(10,95,216,.30);
}

/* ==========================================================================
   Forms
   ========================================================================== */
.form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--palmed-text);
    margin-bottom: 0.5rem;
}

.form-control,
.form-select {
    border: 1px solid var(--palmed-border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    min-height: 48px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--palmed-primary);
    box-shadow: 0 0 0 4px rgba(10, 95, 216, 0.10);
    outline: none;
}

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

/* ==========================================================================
   Tables Layout
   ========================================================================== */
.table-palmed {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table-palmed thead th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-size: 12px;
    font-weight: 700;
    color: var(--palmed-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

.table-palmed td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    font-size: 14px;
}

.table-palmed tbody tr {
    transition: all 0.15s ease;
}

.table-palmed tbody tr:hover {
    background: #f0f7ff;
    transform: scale(1.002);
}

/* ==========================================================================
   Badges & Alerts
   ========================================================================== */
.badge,
.badge-palmed {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-scheduled { background: #e0f0ff; color: #0A5FD8; }
.badge-confirmed { background: #d4f5e9; color: #00A86B; }
.badge-completed { background: #e8e8e8; color: #555; }
.badge-cancelled { background: #ffe0e0; color: #d32f2f; }
.badge-draft { background: #fff3cd; color: #856404; }

.alert-palmed {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-success {
    background: #d4f5e9;
    color: #006b45;
    border: 1px solid #00A86B;
}

.alert-error {
    background: #ffe0e0;
    color: #b71c1c;
    border: 1px solid #ef5350;
}

.alert-info {
    background: #eaf4fb;
    color: #0b4a7a;
    border: 1px solid #b9dcf5;
}

/* Toast flotante (esquina) para confirmaciones sin sección asociada — nunca
   se pinta arriba del contenido de la página. La posición fija va en el CSS
   (no solo por JS) para que se vea incluso si JavaScript falla por cualquier
   motivo — ver la nota en views/layouts/app.php. */
.alert-palmed.alert-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 280px;
    max-width: 360px;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    animation: palmed-toast-in .25s ease;
}
@keyframes palmed-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Alerta inline insertada dentro de la sección donde ocurrió la acción
   (ej. al guardar un cupón). Ver Palmed.showSectionAlert(). */
.alert-palmed.alert-inline-section {
    margin: 0 0 1rem;
}

/* ==========================================================================
   Medical & Consultation Components
   ========================================================================== */
.consultation-section {
    margin-bottom: 1.5rem;
}

.consultation-section .section-header {
    background: linear-gradient(90deg, var(--palmed-primary), var(--palmed-secondary));
    color: white;
    padding: 0.875rem 1.25rem;
    border-radius: var(--palmed-radius) var(--palmed-radius) 0 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.consultation-section .section-body {
    background: var(--palmed-white);
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 var(--palmed-radius) var(--palmed-radius);
    padding: 1.25rem;
}

/* La barra "Guardar consulta" queda pegada al fondo de la pantalla a propósito
   (position: sticky) para que siempre esté a la mano mientras se llena un
   formulario largo — eso está bien. Lo que faltaba era reservarle espacio en
   blanco al final del formulario: sin esto, la barra queda flotando ENCIMA
   del último bloque de contenido en vez de sobre un espacio vacío, y por eso
   el texto se veía tapado/encimado. En pantallas angostas la barra ocupa más
   líneas (los botones bajan de línea), así que necesita más espacio reservado. */
#consultation-form {
    padding-bottom: 90px;
}
@media (max-width: 900px) {
    #consultation-form {
        padding-bottom: 170px;
    }
}

.consultation-toolbar {
    position: sticky;
    bottom: 0;
    background: var(--palmed-white);
    border-top: 2px solid #e2e8f0;
    padding: 1rem 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

/* Autocomplete Lists (ICD-10 & Patients) */
.icd10-results,
.patient-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
    display: none;
}

/* Scroll con inercia en Safari/iOS para cualquier tabla o panel que se
   desplace: sin esto, el arrastre con el dedo puede sentirse "trabado" o
   no iniciar el scroll en el primer toque en algunos iPhone. */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.patient-search-results {
    max-height: 250px;
}

.icd10-results.show,
.patient-search-results.show { 
    display: block; 
}

.icd10-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #e2e8f0;
}

.icd10-result-item:hover {
    background: rgba(10, 95, 216, 0.06);
}

#med_search_results {
    background: #ffffff !important;
    color: #102033 !important;
    border: 1px solid #b8c7d9 !important;
    box-shadow: 0 14px 34px rgba(13, 43, 69, 0.18) !important;
}

#med_search_results > div {
    background: #ffffff !important;
    color: #102033 !important;
}

#med_search_results > div:hover {
    background: #eef6ff !important;
}

#med_search_results small,
#med_search_results .text-muted {
    color: #536575 !important;
}

/* Signature Pad */
.signature-pad-wrapper {
    border: 2px dashed #e2e8f0;
    border-radius: 10px;
    background: #fafbfc;
}

.signature-pad-wrapper canvas {
    width: 100%;
    height: 150px;
    cursor: crosshair;
}

/* Quick Actions */
.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--palmed-white);
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    border-radius: 18px;
    text-decoration: none;
    color: var(--palmed-text);
    transition: all 0.2s ease;
    min-height: 120px;
}

.quick-action-btn:hover {
    color: var(--palmed-primary);
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(10, 95, 216, 0.15);
}

.quick-action-btn .icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   Responsive Queries
   ========================================================================== */
@media (max-width: 1200px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .auth-card {
        padding: 2rem 1.5rem;
    }

    .consultation-toolbar {
        flex-direction: column;
    }

    .consultation-toolbar .btn-palmed {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Móvil: red de seguridad general. Varias filas del panel (formulario de
   consulta, agenda, etc.) usan "d-flex" de Bootstrap sin permitir que sus
   elementos bajen de línea. En un celular eso no recorta contenido: hace que
   TODA la página se vea reducida/en zoom-out (el navegador agranda el
   "viewport" para que quepa esa sola fila), y por eso se ve todo chiquito y
   hay que hacer zoom para leer o tocar cualquier botón. Con esta regla,
   cualquier fila flex del panel baja de línea en vez de forzar el ancho de
   toda la página. Se puede excluir puntualmente con la clase "flex-nowrap".
   ========================================================================== */
@media (max-width: 1200px) {
    .main-content .d-flex:not(.flex-nowrap) {
        flex-wrap: wrap;
    }
    .main-content .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .main-content .btn-palmed,
    .main-content .btn-palmed-outline,
    .main-content .btn-palmed-secondary {
        min-height: 40px;
    }
    /* Formularios en fila (row/col de Bootstrap) también deben poder apilarse:
       algunas vistas fijan un ancho mínimo en columnas o inputs que, sumado,
       no cabe entre 768px y 992px (la franja justo antes de que el menú lateral
       se convierta en el ícono ☰), y ahí es donde más se ve texto encimado o
       botones recortados. */
    .main-content input[style*="min-width"],
    .main-content select[style*="min-width"],
    .main-content div[style*="min-width"] {
        min-width: 0 !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .main-content .row > [class*="col-"] {
        margin-bottom: 4px;
    }
}

/* Print optimization: reduce vertical spacing and avoid large page breaks */
@media print {
    body, .main-content { background: white !important; color: #000 !important; }
    .card, .kpi-card, .stat-card { box-shadow: none !important; border: none !important; }
    .card-body { padding: 6px !important; }
    .card-header { padding: 6px 8px !important; font-size: 12px !important; }
    .consultation-section { margin-bottom: 4px !important; }
    .consultation-section .section-header { padding: 6px 8px !important; font-size: 12px !important; }
    .consultation-section .section-body { padding: 6px 8px !important; }
    .table-palmed td, .table-palmed thead th { padding: 4px 6px !important; font-size: 10.5px !important; }
    .page-break { page-break-after: always; }
    img { max-width: 100% !important; height: auto !important; }
    .consultation-toolbar, .sidebar, .top-bar { display: none !important; }
    @page { margin: 10mm; }
}