/* ============================================================
   ESTILOS PERSONALIZADOS - Farmacia MH
   Corrige la imagen de fondo y mejora la legibilidad
   ============================================================ */

/* Elimina la imagen de fondo del login y del panel */
.bg {
    background-image: none !important;
    background-color: #f0f2f5 !important;
}

/* Fondo general del panel */
body {
    background-color: #f0f2f5 !important;
}

/* Área de contenido principal */
.content.bg {
    background-color: #f0f2f5 !important;
    background-image: none !important;
}

/* Tarjetas con leve sombra y esquinas redondeadas para mejor lectura */
.card {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
}

/* Contenedor del login (compatibilidad con vistas antiguas) */
.col-md-4.mx-auto {
    margin-top: 60px;
}

/* ============================================================
   LOGIN MEJORADO - Farmacia MH
   Compacto y responsive (27" -> móvil). Tarjeta centrada.
   ============================================================ */

/* Fondo del login con imagen y degradado de protección.
   Se mantiene fijo para evitar "saltos" al hacer scroll en móvil. */
.login-page {
    min-height: 100vh;
    background-image: url('../img/fondo.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Capa oscura para que el formulario resalte sobre la imagen */
.login-page::before {
    content: '';
    position: fixed;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 25, 55, 0.72), rgba(10, 25, 55, 0.72));
    z-index: 0;
}

/* Contenedor que centra la tarjeta en el centro de la pantalla.
   Usa el 100% de la altura visible para quedar perfecto al medio. */
.login-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 24px);
    padding: 12px;
    z-index: 1;
}

/* Tarjeta del login: ancho fluido, más ancha en pantallas grandes y
   más angosta en móviles, nunca supera el alto de su contenedor. */
.login-card {
    width: min(100%, 370px);
    max-height: calc(100vh - 24px);
    border: none;
    border-radius: 1rem;
    box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.35);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.4);
}

/* Relleno compacto: se reduce en pantallas pequeñas */
.login-card-body {
    padding: 1.1rem 1.25rem 1rem;
}

/* Elemento de marca (logo + título) - compacto */
.login-brand {
    text-align: center;
    margin-bottom: 0.65rem;
}

/* Logo fluido según el espacio disponible */
.login-logo {
    width: clamp(62px, 4.25rem, 72px);
    height: clamp(62px, 4.25rem, 72px);
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    padding: 6px;
    box-shadow: 0 0 0 4px rgba(0, 150, 136, 0.25), 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
    margin-bottom: 0.3rem;
}

.login-title {
    font-size: clamp(1.1rem, 1.4rem, 1.5rem);
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.1rem;
}

.login-subtitle {
    color: #6c757d;
    font-size: clamp(0.75rem, 0.85rem, 0.9rem);
    margin-bottom: 0;
}

/* Área de alertas */
.login-alert {
    margin-bottom: 0.5rem;
}

.login-alert .alert {
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
}

/* Etiquetas del formulario */
.login-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.15rem;
}

/* Campos con icono - más bajos y compactos.
   Se añade espacio a la izquierda para que el cursor no quede
   pegado al icono. */
.login-card .login-input {
    height: 40px;
    border-radius: 0 0.375rem 0.375rem 0;
    padding-left: 8px;
}

.login-card #loginClave {
    border-radius: 0;
}

.login-card .login-form .form-group {
    margin-bottom: 0.65rem;
}

.login-card .input-group {
    border-radius: 0.375rem;
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.login-card .input-group:hover {
    box-shadow: 0 0.2rem 0.55rem rgba(38, 166, 154, 0.13);
}

/* Alerta de error y foco: mantiene el padding y destaca el borde */
.login-card .login-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.18);
}

/* Hace que el icono esté separado visualmente del campo (más aire) */
.login-card .input-group-prepend {
    margin-right: 0;
}

.login-card .input-group-prepend .input-group-text {
    background: transparent;
    color: #26a69a;
    border-color: #ced4da;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
    width: 42px;
    justify-content: center;
}

.login-password-toggle {
    width: 42px;
    height: 40px;
    justify-content: center;
    padding: 0;
    color: #607d8b;
    background: #ffffff;
    border-color: #ced4da;
    border-left: 0;
    border-radius: 0 0.375rem 0.375rem 0;
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
}

.login-password-toggle:hover,
.login-password-toggle:focus {
    color: #08766c;
    background: #eaf8f5;
    outline: 0;
}

.login-password-toggle:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.22);
}

/* Botón principal de ingreso (verde farmacéutico) - compacto */
.login-btn {
    display: block;
    width: 100%;
    padding: 0.52rem;
    background: linear-gradient(135deg, #26a69a, #184e3d);
    border: none;
    color: #ffffff;
    font-size: clamp(0.92rem, 1rem, 1.05rem);
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    margin-top: 0.25rem;
}

.login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba(38, 166, 154, 0.35);
    background: linear-gradient(135deg, #2bbbad, #1d6a54);
}

.login-btn i {
    margin-right: 0.4rem;
}

/* Pie de la tarjeta */
.login-card-footer {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 0.4rem 1rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.75rem;
}

/* ============================================================
   RESPONSIVE - Breakpoints del login
   ============================================================ */

/* Pantallas grandes (monitor 27"+ / escritorio amplio) */
@media (min-width: 1400px) {
    .login-card-body {
        padding: 1.2rem 1.5rem 1.05rem;
    }
    .login-card {
        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.4);
    }
}

/* Tablet / pantallas medianas */
@media (max-width: 991.98px) {
    .login-logo {
        width: 68px;
        height: 68px;
    }
}

/* Móvil en apaisado -> más compacto, ocultamos el logo */
@media (max-width: 767.98px) {
    .login-title {
        font-size: 1.25rem;
    }
    .login-card .login-input {
        height: 40px;
    }
    .login-logo {
        display: none;
    }
}

/* ==================================================================
   DASHBOARD PRINCIPAL
================================================================== */
.dashboard-page { max-width: 1500px; margin: 0 auto; }
.dashboard-welcome { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.55rem 1.7rem; margin-bottom: 1.25rem; overflow: hidden; color: #fff; border-radius: 1rem; background: linear-gradient(125deg,#102a43 0%,#185d69 58%,#159681 100%); box-shadow: 0 .8rem 2rem rgba(18,67,79,.2); }
.dashboard-welcome::after { content:''; position:absolute; width:260px; height:260px; right:-80px; top:-145px; border:38px solid rgba(255,255,255,.065); border-radius:50%; }
.dashboard-welcome > * { position:relative; z-index:1; }
.dashboard-kicker,.panel-kicker { display:block; margin-bottom:.18rem; color:#78e8d5; font-size:.67rem; font-weight:800; letter-spacing:1.25px; text-transform:uppercase; }
.dashboard-welcome h1 { margin:0 0 .2rem; color:#fff; font-size:1.55rem; font-weight:700; }
.dashboard-welcome p { margin:0; color:rgba(255,255,255,.76); font-size:.84rem; }
.dashboard-welcome-actions { display:flex; align-items:center; gap:.7rem; }
.dashboard-date { display:flex; align-items:center; gap:.45rem; padding:.55rem .75rem; white-space:nowrap; border:1px solid rgba(255,255,255,.2); border-radius:.55rem; background:rgba(6,27,38,.2); font-size:.76rem; font-weight:700; }
.dashboard-sale-btn { margin:0; padding:.62rem .95rem; color:#0d655a !important; border:0; background:#fff; box-shadow:0 .3rem .75rem rgba(0,0,0,.13); }
.dashboard-sale-btn:hover { color:#084f47 !important; transform:translateY(-1px); background:#f3fffc; }
.dashboard-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1.25rem; }
.metric-card { position:relative; display:flex; align-items:center; gap:.9rem; min-height:118px; padding:1.05rem 1.1rem; overflow:hidden; background:#fff; border:1px solid #e4ebef; border-radius:.9rem; box-shadow:0 .35rem 1rem rgba(30,62,98,.075); transition:transform .18s,box-shadow .18s; }
.metric-card:hover { transform:translateY(-2px); box-shadow:0 .65rem 1.35rem rgba(30,62,98,.12); }
.metric-card::after { content:''; position:absolute; right:-25px; top:-28px; width:85px; height:85px; border-radius:50%; background:var(--metric-soft); }
.metric-icon { display:grid; place-items:center; flex:0 0 47px; height:47px; color:var(--metric-color); background:var(--metric-soft); border-radius:13px; font-size:1.12rem; }
.metric-card > div:last-child { min-width:0; }
.metric-card span,.metric-card small { display:block; color:#7b8d98; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric-card span { margin-bottom:.25rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.45px; }
.metric-card strong { display:block; margin-bottom:.16rem; color:#203744; font-size:1.35rem; line-height:1.15; }
.metric-card small { font-size:.68rem; }
.metric-green { --metric-color:#0c927a; --metric-soft:#e5f7f2; }.metric-blue { --metric-color:#286bc0; --metric-soft:#e8f1fb; }.metric-orange { --metric-color:#d98213; --metric-soft:#fff2df; }.metric-purple { --metric-color:#7456bb; --metric-soft:#f0ebfb; }
.dashboard-panel { overflow:hidden; background:#fff; border:1px solid #e3ebef; border-radius:.9rem; box-shadow:0 .35rem 1rem rgba(30,62,98,.07); }
.dashboard-panel > header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:72px; padding:1rem 1.15rem; border-bottom:1px solid #eaf0f3; background:linear-gradient(180deg,#fff,#fafcfd); }
.dashboard-panel header h3,.dashboard-shortcuts h3 { margin:0; color:#243d4b; font-size:.98rem; font-weight:700; }
.dashboard-panel .panel-kicker,.dashboard-shortcuts .panel-kicker { color:#159681; }
.panel-icon { display:grid; place-items:center; width:38px; height:38px; color:#198f81; background:#e8f7f4; border-radius:11px; }
.dashboard-chart { position:relative; height:300px; padding:1.15rem; }.dashboard-chart-wide { height:310px; }
.chart-empty,.dashboard-empty { color:#899ba4; text-align:center; font-size:.8rem; }.chart-empty { position:absolute; inset:0; display:grid; place-items:center; }
.dashboard-empty { padding:2rem !important; }.dashboard-empty i { display:block; margin-bottom:.5rem; color:#3eb39e; font-size:1.5rem; }
.dashboard-alert-count { color:#7a8c96; font-size:.73rem; }.dashboard-alert-count b { color:#334e5d; }
.dashboard-table { box-shadow:none; border-radius:0; }.dashboard-table table { font-size:.78rem; }.dashboard-table thead th { padding:.65rem .8rem; color:#71848f; background:#f6f9fa; border:0; font-size:.67rem; letter-spacing:.4px; text-transform:uppercase; }.dashboard-table td { padding:.68rem .8rem; border-color:#edf2f4; }.dashboard-table td strong,.dashboard-table td small { display:block; }.dashboard-table td strong { color:#334b58; font-size:.78rem; }.dashboard-table td small { margin-top:.1rem; color:#94a3aa; font-size:.66rem; }
.status-pill { display:inline-block; padding:.27rem .5rem; border-radius:999px; font-size:.66rem; font-weight:700; }.status-pill.danger { color:#b4232e; background:#fdebed; }.status-pill.warning { color:#996112; background:#fff1d7; }
.panel-link { color:#168c7e; font-size:.72rem; font-weight:700; }.panel-link:hover { color:#0b655d; }.panel-link i { margin-left:.2rem; }
.recent-sales { padding:.25rem 1.1rem; }.recent-sale { display:flex; align-items:center; gap:.7rem; padding:.76rem 0; border-bottom:1px solid #edf2f4; }.recent-sale:last-child { border-bottom:0; }.recent-sale-icon { display:grid; place-items:center; flex:0 0 35px; height:35px; color:#168f80; background:#e8f7f4; border-radius:10px; }.recent-sale-main { min-width:0; flex:1; }.recent-sale-main strong,.recent-sale-main span,.recent-sale-total strong,.recent-sale-total span { display:block; }.recent-sale-main strong { overflow:hidden; color:#334b58; font-size:.78rem; white-space:nowrap; text-overflow:ellipsis; }.recent-sale-main span,.recent-sale-total span { color:#8b9ba3; font-size:.65rem; }.recent-sale-total { text-align:right; }.recent-sale-total strong { color:#16816f; font-size:.8rem; }
.dashboard-shortcuts { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.05rem 1.2rem; margin-bottom:1rem; background:#fff; border:1px solid #e3ebef; border-radius:.9rem; box-shadow:0 .3rem 1rem rgba(30,62,98,.06); }.dashboard-shortcuts nav { display:flex; flex-wrap:wrap; gap:.55rem; }.dashboard-shortcuts nav a { display:flex; align-items:center; gap:.42rem; padding:.55rem .7rem; color:#3d5663; background:#f5f9fa; border:1px solid #e0e9ed; border-radius:.55rem; font-size:.74rem; font-weight:700; transition:.17s; }.dashboard-shortcuts nav a i { color:#159681; }.dashboard-shortcuts nav a:hover { color:#fff; background:#159681; border-color:#159681; transform:translateY(-1px); }.dashboard-shortcuts nav a:hover i { color:#fff; }
@media(max-width:1199.98px){.dashboard-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:767.98px){.dashboard-welcome{align-items:flex-start;padding:1.25rem}.dashboard-welcome-actions{align-items:flex-end;flex-direction:column}.dashboard-date{font-size:.68rem}.dashboard-metrics{grid-template-columns:1fr 1fr}.metric-card{min-height:105px;padding:.85rem}.metric-icon{flex-basis:40px;height:40px}.metric-card strong{font-size:1.1rem}.dashboard-shortcuts{align-items:stretch;flex-direction:column}.dashboard-shortcuts nav a{flex:1 1 calc(50% - .55rem);justify-content:center}}
@media(max-width:520px){.dashboard-welcome-actions .dashboard-date{display:none}.dashboard-sale-btn{font-size:.72rem}.dashboard-metrics{grid-template-columns:1fr}.metric-card{min-height:98px}.dashboard-chart,.dashboard-chart-wide{height:260px}.dashboard-panel>header{align-items:flex-start}.dashboard-alert-count{max-width:105px;text-align:right}}

/* Modal profesional para códigos de barras */
.barcode-modal { border-radius: 1rem; }
.barcode-modal-header { align-items: center; padding: 1rem 1.2rem; border: 0; background: linear-gradient(135deg,#12334d,#138b7c); }
.barcode-modal-header .modal-title { margin: .12rem 0 0; color: #fff; font-size: 1.05rem; font-weight: 700; }
.barcode-modal-kicker { display: block; color: #8ff1df; font-size: .62rem; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.barcode-modal-body { padding: 1.5rem 1.25rem 1.25rem; background: #f7fafb; }
.barcode-product-icon { display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto .65rem; color: #148c7e; background: #e3f5f1; border-radius: 13px; font-size: 1.1rem; }
.barcode-product-name { margin: 0 0 .2rem; color: #243e4c; font-size: 1.1rem; font-weight: 700; }
.barcode-product-price { display: inline-block; margin: .2rem 0 1rem; padding: .28rem .65rem; color: #087668; background: #e2f6f1; border-radius: 999px; font-size: .85rem; font-weight: 800; }
.barcode-preview { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 125px; padding: 1rem 1.25rem; overflow-x: auto; background: #fff; border: 1px solid #dce6ea; border-radius: .75rem; box-shadow: 0 .4rem 1rem rgba(30,62,98,.08); }
.barcode-preview svg { display: block; max-width: 100%; height: auto; }
.barcode-help { display: block; margin-top: .85rem; color: #7a8d97; font-size: .69rem; }
.barcode-modal .modal-footer { padding: .75rem 1.1rem; border-top: 1px solid #e6edef; background: #fff; }
@media(max-width:575.98px){.barcode-modal-body{padding:1.2rem .8rem}.barcode-preview{width:100%;padding:.8rem}.barcode-modal .modal-footer{gap:.4rem}.barcode-modal .modal-footer .btn{flex:1;margin:0}}

/* Impresión masiva de etiquetas */
.barcode-bulk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; margin-bottom:.8rem; color:#304955; background:linear-gradient(135deg,#fff,#f5faf9); border:1px solid #dfe9ec; border-radius:.75rem; box-shadow:0 .25rem .7rem rgba(30,62,98,.06); }
.barcode-bulk-toolbar > div { display:flex; align-items:center; gap:.65rem; }.barcode-bulk-toolbar strong,.barcode-bulk-toolbar small { display:block; }.barcode-bulk-toolbar strong { font-size:.82rem; }.barcode-bulk-toolbar small { color:#82949d; font-size:.68rem; }.barcode-bulk-toolbar .btn { margin:0; }
.barcode-bulk-icon { display:grid; place-items:center; width:38px; height:38px; color:#168f80; background:#e5f6f2; border-radius:10px; }
.bulk-options { display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; }.bulk-option { position:relative; margin:0; cursor:pointer; }.bulk-option input { position:absolute; opacity:0; }.bulk-option > span { display:flex; align-items:center; flex-direction:column; min-height:112px; padding:1rem .7rem; text-align:center; border:1px solid #dce7eb; border-radius:.75rem; background:#fafcfd; transition:.18s; }.bulk-option i { margin-bottom:.5rem; color:#6d8792; font-size:1.2rem; }.bulk-option strong,.bulk-option small { display:block; }.bulk-option strong { color:#334d5a; font-size:.8rem; }.bulk-option small { margin-top:.18rem; color:#8a9aa2; font-size:.66rem; }.bulk-option input:checked + span { border-color:#159681; background:#eaf8f5; box-shadow:0 0 0 3px rgba(21,150,129,.1); }.bulk-option input:checked + span i,.bulk-option input:checked + span strong { color:#08766a; }
.bulk-copy-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1rem; margin-top:1rem; border:1px solid #e0e8ec; border-radius:.7rem; }.bulk-copy-row label,.bulk-copy-row small { display:block; margin:0; }.bulk-copy-row label { color:#344d59; font-size:.78rem; font-weight:700; }.bulk-copy-row small { color:#8798a0; font-size:.67rem; }.bulk-copy-row input { width:90px; text-align:center; font-weight:700; }
.bulk-sheet-info { display:flex; align-items:center; gap:.7rem; padding:.75rem .85rem; margin-top:1rem; color:#45616c; background:#eef7fb; border:1px solid #dcecf3; border-radius:.65rem; }.bulk-sheet-info > i { color:#3480a0; font-size:1.15rem; }.bulk-sheet-info strong,.bulk-sheet-info span { display:block; }.bulk-sheet-info strong { font-size:.75rem; }.bulk-sheet-info span { margin-top:.1rem; color:#76909b; font-size:.67rem; }
.barcode-product-check,#barcode_select_all { width:16px; height:16px; accent-color:#159681; cursor:pointer; }
@media(max-width:767.98px){.barcode-bulk-toolbar{align-items:stretch;flex-direction:column}.barcode-bulk-toolbar .btn{width:100%}.bulk-options{grid-template-columns:1fr}.bulk-option>span{min-height:72px;align-items:flex-start;text-align:left}.bulk-option i{margin-bottom:.3rem}.bulk-copy-row{align-items:flex-start;flex-direction:column}.bulk-copy-row input{width:100%}.bulk-barcode-modal .modal-footer{display:grid;grid-template-columns:1fr 1fr}.bulk-barcode-modal .modal-footer .btn:first-child{grid-column:1/-1}}

/* Móvil en vertical */
@media (max-width: 575.98px) {
    .login-wrapper {
        padding: 12px;
        min-height: calc(100dvh - 24px);
    }
    .login-card {
        max-height: calc(100dvh - 24px);
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3);
        border-radius: 0.9rem;
    }
    .login-card-body {
        padding: 1.25rem 1.25rem;
    }
    .login-subtitle {
        font-size: 0.8rem;
    }
}

/* Móviles muy pequeños y pantallas bajas (evita que se corte la tarjeta) */
@media (max-height: 500px) {
    .login-wrapper,
    .login-card {
        overflow-y: auto;
    }
    .login-input {
        height: 40px;
    }
    .login-btn {
        padding: 0.55rem;
    }
}

/* Evita que las imágenes de previsualización queden distorsionadas */
.img-thumbnail {
    max-height: 140px;
    object-fit: contain;
}

/* Tablas con mejor contraste sobre fondo claro */
.table {
    background-color: #ffffff;
}

.table thead.thead-dark th {
    background-color: #343a40;
    color: #ffffff;
}

/* Notificaciones de alerta más visibles */
.alert {
    border-radius: 0.35rem;
}

/* ============================================================
   BACKEND PROFESIONAL - Farmacia MH
   Panel responsive desde 27" hasta móvil
   ============================================================ */

/* Paleta de marca compartida con el login */
:root {
    --fmh-teal: #26a69a;
    --fmh-teal-dark: #00695c;
    --fmh-sidebar-from: #0c3b37;
    --fmh-sidebar-to: #123a44;
    --fmh-surface: #f4f6f9;
}

/* ------------------------------------------------------------------
   LAYOUT GENERAL
------------------------------------------------------------------- */
body {
    background-color: var(--fmh-surface) !important;
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.925rem;
}

.content {
    background-color: var(--fmh-surface) !important;
    background-image: none !important;
}

.content .container-fluid {
    padding-left: 18px;
    padding-right: 18px;
}

/* ==================================================================
   SIDEBAR (barra lateral) - Ultra compacto y profesional
================================================================== */

@media (min-width: 992px) {
    .sidebar {
        width: 230px !important;
    }
    .main-panel {
        width: calc(100% - 230px) !important;
    }
    .navbar.fixed-top {
        width: 100% !important;
    }
}

/* Desactivar cualquier overlay o imagen de fondo por defecto de Material */
.sidebar::after,
.sidebar::before,
.sidebar .sidebar-background {
    display: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

.sidebar {
    background-color: #0b192c !important;
    background-image: none !important;
    background: linear-gradient(180deg, #0b192c 0%, #1e3e62 70%, #0a111e 100%) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(147, 197, 253, 0.12);
    overflow-x: hidden !important;
}

/* Zona de marca: logo + texto (Gradiente Azul Real / Noche) */
.sidebar .logo,
.sidebar .logo-mini {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
    min-height: 54px !important;
    padding: 0.5rem 1rem !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.sidebar .logo a.logo-normal {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #ffffff;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.sidebar-logo {
    height: 32px;
    width: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: #ffffff;
    padding: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease;
}

.sidebar .logo a.logo-normal:hover .sidebar-logo {
    transform: scale(1.06);
}

/* Wrapper con scroll discreto totalmente contenido */
.sidebar-wrapper {
    width: 100% !important;
    padding-bottom: 1.5rem;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 197, 253, 0.2) transparent;
}

/* Tarjeta compacta de Usuario (Azul elegante) */
.sidebar-user {
    display: flex;
    align-items: center;
    margin: 8px 10px 4px 10px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(147, 197, 253, 0.2);
    border-radius: 7px;
    transition: background 0.2s ease;
}

.sidebar-user:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-user-avatar {
    position: relative;
    font-size: 1.4rem;
    color: #60a5fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.user-status-dot {
    position: absolute;
    bottom: 0px;
    right: -1px;
    width: 7px;
    height: 7px;
    background-color: #10b981;
    border: 1.5px solid #0b192c;
    border-radius: 50%;
}

.sidebar-user-details {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    line-height: 1.15;
}

.sidebar-user-name {
    color: #f8fafc;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-status {
    color: #93c5fd;
    font-size: 0.68rem;
}

/* Títulos de Categoría (Azul Cielo brillante, alta visibilidad) */
.sidebar-section-title {
    padding: 12px 14px 4px 14px;
    margin-top: 6px;
    list-style: none;
}

.sidebar-section-title span {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    color: #93c5fd !important;
    border-bottom: 1px solid rgba(147, 197, 253, 0.25);
    padding-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Lista de navegación contenida */
.sidebar .nav {
    width: 100% !important;
    padding: 0.15rem 0 0 0 !important;
    margin: 0 !important;
}

.sidebar .nav-item {
    width: 100% !important;
    margin: 1px 0;
    padding: 0 !important;
}

/* Enlaces con tonos azules */
.sidebar .nav .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0.4rem 0.75rem !important;
    font-size: 0.84rem;
    font-weight: 450;
    color: rgba(241, 245, 249, 0.88) !important;
    background: transparent !important;
    border-radius: 6px !important;
    margin: 1px 8px !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.18s ease, color 0.18s ease;
}

.sidebar .nav .nav-link:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Iconos de ancho fijo con tono azul cielo */
.sidebar .nav .nav-link i {
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    margin-right: 0 !important;
    color: rgba(147, 197, 253, 0.8) !important;
    transition: color 0.18s ease;
}

.sidebar .nav .nav-link:hover i {
    color: #60a5fa !important;
}

.sidebar .nav .nav-link p {
    flex: 1 1 auto;
    margin-bottom: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ítem Activo (Azul Real vibrante) */
.sidebar .nav .nav-item.active .nav-link,
.sidebar .nav .nav-item.active .nav-link:hover,
.sidebar .nav .nav-item.active .nav-link:focus {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    margin: 1px 8px !important;
    transform: none !important;
}

.sidebar .nav .nav-item.active .nav-link i {
    color: #ffffff !important;
}

.sidebar .nav .nav-item.active .nav-link::before,
.sidebar .nav .nav-item.active .nav-link::after {
    display: none !important;
}

/* ==================================================================
   SIDEBAR OCULTABLE
   Añadiendo .sidebar-collapsed a <body> se oculta la barra lateral
   y el contenido pasa a ocupar todo el ancho (escritorio).
   En móvil el menú lo gestiona Material (overlay con navbar-toggler).
================================================================== */
.sidebar {
    transition: transform 0.35s ease, width 0.35s ease;
}

/* ==================================================================
   SIDEBAR OCULTABLE
   Añadiendo .sidebar-collapsed a <body> se oculta la barra lateral
   y el contenido pasa a ocupar todo el ancho (escritorio).
   En móvil el menú lo gestiona Material (overlay con navbar-toggler).
================================================================== */
.sidebar {
    transition: transform 0.35s ease, width 0.35s ease;
}

@media (min-width: 992px) {
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-collapsed .main-panel {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.sidebar-collapsed .navbar.fixed-top {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }
}

/* En móvil solo se usa el toggler original de Material */
@media (max-width: 991.98px) {
    .btn-navbar {
        display: none;
    }
}

/* ==================================================================
   NAVBAR (barra superior) - estilo profesional
================================================================== */
.navbar {
    background: #ffffff !important;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e9eef3;
    min-height: 60px;
}

.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--fmh-teal-dark);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.2px;
}

.navbar .navbar-brand i {
    color: var(--fmh-teal);
    font-size: 1.3rem;
}

/* Botón hamburguesa para ocultar/mostrar el menú lateral */
.btn-navbar {
    padding: 0.4rem 0.7rem;
    line-height: 1;
    font-size: 1.1rem;
    color: var(--fmh-teal-dark);
    background: #ffffff;
    border: 1px solid #dbe3ea;
    border-radius: 0.45rem;
    margin-right: 0.75rem;
}

.btn-navbar:hover,
.btn-navbar:focus {
    color: #ffffff;
    background: var(--fmh-teal);
    border-color: var(--fmh-teal);
    box-shadow: 0 0.25rem 0.6rem rgba(38, 166, 154, 0.3);
}

/* Avatar y nombre de usuario en la barra */
.user-avatar-icon {
    font-size: 1.6rem;
    color: var(--fmh-teal);
    margin-right: 0.4rem;
}

.user-name {
    color: #212529;
    font-weight: 600;
    margin-right: 0.25rem;
}

.user-chevron {
    color: #6c757d;
    font-size: 0.8rem;
}

/* Menú desplegable de usuario */
.dropdown-menu {
    border-radius: 0.6rem;
    box-shadow: 0 0.6rem 1.25rem rgba(0, 0, 0, 0.15);
}

.user-dropdown-header {
    font-size: 0.8rem;
    color: #6c757d;
    white-space: normal;
    padding: 0.5rem 1rem;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 0.4rem;
    color: var(--fmh-teal);
}

.dropdown-item:last-child i {
    color: #dc3545;
}

/* ==================================================================
   CONTENIDO Y CARDS
================================================================== */
.card {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.08);
}

/* Cabeceras de card profesionales */
.card .card-header {
    font-weight: 600;
}

.card-header-primary,
.card-header-warning,
.card-header-success,
.card-header-danger,
.card-header-info {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
}

.card .card-title {
    font-weight: 600;
}

/* ==================================================================
   TABLAS PROFESIONALES
================================================================== */
.table-responsive {
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.06);
}

.table thead.thead-dark th {
    background-color: #263238;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: #eef7f6;
}

/* Botones pequeños dentro de las tablas */
.table .btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
}

/* ==================================================================
   BOTONES - consistencia y contraste
   Texto en negrita con sombra para que resalte sobre el fondo.
================================================================== */
.btn {
    border-radius: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
}

/* Botones con fondo sólido y texto blanco legible */
.btn-primary {
    background: linear-gradient(135deg, #26a69a, #00695c);
    border: none;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    box-shadow: 0 0.25rem 0.6rem rgba(38, 166, 154, 0.35);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2bbbad, #00796b);
    color: #ffffff;
    box-shadow: 0 0.35rem 0.8rem rgba(38, 166, 154, 0.45);
}

.btn-primary:active {
    background: #00695c;
}

.btn-success {
    background: linear-gradient(135deg, #43a047, #2e7d32);
    border: none;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.btn-success:hover {
    background: linear-gradient(135deg, #4caf50, #388e3c);
    color: #ffffff;
}

.btn-danger {
    background: linear-gradient(135deg, #e53935, #b71c1c);
    border: none;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.btn-danger:hover {
    background: #c62828;
    color: #ffffff;
}

.btn-info {
    background: linear-gradient(135deg, #26c6da, #0288d1);
    border: none;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.btn-info:hover {
    color: #ffffff;
}

.btn-warning {
    background: linear-gradient(135deg, #ffb300, #f57f17);
    border: none;
    color: #212529;
    font-weight: 600;
}

.btn-warning:hover {
    color: #ffffff;
    background: #f57f17;
}

/* ==================================================================
   FORMULARIOS - presentación limpia
================================================================== */
.form-control {
    border-radius: 0.45rem;
    padding: 0.5rem 0.75rem;
}

.form-control:focus {
    border-color: var(--fmh-teal);
    box-shadow: 0 0 0 0.2rem rgba(38, 166, 154, 0.18);
}

.form-group > label {
    font-weight: 600;
    color: #37474f;
    font-size: 0.875rem;
    margin-bottom: 0.3rem;
}

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

/* ==================================================================
   FOOTER - pie de página profesional
================================================================== */
.footer {
    background-color: transparent;
    padding: 0.75rem 1rem;
}

.footer .copyright {
    font-size: 0.82rem;
    color: #78909c;
    flex-wrap: wrap;
}

.footer .footer-brand {
    color: var(--fmh-teal-dark);
    font-weight: 700;
}

.footer .footer-brand i {
    color: var(--fmh-teal);
}

.footer-sep {
    color: #b0bec5;
    margin: 0 0.35rem;
}

.footer-user i {
    color: var(--fmh-teal);
}

/* ==================================================================
   MISCELÁNEA
================================================================== */
.alert {
    border-radius: 0.5rem;
    margin-bottom: 0.65rem;
    padding: 0.62rem 0.85rem;
    font-size: 0.84rem;
    line-height: 1.3;
    box-shadow: 0 0.2rem 0.55rem rgba(20, 42, 68, 0.08);
}

.alert.alert-dismissible {
    padding-right: 2.4rem;
}

.alert.alert-dismissible .close {
    top: 50%;
    right: 0.75rem;
    padding: 0;
    line-height: 1;
    transform: translateY(-50%);
}

.alert.alert-dismissible .close span {
    display: inline;
    max-width: none;
}

.modal-content {
    border-radius: 0.75rem;
    border: none;
}

/* Barras de desplazamiento discretas */
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-thumb {
    background: rgba(38, 166, 154, 0.4);
    border-radius: 4px;
}

*::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.04);
}

/* ==================================================================
   RESPONSIVE DEL BACKEND (27" -> móvil)
================================================================== */

/* Monitor muy amplio (27"+ / 1440px+) - contenido con más aire */
@media (min-width: 1400px) {
    .content .container-fluid {
        padding-left: 26px;
        padding-right: 26px;
    }
    .card {
        border-radius: 0.85rem;
    }
}

/* Notebook / pantallas medianas */
@media (max-width: 1199.98px) {
    .main-panel .content {
        padding: 24px 14px;
    }
}

/* Tablet / pantallas pequeñas */
@media (max-width: 991.98px) {
    .main-panel .content {
        padding: 20px 12px;
    }
    .user-name {
        display: none;
    }
    .user-chevron {
        display: none;
    }
    .user-avatar-icon {
        margin-right: 0;
    }
}

/* Móvil */
@media (max-width: 767.98px) {
    .content .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }
    .card {
        border-radius: 0.65rem;
    }
    .form-group > label {
        font-size: 0.85rem;
    }
}

/* Móvil muy estrecho: tarjetas a pantalla completa */
@media (max-width: 575.98px) {
    .content .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    .main-panel .content {
        padding: 16px 8px;
    }
    .card {
        border-radius: 0.6rem;
    }
    .card .card-body {
        padding: 1rem 1rem;
    }
    .table td,
    .table th {
        white-space: nowrap;
    }
    .footer .copyright {
        justify-content: center;
        text-align: center;
    }
}

/* ==================================================================
   CONFIGURACIÓN DE EMPRESA
================================================================== */
.config-page { max-width: 1180px; margin: 0 auto; }
.config-hero { position: relative; display: flex; align-items: center; gap: 1.15rem; padding: 1.6rem 1.8rem; margin-bottom: 1.35rem; overflow: hidden; color: #fff; border-radius: 1rem; background: linear-gradient(125deg, #0f2942 0%, #145c62 58%, #169c87 100%); box-shadow: 0 .85rem 2rem rgba(15,41,66,.22); }
.config-hero::after { content: ''; position: absolute; right: -50px; top: -85px; width: 230px; height: 230px; border: 35px solid rgba(255,255,255,.07); border-radius: 50%; }
.config-hero-icon { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 62px; height: 62px; border-radius: 17px; font-size: 1.65rem; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
.config-hero h2 { margin: .1rem 0 .2rem; color: #fff; font-size: 1.55rem; font-weight: 700; }
.config-hero p { margin: 0; color: rgba(255,255,255,.78); font-size: .88rem; }
.config-eyebrow { color: #99f6e4; font-size: .68rem; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }
.config-status { position: relative; z-index: 1; display: flex; align-items: center; gap: .45rem; margin-left: auto; padding: .48rem .72rem; white-space: nowrap; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(5,20,32,.28); border: 1px solid rgba(255,255,255,.18); }
.config-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.config-status.is-active .config-status-dot { background: #5eea9b; box-shadow: 0 0 0 4px rgba(94,234,155,.15); }
.config-status.is-inactive .config-status-dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.15); }
.config-alert .alert { border: 0; box-shadow: 0 .3rem .9rem rgba(0,0,0,.08); }
.config-panel { overflow: hidden; background: #fff; border: 1px solid #e5edf2; border-radius: .95rem; box-shadow: 0 .45rem 1.2rem rgba(30,62,98,.08); }
.config-panel-header { display: flex; align-items: center; gap: .85rem; padding: 1.15rem 1.25rem; background: linear-gradient(180deg,#fff,#f8fbfc); border-bottom: 1px solid #e9f0f4; }
.config-panel-header h4 { margin: 0 0 .15rem; color: #17324d; font-size: 1rem; font-weight: 700; }
.config-panel-header p { margin: 0; color: #7a8d9a; font-size: .77rem; }
.config-section-icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; color: #fff; font-size: 1rem; }
.config-section-icon.company { background: linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow: 0 .35rem .75rem rgba(37,99,235,.24); }
.config-section-icon.api { background: linear-gradient(135deg,#20b89e,#087b70); box-shadow: 0 .35rem .75rem rgba(32,184,158,.24); }
.config-section-icon.branding { background: linear-gradient(135deg,#7c3aed,#4f46e5); box-shadow: 0 .35rem .75rem rgba(79,70,229,.24); }
.config-section-icon.receipts { background: linear-gradient(135deg,#e87915,#b45309); box-shadow:0 .35rem .75rem rgba(180,83,9,.24); }
.receipt-config-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.85rem; }
.receipt-config-card { padding:1rem; border:1px solid #dfe8ec; border-radius:.75rem; background:#fbfdfd; }
.receipt-config-title { display:flex; align-items:center; gap:.65rem; margin-bottom:.8rem; }
.receipt-config-title>span { display:grid; place-items:center; flex:0 0 38px; height:38px; color:#fff; border-radius:10px; background:linear-gradient(135deg,#159681,#08766c); }
.receipt-config-title strong,.receipt-config-title small { display:block; }.receipt-config-title strong{color:#294551;font-size:.86rem}.receipt-config-title small{color:#85969f;font-size:.66rem}
.receipt-number-preview { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .65rem; border-radius:.5rem; background:#edf7f5; }.receipt-number-preview span{color:#6c818b;font-size:.66rem}.receipt-number-preview strong{color:#08766c;font-size:.8rem;letter-spacing:.5px}
@media(max-width:1199.98px){.receipt-config-grid{grid-template-columns:1fr}}@media(max-width:575.98px){.receipt-config-card{padding:.8rem}}
.branding-logo-preview { display:grid; place-items:center; width:140px; height:140px; margin:0 auto; overflow:hidden; border:1px solid #dce6eb; border-radius:50%; background:#f7fafb; box-shadow:0 .45rem 1.1rem rgba(30,62,98,.12); }
.branding-logo-preview img { width:100%; height:100%; padding:10px; object-fit:contain; }
.config-panel-body { padding: 1.3rem 1.35rem 1.45rem; }
.config-field label { color: #3c5060; font-size: .78rem; font-weight: 700; }
.config-input { display: flex; align-items: center; min-height: 45px; overflow: hidden; border: 1px solid #d9e4ea; border-radius: .6rem; background: #fbfdfe; transition: border-color .2s,box-shadow .2s,background .2s; }
.config-input:focus-within { border-color: #22a997; background: #fff; box-shadow: 0 0 0 3px rgba(34,169,151,.12); }
.config-input > i,
.config-input > svg {
    flex: 0 0 44px;
    width: 44px !important;
    height: 43px;
    padding: 13px;
    box-sizing: border-box;
    text-align: center;
    color: #6a8895;
    border-right: 1px solid #e4ecef;
}
.config-input input { width: 100%; min-width: 0; height: 43px; padding: .55rem .85rem; color: #233746; background: transparent; border: 0; outline: 0; font-size: .88rem; }
.config-info,.config-security { display: flex; gap: .6rem; padding: .75rem .85rem; margin-bottom: 1rem; color: #41616d; background: #edf8f7; border: 1px solid #d5efeb; border-radius: .65rem; font-size: .76rem; line-height: 1.45; }
.config-info i,.config-security i { margin-top: .14rem; color: #159681; }
.config-security { margin: 1rem 0 0; color: #667985; background: #f7f9fb; border-color: #e5ebef; }
.config-security i { color: #3b82f6; }
.config-switch-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .95rem; margin: .35rem 0 0; cursor: pointer; border: 1px solid #dce8ec; border-radius: .7rem; background: #fbfdfd; }
.config-switch-card strong,.config-switch-card small { display: block; }
.config-switch-card strong { color: #294551; font-size: .83rem; }
.config-switch-card small { margin-top: .1rem; color: #83949d; font-size: .7rem; }
.config-switch { position: relative; flex: 0 0 43px; height: 24px; }
.config-switch input { position: absolute; opacity: 0; }
.config-switch span { position: absolute; inset: 0; border-radius: 999px; background: #cbd5dc; transition: .2s; }
.config-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: .2s; }
.config-switch input:checked + span { background: #18a88f; }
.config-switch input:checked + span::after { transform: translateX(19px); }
.config-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; color: #7a8b95; background: #fff; border: 1px solid #e4ebef; border-radius: .85rem; box-shadow: 0 .3rem 1rem rgba(30,62,98,.06); font-size: .75rem; }
.config-save { margin: 0; padding: .72rem 1.25rem; color: #fff !important; border: 0; background: linear-gradient(135deg,#1fab92,#08776d); box-shadow: 0 .4rem .8rem rgba(18,140,124,.25); }
.config-save:hover { transform: translateY(-1px); box-shadow: 0 .55rem 1rem rgba(18,140,124,.32); }
@media (max-width: 767.98px) { .config-hero { align-items: flex-start; padding: 1.25rem; } .config-hero-icon { flex-basis: 48px; height: 48px; } .config-status { position: absolute; right: 1rem; bottom: .8rem; } .config-hero p { padding-bottom: 1.8rem; } .config-actions { flex-direction: column; align-items: stretch; text-align: center; } .config-save { width: 100%; } }
@media (max-width: 480px) { .config-hero-icon { display: none; } .config-panel-body { padding: 1.05rem; } .config-panel-header { padding: 1rem; } }

/* ==================================================================
   IMPORTACION DE PRODUCTOS
================================================================== */
.import-page{max-width:1450px;margin:0 auto}.import-hero{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 1.5rem;margin-bottom:1rem;color:#fff;border-radius:1rem;background:linear-gradient(125deg,#102a43,#176d70 62%,#18a68f);box-shadow:0 .75rem 1.8rem rgba(20,75,84,.2)}.import-hero h2{margin:.1rem 0 .15rem;color:#fff;font-size:1.45rem}.import-hero p{margin:0;color:rgba(255,255,255,.78);font-size:.82rem}.import-kicker{color:#8ef3df;font-size:.66rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase}.import-actions{display:flex;flex-wrap:wrap;gap:.5rem}.import-actions .btn{margin:0;padding:.58rem .8rem}.import-panel{margin-bottom:1rem;overflow:hidden;background:#fff;border:1px solid #e2eaee;border-radius:.9rem;box-shadow:0 .35rem 1rem rgba(30,62,98,.07)}.import-panel>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid #e8eef1}.import-panel>header h4{margin:.1rem 0 0;color:#263f4c;font-size:1rem}.import-panel>header .import-kicker{color:#159681}.import-drop{display:flex;align-items:center;gap:1rem;padding:1.25rem;margin:1rem;border:2px dashed #b9d7d3;border-radius:.75rem;background:#f7fbfb;transition:.2s}.import-drop.is-dragging{border-color:#159681;background:#eaf8f5;transform:scale(1.005)}.import-drop-icon{display:grid;place-items:center;flex:0 0 48px;height:48px;color:#159681;background:#e0f5f1;border-radius:13px;font-size:1.25rem}.import-drop div{flex:1}.import-drop strong,.import-drop small,.import-file strong,.import-file small{display:block}.import-drop strong{color:#2f4955;font-size:.9rem}.import-drop small,.import-file small{color:#81939c;font-size:.7rem}.import-file{display:flex;align-items:center;gap:.7rem;padding:0 1rem 1rem;color:#168b79}.import-file div{flex:1}.import-preview-table{margin:0;font-size:.73rem}.import-preview-table th{white-space:nowrap;background:#f5f8fa;color:#617784;font-size:.65rem}.status-pill.success{color:#087462;background:#e0f6f0}.unused-filter{margin:0;padding:.45rem .65rem;border:1px solid #dce7eb;border-radius:.5rem;color:#536b77;font-size:.74rem;cursor:pointer}.unused-filter input{margin-right:.35rem;accent-color:#159681}.import-structure .modal-header{background:#f8fafb}.import-structure .table{font-size:.75rem}.import-structure .table th{color:#687d88;font-size:.65rem;text-transform:uppercase}.import-notes{padding:.85rem 1rem;border-radius:.65rem;background:#f7f9fa;color:#536a75;font-size:.78rem}.import-notes strong{display:block;margin-bottom:.25rem;color:#e53935}.import-notes p{margin:0 0 .7rem}.import-notes p:last-child{margin-bottom:0}@media(max-width:767.98px){.import-hero,.import-drop{align-items:stretch;flex-direction:column}.import-actions .btn{flex:1}.import-panel>header{align-items:flex-start;flex-direction:column}.unused-filter{width:100%}}

/* Ajustes compactos del modal de estructura */
#estructura .modal-dialog { max-width: 620px; }
.import-structure .modal-header { align-items: center; min-height: 48px; padding: .65rem .85rem; }
.import-structure .modal-header h5 { margin: 0; color: #253d49; font-size: .95rem; font-weight: 700; }
.import-structure .modal-header .close {
    display: grid; place-items: center; width: 32px; height: 32px;
    padding: 0; margin: 0; color: #405763 !important; background: #e8eef1;
    border-radius: .45rem; opacity: 1; text-shadow: none; transition: .18s;
}
.import-structure .modal-header .close:hover,
.import-structure .modal-header .close:focus { color: #fff !important; background: #dc3545; outline: 0; transform: rotate(4deg); }
.import-structure .modal-body { padding: .75rem; }
.import-structure .table-responsive { box-shadow: none; }
.import-structure .table { margin-bottom: 0; font-size: .72rem; }
.import-structure .table th { padding: .5rem .6rem; font-size: .62rem; }
.import-structure .table td { padding: .48rem .6rem; }
.import-structure .import-notes { padding: .65rem .8rem; margin-top: .65rem; font-size: .72rem; }
.import-structure .import-notes strong { margin-bottom: .15rem; }
.import-structure .import-notes p { margin-bottom: .45rem; line-height: 1.4; }
.import-page .dataTables_wrapper .row:first-child,
.import-page .dataTables_wrapper .row:last-child {
    margin-left: 0;
    margin-right: 0;
    padding-left: .85rem;
    padding-right: .85rem;
}
.import-page .dataTables_wrapper .row:first-child { padding-top: .55rem; padding-bottom: .55rem; }
.import-page .dataTables_wrapper .row:last-child { padding-top: .5rem; padding-bottom: .5rem; }
.import-page .dataTables_length,
.import-page .dataTables_filter,
.import-page .dataTables_info,
.import-page .dataTables_paginate { margin: 0; }
.client-clean-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.client-clean-actions .btn { margin: 0; }
.catalog-import-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .75rem; }
.catalog-import-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .75rem; color: #526a76; background: #fff; border: 1px solid #dce6ea; border-radius: .55rem; font-size: .75rem; font-weight: 700; transition: .18s; }
.catalog-import-tabs a:hover, .catalog-import-tabs a.active { color: #fff; background: #159681; border-color: #159681; box-shadow: 0 .3rem .7rem rgba(21,150,129,.2); }
.catalog-ellipsis { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.sidebar .sidebar-logout { position: sticky; bottom: 10px; z-index: 3; margin-top: 1rem; padding-top: .45rem; background: linear-gradient(180deg, transparent, rgba(18,43,58,.96) 35%); }
.sidebar .sidebar-logout .nav-link { color: #ffd7d7; border: 1px solid rgba(255,255,255,.13); background: rgba(185,28,28,.28); }
.sidebar .sidebar-logout .nav-link i { color: #ff8f8f; }
.sidebar .sidebar-logout .nav-link:hover { color: #fff; background: #c62828; box-shadow: 0 .35rem .85rem rgba(90,10,10,.3); transform: translateY(-1px); }
.sidebar .sidebar-logout .nav-link:hover i { color: #fff; }
@media (max-width: 767.98px) {
    #estructura .modal-dialog { max-width: calc(100% - 1rem); margin: .5rem auto; }
    .import-structure .modal-body { padding: .55rem; }
    .import-structure .table th, .import-structure .table td { padding: .42rem .45rem; }
    .client-clean-actions { width: 100%; align-items: stretch; flex-direction: column; }
}

/* ==================================================================
   SISTEMA GLOBAL DE FORMULARIOS - FARMACIA MH
   Se aplica a todos los módulos internos, excepto acciones de tabla.
================================================================== */
.content form:not(.confirmar):not(.form-inline) {
    --form-accent: #159681;
    --form-accent-dark: #08766c;
}

.content .card-body > form:not(.confirmar):not(.form-inline):not(.config-form),
.content form#formulario {
    position: relative;
    padding: 1.25rem !important;
    border: 1px solid #e2eaee;
    border-radius: .85rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdfd 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 .3rem .9rem rgba(30,62,98,.05);
}

.content form:not(.confirmar) .form-group > label,
.modal form .form-group > label {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-bottom: .38rem;
    color: #344b5a !important;
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .1px;
}

.content form:not(.confirmar) .form-control,
.modal form .form-control {
    min-height: 44px;
    padding: .55rem .78rem;
    color: #253947;
    font-size: .88rem;
    line-height: 1.35;
    background-color: #fbfdfe;
    border: 1px solid #d7e2e8;
    border-radius: .58rem;
    box-shadow: inset 0 1px 2px rgba(25,53,70,.025);
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.content form:not(.confirmar) textarea.form-control,
.modal form textarea.form-control {
    min-height: 94px;
    resize: vertical;
}

.content form:not(.confirmar) select.form-control {
    cursor: pointer;
    padding-right: 2rem;
    background-color: #fbfdfe;
}

.content form:not(.confirmar) .form-control:hover:not(:disabled),
.modal form .form-control:hover:not(:disabled) {
    border-color: #b7cbd3;
    background-color: #ffffff;
}

.content form:not(.confirmar) .form-control:focus,
.modal form .form-control:focus {
    color: #1e3442;
    background-color: #ffffff;
    border-color: #25aa98;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(37,170,152,.13) !important;
}

.content form:not(.confirmar) .form-control:disabled,
.content form:not(.confirmar) .form-control[readonly],
.modal form .form-control:disabled {
    color: #657985;
    background-color: #f0f4f6;
    border-color: #e0e7eb;
    cursor: not-allowed;
    opacity: 1;
}

.content form:not(.confirmar) .form-control::placeholder,
.modal form .form-control::placeholder {
    color: #9aabb4;
    opacity: 1;
}

.content form:not(.confirmar) .form-control:required:not(:placeholder-shown):invalid,
.modal form .form-control:required:not(:placeholder-shown):invalid {
    border-color: #e79a9a;
}

.content form:not(.confirmar) small.form-text {
    margin-top: .32rem;
    color: #81939d !important;
    font-size: .7rem;
}

/* Checkbox uniforme para vencimiento, permisos y opciones */
.content form:not(.confirmar) .form-check {
    padding: .65rem .8rem;
    border: 1px solid #e0e9ed;
    border-radius: .6rem;
    background: #f9fbfc;
}

.content form:not(.confirmar) .form-check-input {
    width: 17px;
    height: 17px;
    margin-top: .12rem;
    accent-color: #159681;
    cursor: pointer;
}

.content form:not(.confirmar) .form-check-label {
    margin-left: .3rem;
    color: #405764;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

/* Botonera principal de formularios */
.content form:not(.confirmar):not(.form-inline) input[type="submit"],
.content form:not(.confirmar):not(.form-inline) input[type="button"],
.content form:not(.confirmar):not(.form-inline) button[type="submit"],
.modal form button {
    min-height: 42px;
    padding: .62rem 1.05rem;
    border-radius: .55rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .2px;
    transition: transform .15s ease, box-shadow .15s ease;
}

.content form:not(.confirmar):not(.form-inline) input[type="submit"]:hover,
.content form:not(.confirmar):not(.form-inline) input[type="button"]:hover,
.content form:not(.confirmar):not(.form-inline) button[type="submit"]:hover,
.modal form button:hover {
    transform: translateY(-1px);
}

/* Encabezados de formularios y modales con identidad consistente */
.content .card-header.bg-primary,
.content .card-header.card-header-primary {
    color: #fff;
    border-radius: .75rem .75rem 0 0;
    background: linear-gradient(135deg, #174b68 0%, #157f7d 100%) !important;
    box-shadow: 0 .3rem .8rem rgba(19,99,105,.2);
}

.content .card-header.bg-info,
.content .card-header.card-header-info {
    color: #fff;
    border-radius: .75rem .75rem 0 0;
    background: linear-gradient(135deg, #2563a9 0%, #268da0 100%) !important;
    box-shadow: 0 .3rem .8rem rgba(37,99,169,.18);
}

.modal-content {
    overflow: hidden;
    box-shadow: 0 1.2rem 2.5rem rgba(18,42,58,.24);
}

.modal-header.bg-primary {
    border: 0;
    background: linear-gradient(135deg, #174b68, #159681) !important;
}

.modal-header .close { color: #fff; opacity: .85; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }

/* Autocomplete de clientes/productos */
.ui-autocomplete {
    z-index: 1100 !important;
    max-height: 280px;
    overflow-y: auto;
    padding: .35rem;
    border: 1px solid #d9e4e9 !important;
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 .75rem 1.6rem rgba(27,55,72,.16);
}

.ui-autocomplete .ui-menu-item-wrapper {
    padding: .55rem .7rem;
    color: #344c59;
    border: 0 !important;
    border-radius: .4rem;
    font-size: .83rem;
}

.ui-autocomplete .ui-state-active {
    color: #fff !important;
    background: #159681 !important;
}

@media (max-width: 767.98px) {
    .content .card-body > form:not(.confirmar):not(.form-inline):not(.config-form),
    .content form#formulario { padding: 1rem !important; }
    .content form:not(.confirmar):not(.form-inline) .btn,
    .content form:not(.confirmar):not(.form-inline) input[type="submit"],
    .content form:not(.confirmar):not(.form-inline) input[type="button"] { width: 100%; margin: .22rem 0; }
}