/* ==========================================================================
   TraslaSuit — capa de diseño minimalista y responsive
   Se carga DESPUÉS de AdminLTE / Bootstrap (4 y 5) y de los estilos base de
   cada layout. Solo cambia apariencia: no toca lógica ni estructura.
   Paleta original: verde #2D5A27 · lima #76BA1B · petróleo #203239
   ========================================================================== */

:root {
    --ms-green: #2D5A27;
    --ms-lime: #76BA1B;
    --ms-lime-strong: #5a9a12;
    --ms-dark: #203239;
    --ms-side: #203239;
    --ms-accent: #76BA1B;

    --ms-ink: #1f2a30;
    --ms-muted: #6b7780;
    --ms-line: #e6eaed;
    --ms-line-strong: #d5dbe0;
    --ms-bg: #f6f7f8;
    --ms-surface: #ffffff;
    --ms-tint: rgba(118, 186, 27, .12);

    --ms-danger: #b8433a;
    --ms-warning: #c98a12;
    --ms-info: #2f7f8f;

    --ms-radius: 8px;
    --ms-radius-sm: 6px;
    --ms-pad: 1rem;
}

/* El backoffice conserva su propia gama (verde #28a745 + gris #343a40) */
body.theme-backoffice {
    --ms-green: #1f7a37;
    --ms-lime: #28a745;
    --ms-lime-strong: #23923d;
    --ms-side: #343a40;
    --ms-accent: #28a745;
    --ms-tint: rgba(40, 167, 69, .12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body {
    color: var(--ms-ink);
    background-color: var(--ms-bg);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--ms-green); }
a:hover { color: var(--ms-lime-strong); }

img, video, canvas, svg { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 { color: var(--ms-ink); letter-spacing: -.01em; }
.text-muted, .text-secondary { color: var(--ms-muted) !important; }

hr { border-top-color: var(--ms-line); }

/* Sombras fuera: la jerarquía se marca con líneas finas */
.shadow, .shadow-sm, .shadow-lg, .shadow-xs,
.elevation-1, .elevation-2, .elevation-3, .elevation-4, .elevation-5 {
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Layout AdminLTE
   -------------------------------------------------------------------------- */
.content-wrapper { background: var(--ms-bg) !important; }

.content-header { padding: 1.1rem .5rem .6rem; }
.content-header h1 {
    font-size: 1.35rem;
    font-weight: 600;
    margin: 0;
    color: var(--ms-ink) !important;
}

.main-footer {
    background: transparent;
    border-top: 1px solid var(--ms-line);
    color: var(--ms-muted);
    font-size: .85rem;
}
.main-footer a { color: var(--ms-green); }

/* Barra superior: blanca, con línea fina */
.main-header.navbar,
.main-header.navbar-trasla {
    background: var(--ms-surface) !important;
    border-bottom: 1px solid var(--ms-line) !important;
    box-shadow: none;
    color: var(--ms-ink);
}
.main-header .navbar-nav .nav-link,
.main-header .navbar-nav .nav-link i {
    color: var(--ms-ink) !important;
}
.main-header .navbar-nav .nav-link { opacity: .8; }
.main-header .navbar-nav .nav-link:hover { opacity: 1; color: var(--ms-green) !important; }

/* Sidebar: mismo color, más plano */
.main-sidebar,
.sidebar-dark-primary {
    background-color: var(--ms-side) !important;
    box-shadow: none !important;
    border-right: 1px solid rgba(255, 255, 255, .04);
}
.brand-link {
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}
.brand-text { letter-spacing: .02em; }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, .68);
    border-radius: var(--ms-radius-sm);
    font-size: .93rem;
}
.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active,
.nav-sidebar .nav-link.active {
    background: var(--ms-tint) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--ms-accent) !important;
}
/* Los íconos de colores del menú pierden protagonismo */
.main-sidebar .nav-icon[class*="text-"] { color: rgba(255, 255, 255, .7) !important; }
.main-sidebar .text-success { color: var(--ms-lime) !important; }
.main-sidebar .text-warning { color: #e8b64a !important; }
.main-sidebar .text-muted { color: rgba(255, 255, 255, .5) !important; }
.nav-sidebar .nav-header {
    color: rgba(255, 255, 255, .38);
    font-size: .7rem;
    letter-spacing: .08em;
}
.nav-sidebar .nav-treeview { background: transparent; }

/* Panel "Entorno activo" */
.user-panel .rounded {
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
}
.user-panel .badge { background: transparent !important; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none !important;
    margin-bottom: 1rem;
}
.card.card-outline,
.card.card-outline-tabs,
.card[class*="card-"] { border-top: 1px solid var(--ms-line); }

.card-header,
.card-header[class*="bg-"] {
    background: transparent !important;
    color: var(--ms-ink) !important;
    border-bottom: 1px solid var(--ms-line);
    padding: .8rem 1rem;
}
.card-header .card-title,
.card-header[class*="bg-"] .card-title,
.card-header[class*="bg-"] h1, .card-header[class*="bg-"] h2,
.card-header[class*="bg-"] h3, .card-header[class*="bg-"] h4,
.card-header[class*="bg-"] h5, .card-header[class*="bg-"] h6 {
    color: var(--ms-ink) !important;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.card-header[class*="bg-"] .text-white:not(.badge):not(.btn),
.card-header[class*="bg-"] .text-light:not(.badge):not(.btn) { color: var(--ms-ink) !important; }
.card-header .btn-tool { color: var(--ms-muted) !important; }

/* Un solo toque de color: fina barra lateral según el estado de la tarjeta */
.card-primary, .card-success { box-shadow: inset 3px 0 0 var(--ms-accent) !important; }
.card-danger  { box-shadow: inset 3px 0 0 var(--ms-danger) !important; }
.card-warning { box-shadow: inset 3px 0 0 var(--ms-warning) !important; }
.card-info    { box-shadow: inset 3px 0 0 var(--ms-info) !important; }
.card-secondary, .card-dark { box-shadow: inset 3px 0 0 var(--ms-dark) !important; }

.card-body { padding: 1rem; }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--ms-line);
    padding: .8rem 1rem;
}
.card-title { font-weight: 600; }

/* Tabs */
.nav-tabs { border-bottom: 1px solid var(--ms-line); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--ms-muted);
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--ms-ink); border-color: var(--ms-line-strong); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--ms-green);
    border-color: var(--ms-accent);
    background: transparent;
}
.nav-pills .nav-link { border-radius: var(--ms-radius-sm); color: var(--ms-muted); }
.content .nav-pills .nav-link.active,
.content .nav-pills .show > .nav-link {
    background: var(--ms-tint);
    color: var(--ms-green);
}

/* --------------------------------------------------------------------------
   Small-box / info-box (KPIs): tarjetas blancas con acento de color
   -------------------------------------------------------------------------- */
.small-box,
.small-box[class*="bg-"],
.small-box.small-box-trasla {
    background: var(--ms-surface) !important;
    color: var(--ms-ink) !important;
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none !important;
    overflow: hidden;
}
.small-box .inner h3 { font-size: 1.9rem; font-weight: 600; color: var(--ms-ink) !important; }
.small-box .inner p  { color: var(--ms-muted) !important; font-size: .9rem; margin-bottom: 0; }
.small-box .icon > i { color: var(--ms-ink) !important; opacity: .07; }
.small-box .small-box-footer,
.small-box > .small-box-footer {
    background: transparent !important;
    color: var(--ms-muted) !important;
    border-top: 1px solid var(--ms-line);
}
.small-box .small-box-footer:hover { color: var(--ms-green) !important; }
.small-box.bg-success, .small-box.bg-primary, .small-box.small-box-trasla { border-left: 3px solid var(--ms-accent); }
.small-box.bg-danger  { border-left: 3px solid var(--ms-danger); }
.small-box.bg-warning { border-left: 3px solid var(--ms-warning); }
.small-box.bg-info    { border-left: 3px solid var(--ms-info); }
.small-box.bg-dark, .small-box.bg-secondary { border-left: 3px solid var(--ms-dark); }

.info-box {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: none;
}

/* Callouts */
.callout {
    background: var(--ms-surface);
    border: 1px solid var(--ms-line);
    border-left-width: 3px;
    border-radius: var(--ms-radius-sm);
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   Botones: planos, colores apagados de la misma gama
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--ms-radius-sm);
    box-shadow: none !important;
    font-weight: 500;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px var(--ms-tint) !important; }

.btn-primary, .btn-trasla, .btn-login, .btn-register {
    background: var(--ms-green); border-color: var(--ms-green); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-trasla:hover, .btn-login:hover, .btn-register:hover {
    background: #234a1e; border-color: #234a1e; color: #fff; transform: none;
}
.btn-success {
    background: var(--ms-lime-strong); border-color: var(--ms-lime-strong); color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--ms-green); border-color: var(--ms-green); color: #fff;
}
.btn-secondary, .btn-light, .btn-default {
    background: var(--ms-surface); border: 1px solid var(--ms-line-strong); color: var(--ms-ink);
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-light:hover, .btn-default:hover {
    background: var(--ms-bg); border-color: var(--ms-muted); color: var(--ms-ink);
}
.btn-danger  { background: var(--ms-danger); border-color: var(--ms-danger); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background: #9c352d; border-color: #9c352d; color: #fff; }
.btn-warning { background: #e8b64a; border-color: #e8b64a; color: #33280a; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background: #dda62e; border-color: #dda62e; color: #33280a; }
.btn-info    { background: var(--ms-info); border-color: var(--ms-info); color: #fff; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background: #266a78; border-color: #266a78; color: #fff; }
.btn-dark, .btn-indigo { background: var(--ms-dark); border-color: var(--ms-dark); color: #fff; }
.btn-dark:hover, .btn-indigo:hover { background: #142126; border-color: #142126; color: #fff; }

.btn-outline-primary, .btn-outline-success {
    color: var(--ms-green); border-color: var(--ms-line-strong); background: transparent;
}
.btn-outline-primary:hover, .btn-outline-success:hover,
.btn-outline-primary:active, .btn-outline-success:active {
    background: var(--ms-green); border-color: var(--ms-green); color: #fff;
}
.btn-outline-secondary, .btn-outline-dark {
    color: var(--ms-ink); border-color: var(--ms-line-strong); background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover { background: var(--ms-dark); border-color: var(--ms-dark); color: #fff; }
.btn-outline-danger  { color: var(--ms-danger);  border-color: var(--ms-line-strong); background: transparent; }
.btn-outline-danger:hover { background: var(--ms-danger); border-color: var(--ms-danger); color: #fff; }
.btn-outline-warning { color: var(--ms-warning); border-color: var(--ms-line-strong); background: transparent; }
.btn-outline-warning:hover { background: #e8b64a; border-color: #e8b64a; color: #33280a; }
.btn-outline-info    { color: var(--ms-info);    border-color: var(--ms-line-strong); background: transparent; }
.btn-outline-info:hover { background: var(--ms-info); border-color: var(--ms-info); color: #fff; }
.btn-outline-light { color: var(--ms-ink); border-color: var(--ms-line-strong); background: transparent; }
.btn-outline-light:hover { background: var(--ms-bg); border-color: var(--ms-muted); color: var(--ms-ink); }
.btn-link { color: var(--ms-green); }
.btn-tool { box-shadow: none !important; }

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

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.form-control, .form-select, .custom-select,
.input-group-text, .select2-container--default .select2-selection--single {
    border: 1px solid var(--ms-line-strong);
    border-radius: var(--ms-radius-sm);
    background-color: var(--ms-surface);
    color: var(--ms-ink);
    box-shadow: none;
}
.form-control, .form-select, .custom-select { min-height: 2.4rem; }
.form-control-sm, .form-select-sm { min-height: 2rem; }
textarea.form-control { min-height: 4.5rem; }
.form-control::placeholder { color: #a3adb4; }
.form-control:focus, .form-select:focus, .custom-select:focus {
    border-color: var(--ms-accent);
    box-shadow: 0 0 0 3px var(--ms-tint);
    outline: 0;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--ms-bg);
}
.input-group-text { background: var(--ms-bg); color: var(--ms-muted); }
.input-group-text[class*="bg-"] { background: var(--ms-bg) !important; color: var(--ms-muted) !important; }
label, .form-label { font-size: .85rem; font-weight: 500; color: var(--ms-ink); }
.form-text, .help-block, small.text-muted { color: var(--ms-muted); }

.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--ms-accent);
    border-color: var(--ms-accent);
}
.form-check-input:focus { border-color: var(--ms-accent); box-shadow: 0 0 0 3px var(--ms-tint); }
.custom-control.custom-checkbox:hover { background-color: var(--ms-bg) !important; }
.invalid-feedback, .errorlist { color: var(--ms-danger); }

.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--ms-accent); }

/* Select2 */
.select2-container--default .select2-selection--single { height: 2.4rem; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 2.3rem; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.3rem; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--ms-accent);
    border-radius: var(--ms-radius-sm);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ms-green); }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.table { color: var(--ms-ink); margin-bottom: 0; }
.table th, .table td { border-top: 1px solid var(--ms-line); vertical-align: middle; }
.table thead th,
.table thead.thead-dark th, .table thead.thead-light th,
.table thead.bg-dark th, .table thead[class*="bg-"] th,
.table .thead-dark th, .table .thead-light th {
    background: var(--ms-bg) !important;
    color: var(--ms-muted) !important;
    border: 0;
    border-bottom: 1px solid var(--ms-line);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table-hover tbody tr:hover { background: rgba(118, 186, 27, .06); }
.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.table-light, .table-light > th, .table-light > td { background: var(--ms-bg); }
.table-sm th, .table-sm td { padding: .5rem .65rem; }

/* Tablas con grilla (rack, matrices): líneas suaves, sin perder la cuadrícula */
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--ms-line); }
.table-bordered thead th { border-bottom-width: 1px; }

/* --------------------------------------------------------------------------
   Badges: píldoras con fondo suave
   -------------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .32em .7em;
    letter-spacing: .01em;
}
.badge-success, .badge.bg-success        { background: rgba(118, 186, 27, .18) !important; color: #3f7a0c !important; }
.badge-primary, .badge.bg-primary        { background: rgba(45, 90, 39, .12) !important;   color: var(--ms-green) !important; }
.badge-danger,  .badge.bg-danger         { background: rgba(184, 67, 58, .12) !important;  color: var(--ms-danger) !important; }
.badge-warning, .badge.bg-warning        { background: rgba(232, 182, 74, .25) !important; color: #7a5300 !important; }
.badge-info,    .badge.bg-info           { background: rgba(47, 127, 143, .13) !important; color: var(--ms-info) !important; }
.badge-secondary, .badge.bg-secondary,
.badge-light, .badge.bg-light            { background: var(--ms-bg) !important; color: var(--ms-muted) !important; border: 1px solid var(--ms-line); }
.badge-dark, .badge-indigo, .badge.bg-dark { background: rgba(32, 50, 57, .1) !important; color: var(--ms-dark) !important; }
.badge.bg-success-light                  { background: rgba(118, 186, 27, .18) !important; }

.progress { background: var(--ms-line); border-radius: 999px; box-shadow: none; }
.progress-bar { border-radius: 999px; }
.progress-bar.bg-success, .progress-bar.bg-primary { background-color: var(--ms-accent) !important; }

/* --------------------------------------------------------------------------
   Alertas
   -------------------------------------------------------------------------- */
.alert,
.alert.alert-success {
    border: 1px solid var(--ms-line);
    border-left-width: 3px;
    border-radius: var(--ms-radius-sm);
    box-shadow: none !important;
}
.alert.alert-success { background: #f3f9ea !important; color: #2f5a10 !important; border-color: #dcebc3; border-left-color: var(--ms-accent); }
.alert-danger,  .alert-error   { background: #fbf1f0; color: #7d2b25; border-color: #f0d4d1; border-left-color: var(--ms-danger); }
.alert-warning { background: #fdf6e6; color: #6b4a06; border-color: #f2e2b8; border-left-color: #e8b64a; }
.alert-info    { background: #eef6f8; color: #1f5966; border-color: #d3e6ea; border-left-color: var(--ms-info); }
.alert-light, .alert-secondary { background: var(--ms-surface); color: var(--ms-ink); border-color: var(--ms-line); }
.alert .close { opacity: .5; text-shadow: none; }

/* --------------------------------------------------------------------------
   Modales
   -------------------------------------------------------------------------- */
.modal-content {
    border: 1px solid var(--ms-line);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(16, 24, 32, .18);
}
.modal-header,
.modal-header[class*="bg-"] {
    background: var(--ms-surface) !important;
    color: var(--ms-ink) !important;
    border-bottom: 1px solid var(--ms-line);
    border-radius: 12px 12px 0 0;
}
.modal-header .modal-title { font-size: 1.05rem; font-weight: 600; color: var(--ms-ink) !important; }
.modal-header .close, .modal-header .btn-close {
    color: var(--ms-ink) !important; text-shadow: none; opacity: .5;
}
.modal-header .close:hover { opacity: 1; }
.modal-header.bg-danger  { box-shadow: inset 0 3px 0 var(--ms-danger); }
.modal-header.bg-success { box-shadow: inset 0 3px 0 var(--ms-accent); }
.modal-header.bg-primary { box-shadow: inset 0 3px 0 var(--ms-green); }
.modal-header.bg-info    { box-shadow: inset 0 3px 0 var(--ms-info); }
.modal-header.bg-warning { box-shadow: inset 0 3px 0 #e8b64a; }
.modal-header.bg-dark    { box-shadow: inset 0 3px 0 var(--ms-dark); }
.modal-footer { border-top: 1px solid var(--ms-line); }
.modal-backdrop.show { opacity: .35; }

/* Dropdowns, paginación, breadcrumbs, list-groups */
.dropdown-menu {
    border: 1px solid var(--ms-line);
    border-radius: var(--ms-radius);
    box-shadow: 0 8px 24px rgba(16, 24, 32, .1);
}
.dropdown-item:active, .dropdown-item.active { background: var(--ms-green); }
.page-link { color: var(--ms-green); border-color: var(--ms-line); }
.page-item.active .page-link { background: var(--ms-green); border-color: var(--ms-green); }
.list-group-item { border-color: var(--ms-line); }
.list-group-item.active { background: var(--ms-green); border-color: var(--ms-green); }
.breadcrumb { background: transparent; }
.img-thumbnail { border: 1px solid var(--ms-line); border-radius: var(--ms-radius-sm); }

/* --------------------------------------------------------------------------
   Sitio público (Bootstrap 5)
   -------------------------------------------------------------------------- */
.navbar-trasla {
    background: var(--ms-surface) !important;
    border-bottom: 1px solid var(--ms-line);
    box-shadow: none !important;
}
.navbar-trasla .navbar-brand,
.navbar-trasla .nav-link { color: var(--ms-ink) !important; }
.navbar-trasla .navbar-brand { color: var(--ms-green) !important; }
.navbar-trasla .nav-link:hover { color: var(--ms-green) !important; }
.navbar-trasla .navbar-toggler { border-color: var(--ms-line-strong); }
.navbar-trasla .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831, 42, 48, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.card.card-trasla {
    border: 1px solid var(--ms-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.hero-banner { border-radius: 14px !important; }
.search-bar { border: 1px solid var(--ms-line-strong); box-shadow: none; }
.search-submit-btn { background: var(--ms-green); }
.search-submit-btn:hover { background: #234a1e; }
.text-trasla-green, .text-trasla { color: var(--ms-green) !important; }
.text-trasla-dark { color: var(--ms-ink) !important; }

footer.bg-dark, footer.bg-dark.text-white {
    background: transparent !important;
    color: var(--ms-muted) !important;
    border-top: 1px solid var(--ms-line);
}
footer.bg-dark p { color: var(--ms-muted); }

/* --------------------------------------------------------------------------
   Utilidades de color: más discretas (solo texto, nunca fondos generales)
   -------------------------------------------------------------------------- */
.text-success { color: var(--ms-green) !important; }
.text-danger  { color: var(--ms-danger) !important; }
.text-warning { color: var(--ms-warning) !important; }
.text-info    { color: var(--ms-info) !important; }
.text-primary, .text-indigo { color: var(--ms-green) !important; }
.text-dark    { color: var(--ms-ink) !important; }
.bg-light     { background-color: var(--ms-bg) !important; }
.border       { border-color: var(--ms-line) !important; }
.rounded      { border-radius: var(--ms-radius) !important; }

/* Scrollbars discretas */
* { scrollbar-width: thin; scrollbar-color: var(--ms-line-strong) transparent; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Tablas que no entran en pantalla scrollean dentro de su tarjeta, no la página */
.table-responsive { -webkit-overflow-scrolling: touch; }
.card-body:has(> .table), .card-body:has(> table),
.modal-body:has(> .table), .modal-body:has(> table),
.tab-pane:has(> .table), .tab-pane:has(> table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Barras de acciones dentro de tarjetas: envuelven en vez de desbordar */
.card-header.d-flex, .card-body.d-flex, .card-footer.d-flex,
.content-header .d-flex {
    flex-wrap: wrap;
    gap: .5rem;
}
.card-header .card-tools { margin-left: auto; }

@media (max-width: 991.98px) {
    /* Sidebar como cajón: contenido a todo el ancho */
    .content-wrapper, .main-footer { margin-left: 0 !important; }
    .modal-dialog { margin: .75rem auto; }
}

@media (max-width: 767.98px) {
    .content-header { padding: .9rem .25rem .4rem; }
    .content-header h1 { font-size: 1.15rem; }
    .content > .container-fluid,
    .content-header > .container-fluid,
    .content-wrapper > .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .container-fluid.mt-4 { margin-top: .5rem !important; }

    .card-body, .card-header, .card-footer { padding: .8rem; }

    /* 16px evita el zoom automático de iOS al enfocar campos */
    .form-control, .form-select, .custom-select, select, textarea,
    input[type="text"], input[type="number"], input[type="email"],
    input[type="password"], input[type="date"], input[type="search"],
    input[type="tel"] { font-size: 16px; }

    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline .form-control, .form-inline .btn { width: 100%; margin-bottom: .5rem; }

    /* Botones de acciones principales cómodos al toque */
    .card-footer .btn, .modal-footer .btn { flex: 1 1 auto; }
    .modal-footer { flex-wrap: wrap; gap: .5rem; }
    .modal-footer > * { margin: 0; }

    .table th, .table td { padding: .55rem .6rem; }
    .table td { white-space: normal; }
    .table th { white-space: nowrap; }

    .small-box .inner h3 { font-size: 1.5rem; }
    .btn-group-vertical-sm { flex-direction: column; }

    .main-footer { text-align: center; }
    .main-footer .float-right { float: none !important; }

    /* Calendario de disponibilidad */
    .calendario-almanaque-grid { gap: 4px !important; }
    .celda-calendario { min-height: 64px !important; }
    .celda-calendario .card-body { padding: .3rem !important; }
    .celda-calendario .text-lg { font-size: .95rem; }
    .celda-calendario .badge { font-size: .6rem; padding: .2em .4em; }
    .celda-calendario .text-xs { display: none; }
    .calendario-semana-headers .small { font-size: .65rem; }
}

@media (max-width: 575.98px) {
    .btn-lg { padding: .55rem 1rem; font-size: 1rem; }
    .modal-dialog { margin: .5rem; }
    .content-header h1 { font-size: 1.05rem; }
    .navbar-trasla .container { padding-left: 1rem; padding-right: 1rem; }
    .navbar-trasla .navbar-nav { padding: .5rem 0; gap: .25rem; }
    .navbar-trasla form { display: block !important; }
    .hero-banner { padding: 2.5rem 1rem !important; }
    .celda-calendario { min-height: 52px !important; }
}

@media (max-width: 400px) {
    .celda-calendario .badge { display: none; }
}

/* Impresión: comprobantes limpios */
@media print {
    .card { border: 0; }
    .content-wrapper { background: #fff !important; }
}