/* ======================================================================
   MMC Metrología · Sistema visual unificado
   Capa de presentación. No modifica lógica, estructura ni comportamiento.
   ====================================================================== */

:root {
    --mmc-primary: #F26022;
    --mmc-primary-hover: #D94F13;
    --mmc-primary-soft: #FFF1E9;
    --mmc-navy: #0F172A;
    --mmc-slate-900: #1E293B;
    --mmc-slate-700: #334155;
    --mmc-slate-600: #475569;
    --mmc-slate-500: #64748B;
    --mmc-slate-400: #94A3B8;
    --mmc-slate-300: #CBD5E1;
    --mmc-slate-200: #E2E8F0;
    --mmc-slate-100: #F1F5F9;
    --mmc-surface: #FFFFFF;
    --mmc-background: #F4F6F8;
    --mmc-success-ui: #15803D;
    --mmc-warning-ui: #B45309;
    --mmc-danger-ui: #B91C1C;
    --mmc-info-ui: #1D4ED8;
    --mmc-radius-sm: 8px;
    --mmc-radius-md: 12px;
    --mmc-radius-lg: 16px;
    --mmc-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --mmc-shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
    --mmc-font: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mmc-sidebar-width: 260px;

    /* Compatibilidad con variables históricas del sistema */
    --mmc-naranja: var(--mmc-primary);
    --mmc-naranja-dark: var(--mmc-primary-hover);
    --mmc-azul-gris: #58788C;
    --mmc-azul-gris-dark: #405D70;
    --mmc-blanco-metal: var(--mmc-background);
    --mmc-negro: var(--mmc-navy);
    --mmc-texto: var(--mmc-slate-700);
    --mmc-texto-light: var(--mmc-slate-500);
    --mmc-borde: var(--mmc-slate-200);
    --mmc-card: var(--mmc-surface);

    /* Bootstrap: identidad MMC */
    --bs-primary: var(--mmc-primary);
    --bs-primary-rgb: 242, 96, 34;
    --bs-body-font-family: var(--mmc-font);
    --bs-body-color: var(--mmc-slate-700);
    --bs-body-bg: var(--mmc-background);
    --bs-border-color: var(--mmc-slate-200);
    --bs-border-radius: var(--mmc-radius-sm);
    --bs-border-radius-lg: var(--mmc-radius-md);
}

html {
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea,
.tooltip,
.popover {
    font-family: var(--mmc-font) !important;
}

body {
    color: var(--mmc-slate-700);
    background-color: var(--mmc-background);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--mmc-navy);
    font-family: var(--mmc-font) !important;
    font-weight: 700;
    letter-spacing: -.015em;
}

h1, .h1 { font-size: clamp(1.65rem, 2.2vw, 2rem); }
h2, .h2 { font-size: clamp(1.4rem, 1.9vw, 1.7rem); }
h3, .h3 { font-size: clamp(1.22rem, 1.6vw, 1.45rem); }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: .95rem; }

p, label, td, th, li, small, .small {
    font-family: var(--mmc-font) !important;
}

.text-muted { color: var(--mmc-slate-500) !important; }
a { color: var(--mmc-primary-hover); }
a:hover { color: var(--mmc-primary); }

/* ----------------------------------------------------------------------
   Iconografía: Bootstrap Icons como lenguaje visual principal
   ---------------------------------------------------------------------- */
.bi {
    display: inline-block;
    line-height: 1;
    vertical-align: -.12em;
    font-size: 1em;
}

.btn .bi,
.nav-link .bi,
.sidebar a .bi,
.navbar-main .bi,
h1 .bi, h2 .bi, h3 .bi, h4 .bi, h5 .bi, h6 .bi {
    width: 1.1em;
    text-align: center;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------------
   Navegación y sidebar
   ---------------------------------------------------------------------- */
.sidebar {
    width: var(--mmc-sidebar-width) !important;
    box-sizing: border-box;
    background: linear-gradient(180deg, #172334 0%, #0B1220 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 6px 0 24px rgba(15, 23, 42, .18) !important;
}

.sidebar a {
    min-height: 40px;
    border-radius: var(--mmc-radius-sm) !important;
    color: #D7DEE7 !important;
    font-size: .9rem !important;
    font-weight: 500;
    letter-spacing: .005em;
}

.sidebar a:hover,
.sidebar a.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--mmc-primary), #E55819) !important;
    box-shadow: 0 5px 14px rgba(242, 96, 34, .22);
}

.sidebar a.sidebar-logo-link,
.sidebar a.sidebar-logo-link:hover,
.sidebar a.sidebar-logo-link.active {
    min-height: auto;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar img {
    object-fit: contain;
}

.navbar-main {
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--mmc-slate-200) !important;
    border-radius: var(--mmc-radius-md) !important;
    box-shadow: var(--mmc-shadow-sm) !important;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--mmc-slate-400);
    --bs-breadcrumb-item-active-color: var(--mmc-slate-500);
    font-size: .86rem;
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------
   Tarjetas, paneles y bloques de información
   ---------------------------------------------------------------------- */
.card,
.card-mmc,
.card-stats-cliente,
.card-seguimiento,
.card-mini,
.report-card,
.info-box,
.detail-box,
.helper-box,
.file-box,
.box {
    background-color: var(--mmc-surface) !important;
    border-color: var(--mmc-slate-200) !important;
    border-radius: var(--mmc-radius-md) !important;
    box-shadow: var(--mmc-shadow-sm) !important;
}

.card:hover,
.card-mmc:hover,
.card-stats-cliente:hover {
    border-color: #D3DAE4 !important;
}

.card-header {
    color: var(--mmc-navy);
    background: var(--mmc-slate-100) !important;
    border-bottom-color: var(--mmc-slate-200) !important;
    font-weight: 700;
}

.card-title,
.section-title,
.page-title,
.static-title,
.resultados-busqueda-title,
.buscador-cert-header {
    color: var(--mmc-navy) !important;
    font-weight: 700 !important;
}

.stat-number,
.big-number {
    color: var(--mmc-primary) !important;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
   Formularios
   ---------------------------------------------------------------------- */
.form-label {
    color: var(--mmc-slate-700) !important;
    font-size: .86rem;
    font-weight: 600;
    margin-bottom: .4rem;
}

.form-control,
.form-select,
.input-group-text {
    min-height: 40px;
    border-color: var(--mmc-slate-300) !important;
    border-radius: var(--mmc-radius-sm);
    color: var(--mmc-slate-700);
    font-size: .9rem;
}

.form-control,
.form-select {
    background-color: #FFFFFF;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--mmc-slate-400);
    opacity: 1;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--mmc-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(242, 96, 34, .14) !important;
}

.input-group-text {
    color: var(--mmc-slate-500) !important;
    background: var(--mmc-slate-100) !important;
}

.form-check-input:checked {
    background-color: var(--mmc-primary);
    border-color: var(--mmc-primary);
}

.form-text {
    color: var(--mmc-slate-500) !important;
    font-size: .78rem;
}

/* ----------------------------------------------------------------------
   Botones
   ---------------------------------------------------------------------- */
.btn,
.quick-btn,
.btn-login,
.btn-mmc-submit,
.btn-mmc-cancel {
    border-radius: var(--mmc-radius-sm) !important;
    font-size: .86rem;
    font-weight: 600;
    letter-spacing: .005em;
    line-height: 1.2;
    min-height: 38px;
    padding: .55rem .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.btn-sm {
    min-height: 32px;
    padding: .38rem .62rem;
    font-size: .79rem;
}

.btn-lg {
    min-height: 46px;
    padding: .7rem 1rem;
    font-size: .95rem;
}

.btn:hover,
.quick-btn:hover,
.btn-login:hover {
    transform: translateY(-1px);
}

.btn:focus-visible,
.quick-btn:focus-visible,
.btn-login:focus-visible {
    outline: 3px solid rgba(242, 96, 34, .22);
    outline-offset: 2px;
}

.btn-primary,
.quick-btn,
.btn-login,
.btn-mmc-submit {
    color: #FFFFFF !important;
    background-color: var(--mmc-primary) !important;
    border-color: var(--mmc-primary) !important;
    box-shadow: 0 4px 10px rgba(242, 96, 34, .18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.quick-btn:hover,
.btn-login:hover,
.btn-mmc-submit:hover {
    color: #FFFFFF !important;
    background-color: var(--mmc-primary-hover) !important;
    border-color: var(--mmc-primary-hover) !important;
}

.btn-secondary,
.btn-mmc-cancel {
    color: #FFFFFF !important;
    background-color: var(--mmc-slate-600) !important;
    border-color: var(--mmc-slate-600) !important;
}

.btn-secondary:hover,
.btn-mmc-cancel:hover {
    background-color: var(--mmc-slate-700) !important;
    border-color: var(--mmc-slate-700) !important;
}

.btn-success {
    background-color: var(--mmc-success-ui) !important;
    border-color: var(--mmc-success-ui) !important;
}

.btn-warning {
    color: #FFFFFF !important;
    background-color: var(--mmc-warning-ui) !important;
    border-color: var(--mmc-warning-ui) !important;
}

.btn-danger {
    background-color: var(--mmc-danger-ui) !important;
    border-color: var(--mmc-danger-ui) !important;
}

.btn-outline-primary {
    color: var(--mmc-primary-hover) !important;
    border-color: var(--mmc-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #FFFFFF !important;
    background-color: var(--mmc-primary) !important;
    border-color: var(--mmc-primary) !important;
}

.btn-outline-secondary {
    color: var(--mmc-slate-600) !important;
    border-color: var(--mmc-slate-300) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    color: #FFFFFF !important;
    background-color: var(--mmc-slate-600) !important;
    border-color: var(--mmc-slate-600) !important;
}

.btn-outline-danger {
    color: var(--mmc-danger-ui) !important;
    border-color: #F0A8A8 !important;
}

.btn-outline-danger:hover {
    color: #FFFFFF !important;
    background-color: var(--mmc-danger-ui) !important;
    border-color: var(--mmc-danger-ui) !important;
}

/* ----------------------------------------------------------------------
   Tablas
   ---------------------------------------------------------------------- */
.table-responsive {
    border-radius: var(--mmc-radius-sm);
}

.table {
    --bs-table-color: var(--mmc-slate-700);
    --bs-table-bg: #FFFFFF;
    --bs-table-border-color: var(--mmc-slate-200);
    font-size: .84rem;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: .72rem .68rem;
    border-bottom-color: var(--mmc-slate-200);
}

.table thead th,
.table .table-light th,
.table-light > th,
.table-light > td {
    color: var(--mmc-slate-700) !important;
    background: var(--mmc-slate-100) !important;
    border-bottom: 1px solid var(--mmc-slate-300) !important;
    font-size: .76rem !important;
    font-weight: 700;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: #FFF8F4;
    color: var(--mmc-slate-900);
}

/* ----------------------------------------------------------------------
   Badges, alertas y estados
   ---------------------------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    padding: .38em .68em;
}

.text-bg-primary,
.bg-primary {
    background-color: var(--mmc-primary) !important;
}

.text-bg-dark,
.bg-dark,
.badge-cat {
    background-color: var(--mmc-slate-900) !important;
}

.alert,
.alert-mmc,
.alert-soft {
    border-radius: var(--mmc-radius-sm) !important;
    border-width: 1px !important;
    box-shadow: none;
    font-size: .85rem !important;
    line-height: 1.45;
}

.alert-success {
    color: #166534 !important;
    background: #F0FDF4 !important;
    border-color: #BBF7D0 !important;
}

.alert-warning {
    color: #92400E !important;
    background: #FFFBEB !important;
    border-color: #FDE68A !important;
}

.alert-danger {
    color: #991B1B !important;
    background: #FEF2F2 !important;
    border-color: #FECACA !important;
}

.alert-info,
.alert-primary {
    color: #1E40AF !important;
    background: #EFF6FF !important;
    border-color: #BFDBFE !important;
}

/* ----------------------------------------------------------------------
   Modales y menús flotantes
   ---------------------------------------------------------------------- */
.modal-content {
    border: 1px solid var(--mmc-slate-200) !important;
    border-radius: var(--mmc-radius-lg) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .22) !important;
    overflow: hidden;
}

.modal-header {
    color: var(--mmc-navy);
    background: var(--mmc-slate-100);
    border-bottom-color: var(--mmc-slate-200) !important;
    padding: .9rem 1.1rem;
}

.modal-title {
    color: var(--mmc-navy) !important;
    font-size: 1rem;
    font-weight: 700;
}

.modal-body { padding: 1.1rem; }
.modal-footer {
    background: #FAFBFC;
    border-top-color: var(--mmc-slate-200) !important;
    padding: .8rem 1.1rem;
}

.dropdown-menu {
    border-color: var(--mmc-slate-200);
    border-radius: var(--mmc-radius-sm);
    box-shadow: var(--mmc-shadow-md);
    padding: .4rem;
}

.dropdown-item {
    border-radius: 6px;
    font-size: .86rem;
    padding: .5rem .65rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--mmc-navy);
    background: var(--mmc-primary-soft);
}

/* ----------------------------------------------------------------------
   Pantalla de acceso y vistas públicas
   ---------------------------------------------------------------------- */
.login-card {
    background: #FFFFFF !important;
    border: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 0 24px 60px rgba(2, 6, 23, .32) !important;
}

.login-title { color: var(--mmc-primary) !important; }
.login-subtitle { color: var(--mmc-slate-500) !important; }

.card-seguimiento {
    background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFC 100%) !important;
}

/* ----------------------------------------------------------------------
   Pie y carrusel de marcas
   ---------------------------------------------------------------------- */
.logos-marcas-container {
    background: #FFFFFF !important;
    border-top-color: var(--mmc-slate-200) !important;
}

.logos-marcas-strip img {
    object-fit: contain;
}

.footer-futurista {
    background: #FFFFFF !important;
    color: var(--mmc-slate-500) !important;
    border-top-color: var(--mmc-slate-200) !important;
}

.footer-futurista a {
    color: var(--mmc-primary-hover) !important;
}


@media (min-width: 992px) {
    /* El desplazamiento lo controla .main; evita el doble margen histórico del body. */
    body { padding-left: 0 !important; }

    body > .sidebar ~ .logos-marcas-container,
    body > .sidebar ~ .footer-futurista {
        width: calc(100% - 260px);
        margin-left: 260px;
    }
}

/* ----------------------------------------------------------------------
   Accesibilidad y consistencia
   ---------------------------------------------------------------------- */
:focus-visible {
    outline-color: var(--mmc-primary);
}

code {
    color: #9A3412;
    background: #FFF7ED;
    border-radius: 5px;
    padding: .08rem .3rem;
    font-size: .84em;
}

hr { border-color: var(--mmc-slate-200); opacity: 1; }

@media (max-width: 767.98px) {
    .btn { white-space: normal; }

    .navbar-main {
        gap: .75rem;
    }

    .table tbody tr {
        border: 1px solid var(--mmc-slate-200) !important;
        box-shadow: var(--mmc-shadow-sm) !important;
    }

    .table tbody tr td::before {
        color: var(--mmc-slate-500) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ----------------------------------------------------------------------
   Corrección de centrado: sidebar fijo sin recortar el contenido
   ---------------------------------------------------------------------- */
@media (min-width: 992px) {
    body {
        padding-left: var(--mmc-sidebar-width) !important;
    }
}

@media (max-width: 991px) {
    body {
        padding-left: 0 !important;
    }
}


/* ======================================================================
   v22 · Corrección definitiva del carrusel y footer en panel administrativo
   El body ya reserva el ancho del sidebar. Evita aplicar un segundo
   desplazamiento horizontal al carrusel y al pie de página.
   ====================================================================== */
@media (min-width: 992px) {
    body.mmc-admin-page > .logos-marcas-container,
    body.mmc-admin-page > .footer-futurista {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        transform: none !important;
    }
}