/* ===================== SISPRO - Estilos base ===================== */
:root {
    --sp-primary: #1d4e89;
    --sp-primary-dark: #0f2747;
    --sp-accent: #f5a524;
    --sp-bg: #f3f5f9;
    --sp-border: #e3e8ef;
    --sp-radius: .75rem;
    --bs-primary: #1d4e89;
    --bs-primary-rgb: 29, 78, 137;
    --bs-link-color: #1d4e89;
    --bs-link-hover-color: #0f2747;
}

body {
    background: var(--sp-bg);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: .925rem;
    color: #1f2937;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* ---------- Botones ---------- */
.btn-primary {
    --bs-btn-bg: var(--sp-primary);
    --bs-btn-border-color: var(--sp-primary);
    --bs-btn-hover-bg: var(--sp-primary-dark);
    --bs-btn-hover-border-color: var(--sp-primary-dark);
    --bs-btn-active-bg: var(--sp-primary-dark);
    --bs-btn-disabled-bg: var(--sp-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--sp-primary);
    --bs-btn-border-color: var(--sp-primary);
    --bs-btn-hover-bg: var(--sp-primary);
    --bs-btn-hover-border-color: var(--sp-primary);
    --bs-btn-active-bg: var(--sp-primary-dark);
}
.btn { border-radius: .5rem; font-weight: 500; }
.btn-icon { width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Navbar ---------- */
.navbar-sispro {
    background: linear-gradient(90deg, var(--sp-primary-dark) 0%, var(--sp-primary) 100%);
    box-shadow: 0 2px 12px rgba(15, 39, 71, .25);
}
.navbar-sispro .navbar-brand { font-weight: 700; letter-spacing: .04em; }
.navbar-sispro .brand-mark {
    width: 34px; height: 34px; border-radius: .55rem;
    background: var(--sp-accent); color: var(--sp-primary-dark);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.navbar-sispro .nav-link {
    color: rgba(255, 255, 255, .8);
    font-weight: 500;
    padding: .5rem .9rem !important;
    border-radius: .5rem;
    transition: background-color .15s, color .15s;
    white-space: nowrap; /* el ícono y el texto en una sola línea (ej: "Inicio" en pantallas de 1366 px) */
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    .navbar-sispro .nav-link { padding: .5rem .6rem !important; }
}
.navbar-sispro .nav-link:hover,
.navbar-sispro .nav-link:focus { color: #fff; background: rgba(255, 255, 255, .1); }
.navbar-sispro .nav-link.active { color: #fff; background: rgba(255, 255, 255, .16); }
.navbar-sispro .dropdown-menu {
    border: 0; border-radius: var(--sp-radius);
    box-shadow: 0 12px 32px rgba(15, 39, 71, .18);
    padding: .5rem; margin-top: .5rem !important; min-width: 15rem;
}
.navbar-sispro .dropdown-item { border-radius: .45rem; padding: .5rem .75rem; display: flex; align-items: center; gap: .6rem; }
.navbar-sispro .dropdown-item i { color: var(--sp-primary); width: 1.1rem; text-align: center; }
.navbar-sispro .dropdown-item.active, .navbar-sispro .dropdown-item:active { background: #e8eef7; color: var(--sp-primary-dark); }
.navbar-sispro .dropdown-header { text-transform: uppercase; font-size: .7rem; letter-spacing: .06em; }
.planta-actual {
    display: flex; align-items: center; gap: .6rem;
    padding: .35rem .8rem; border-radius: .6rem; max-width: 280px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
    color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600; line-height: 1.15;
    transition: background-color .15s;
}
.planta-actual:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.planta-actual small { font-size: .65rem; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.planta-actual > .bi-building, .planta-actual > .bi-calendar3 { color: var(--sp-accent); font-size: 1.1rem; }
.planta-actual-vacia { background: rgba(245, 165, 36, .25); border-color: rgba(245, 165, 36, .5); }
.planta-actual.periodo-cerrado { background: rgba(220, 53, 69, .3); border-color: rgba(255, 120, 130, .6); }
.planta-actual.periodo-cerrado > .bi-lock-fill { color: #ffb4bb; font-size: 1.1rem; }
@media (max-width: 991.98px) { .planta-actual { margin: .5rem 0; max-width: none; } }

/* Sub-menús dentro de un dropdown (ej: Maestros › Producción) */
.dropdown-submenu { position: relative; }
.dropdown-submenu .submenu-flecha { margin-left: auto; width: auto !important; font-size: .75rem; color: #94a3b8 !important; transition: transform .15s; }
.dropdown-submenu > .dropdown-menu { display: none; top: -.5rem; left: 100%; margin: 0 0 0 .35rem !important; }
.dropdown-submenu.show > .dropdown-menu { display: block; }
.dropdown-submenu.show > .submenu-toggle { background: #e8eef7; color: var(--sp-primary-dark); }
@media (min-width: 992px) {
    /* Escritorio: se abre al pasar el cursor, hacia la derecha */
    .dropdown-submenu:hover > .dropdown-menu { display: block; }
    .dropdown-submenu:hover > .submenu-toggle { background: #e8eef7; color: var(--sp-primary-dark); }
    /* Puente invisible para no perder el hover al mover el cursor hacia el sub-menú */
    .dropdown-submenu > .dropdown-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.5rem; width: .5rem; }
}
@media (max-width: 991.98px) {
    /* Celular / menú colapsado: se despliega debajo, indentado */
    .dropdown-submenu > .dropdown-menu { position: static; box-shadow: none !important; margin: .25rem 0 .25rem 1.25rem !important; padding: 0 0 0 .5rem; border-left: 2px solid #e3e8ef !important; border-radius: 0; min-width: 0; }
    .dropdown-submenu.show .submenu-flecha { transform: rotate(90deg); }
}

.avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .8rem;
}

/* ---------- Encabezado de página ---------- */
.page-header { padding: 1.75rem 0 1.25rem; }
.page-header h1 { font-size: 1.45rem; font-weight: 700; margin: 0; color: var(--sp-primary-dark); }
.page-header .page-icon {
    width: 44px; height: 44px; border-radius: .7rem;
    background: #e8eef7; color: var(--sp-primary);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.breadcrumb { font-size: .8rem; margin-bottom: .25rem; }
.breadcrumb a { text-decoration: none; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04);
}
.card-header { background: #fff; border-bottom: 1px solid var(--sp-border); padding: 1rem 1.25rem; }
.card-header:first-child { border-radius: var(--sp-radius) var(--sp-radius) 0 0; }
.card-footer { background: #fafbfd; border-top: 1px solid var(--sp-border); }

/* ---------- Tablas ---------- */
.table-sispro { margin-bottom: 0; }
.table-sispro thead th {
    background: #f8fafc; color: #64748b;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--sp-border); white-space: nowrap; padding: .8rem 1rem;
}
.table-sispro td { padding: .8rem 1rem; vertical-align: middle; border-color: #eef1f5; }
/* Listado de recepciones: muchas columnas, espaciado compacto */
.tabla-recepciones thead th, .tabla-recepciones td { padding: .6rem .4rem; }
.tabla-recepciones .btn-icon { width: 30px; height: 30px; }
.contador-mini { font-size: .6rem; padding: .2em .45em; }
/* Stock total: muchas columnas; encabezados en dos líneas para que quepa en pantalla */
.tabla-stock thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.tabla-stock thead th, .tabla-stock td { padding: .6rem .45rem; }
/* Listados con muchas columnas: la primera (N°) y la última (Acciones) quedan fijas al desplazar horizontalmente */
.tabla-columnas-fijas th:first-child, .tabla-columnas-fijas td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.tabla-columnas-fijas th:last-child, .tabla-columnas-fijas td:last-child { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -6px 0 6px -6px rgba(15, 39, 71, .25); }
.tabla-columnas-fijas thead th:first-child, .tabla-columnas-fijas thead th:last-child { background: #f8fafc; }
.tabla-columnas-fijas tbody tr:hover td:first-child, .tabla-columnas-fijas tbody tr:hover td:last-child { background: #f9fbfe; }
.tabla-columnas-fijas td[colspan], .tabla-columnas-fijas tfoot td:last-child { position: static; box-shadow: none; }
/* Detalle moldeo: muchas columnas (desplazamiento horizontal); N° pieza y Acciones quedan fijas */
.table-detalle-moldeo thead th, .table-detalle-moldeo td { padding: .55rem .5rem; }
.table-detalle-moldeo .btn-icon { width: 30px; height: 30px; }
.table-detalle-moldeo th:first-child, .table-detalle-moldeo td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
.table-detalle-moldeo.con-acciones th:last-child, .table-detalle-moldeo.con-acciones td:last-child { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -6px 0 6px -6px rgba(15, 39, 71, .25); }
.table-detalle-moldeo thead th:first-child, .table-detalle-moldeo.con-acciones thead th:last-child { background: #f8fafc; }
.table-detalle-moldeo.con-acciones tfoot td:last-child { position: static; box-shadow: none; }
/* Detalle empaque: compacta para que sus columnas quepan en pantalla (encabezados en dos líneas) */
.table-detalle-moldeo.tabla-compacta thead th { white-space: normal; font-size: .66rem; line-height: 1.2; vertical-align: bottom; padding: .45rem .25rem; }
.table-detalle-moldeo.tabla-compacta td { font-size: .8rem; padding: .45rem .25rem; }
.table-detalle-moldeo.tabla-compacta .badge.fs-6 { font-size: .85rem !important; }
.table-detalle-moldeo.tabla-compacta .btn-icon { width: 28px; height: 28px; }
.table-sispro tbody tr:hover { background: #f9fbfe; }
.table-sispro tbody tr:last-child td { border-bottom: 0; }

.table-sispro thead th .orden-col { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.table-sispro thead th .orden-col i { font-size: .65rem; opacity: .45; }
.table-sispro thead th .orden-col:hover { color: var(--sp-primary); }
.table-sispro thead th .orden-col.activo { color: var(--sp-primary-dark); }
.table-sispro thead th .orden-col.activo i { opacity: 1; color: var(--sp-primary); }

.empty-state { padding: 3rem 1rem; text-align: center; color: #94a3b8; }

/* Dashboard: contexto de trabajo */

/* Cierre de periodos */
.periodo-mes { border-left: 4px solid #22c55e; }
.periodo-mes.cerrado { border-left-color: #dc3545; background: #fffafa; }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: .5rem; }

/* ---------- Badges ---------- */
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-danger { background: #fee2e2; color: #991b1b; }
.badge-soft-primary { background: #e0ebf8; color: var(--sp-primary-dark); }
.badge { font-weight: 600; padding: .4em .7em; border-radius: .45rem; }

/* ---------- Formularios ---------- */
.form-label { font-weight: 600; font-size: .85rem; color: #334155; }
.form-control, .form-select { border-radius: .5rem; border-color: #d5dce6; padding: .55rem .8rem; }
/* El select reserva espacio a la derecha para su flecha */
.form-select { padding-right: 2.25rem; }
.form-select-sm { padding: .25rem 2rem .25rem .6rem; }
.form-control:focus, .form-select:focus { border-color: #7aa2d6; box-shadow: 0 0 0 .2rem rgba(29, 78, 137, .15); }
.required::after { content: " *"; color: #dc3545; }
.form-switch .form-check-input { width: 2.6em; height: 1.35em; cursor: pointer; }
.form-check-input:checked { background-color: var(--sp-primary); border-color: var(--sp-primary); }

/* ---------- Tarjetas de estadística ---------- */
.stat-card { transition: transform .15s, box-shadow .15s; text-decoration: none; color: inherit; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(16, 24, 40, .08); }
.stat-card .stat-icon {
    width: 48px; height: 48px; border-radius: .8rem;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }

/* ---------- Asignación de plantas ---------- */
.planta-option { cursor: pointer; transition: border-color .15s, background-color .15s; }
.planta-option:hover { border-color: #9db8dc; }
.planta-option:has(input:checked) { border-color: var(--sp-primary); background: #f1f6fc; }

/* ---------- Login ---------- */
.login-wrapper {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, #2b64a8 0%, var(--sp-primary-dark) 60%);
}
.login-card { max-width: 420px; width: 100%; border: 0; border-radius: 1rem; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }

footer.app-footer { color: #94a3b8; font-size: .8rem; }

/* ---------- Selector de contexto (planta, mes y año) — diseño compacto ---------- */
.contexto-cabecera { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; margin-bottom: .9rem; border-bottom: 1px solid var(--sp-border); }
.contexto-logo {
    width: 40px; height: 40px; border-radius: .6rem; flex-shrink: 0; font-size: 1.3rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-accent); color: var(--sp-primary-dark);
}
.contexto-h1 { font-size: 1.1rem; font-weight: 700; color: var(--sp-primary-dark); margin: 0; line-height: 1.2; }
.contexto-saludo { font-size: .8rem; color: #64748b; }
.min-w-0 { min-width: 0; }

.contexto-grupo { border: 0; padding: 0; margin: 0 0 .9rem; min-width: 0; }
.contexto-titulo {
    display: flex; align-items: center; gap: .45rem;
    font-size: .85rem; font-weight: 700; color: var(--sp-primary-dark); margin-bottom: .45rem; float: none; width: auto;
}
.contexto-paso {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    background: var(--sp-primary); color: #fff; font-size: .68rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.contexto-fila { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; }
.contexto-fila:last-of-type { margin-bottom: 0; }
.contexto-subtitulo { width: 34px; flex-shrink: 0; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }

/* Plantas: tarjetas seleccionables */
.contexto-plantas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: .45rem;
    max-height: 172px; overflow-y: auto; padding: 2px;
}
.contexto-planta {
    position: relative; display: flex; align-items: center; gap: .55rem; min-width: 0; margin: 0;
    padding: .45rem .6rem; border: 1.5px solid var(--sp-border); border-radius: .6rem; background: #fff;
    cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.contexto-planta:hover { border-color: #9db8dc; background: #f8fbff; }
.contexto-planta-icono {
    width: 30px; height: 30px; border-radius: .5rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e8eef7; color: var(--sp-primary); font-size: .95rem;
    transition: background-color .15s, color .15s;
}
.contexto-planta-texto { display: flex; flex-direction: column; min-width: 0; }
.contexto-planta-nombre { font-weight: 600; font-size: .85rem; color: #1f2937; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contexto-planta-codigo { font-size: .7rem; color: #64748b; font-family: var(--bs-font-monospace); white-space: nowrap; }
/* El ícono del edificio se transforma en ✓ al seleccionar */
.contexto-planta-icono .bi-check-lg { display: none; }
.contexto-planta-codigo .badge { font-family: var(--bs-body-font-family); font-size: .58rem; padding: .2em .45em; }

.btn-check:checked + .contexto-planta { border-color: var(--sp-primary); background: #f1f6fc; box-shadow: 0 0 0 3px rgba(29, 78, 137, .12); }
.btn-check:checked + .contexto-planta .contexto-planta-icono { background: var(--sp-primary); color: #fff; }
.btn-check:checked + .contexto-planta .bi-building { display: none; }
.btn-check:checked + .contexto-planta .bi-check-lg { display: inline; }
.btn-check:focus-visible + .contexto-planta,
.btn-check:focus-visible + .contexto-chip { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* Año y mes: botones tipo "chip" (meses en una sola fila) */
.contexto-anios { display: flex; flex-wrap: wrap; gap: .3rem; }
.contexto-meses { flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: .25rem; min-width: 0; }
.contexto-chip {
    display: inline-flex; align-items: center; justify-content: center; min-width: 0; margin: 0;
    padding: .3rem .55rem; border: 1.5px solid var(--sp-border); border-radius: .45rem; background: #fff;
    font-weight: 600; font-size: .78rem; color: #334155; cursor: pointer; user-select: none;
    transition: border-color .15s, background-color .15s, color .15s;
}
.contexto-meses .contexto-chip { padding-left: 0; padding-right: 0; }
.contexto-chip:hover { border-color: #9db8dc; background: #f8fbff; }
.btn-check:checked + .contexto-chip { background: var(--sp-primary); border-color: var(--sp-primary); color: #fff; }
.contexto-candado { display: none; font-size: .6rem; margin-left: .15rem; }
.contexto-chip.cerrado { color: #b42318; border-style: dashed; }
.contexto-chip.cerrado .contexto-candado { display: inline; }
.btn-check:checked + .contexto-chip.cerrado { background: #b42318; border-color: #b42318; color: #fff; }

/* Resumen + botón en una línea */
.contexto-acciones { display: flex; align-items: stretch; gap: .6rem; }
.contexto-resumen {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem;
    padding: .4rem .7rem; border-radius: .5rem; background: #f8fafc; border: 1px dashed #cbd5e1;
    font-size: .78rem; color: #475569; line-height: 1.25;
}
.contexto-resumen i { color: var(--sp-primary); }
.contexto-resumen strong { color: var(--sp-primary-dark); }
.contexto-error { display: none; color: var(--bs-danger); font-size: .75rem; margin-top: .3rem; }
.was-validated .contexto-grupo:has(input:invalid) .contexto-error { display: block; }
.was-validated .contexto-grupo:has(input:invalid) .contexto-planta,
.was-validated .contexto-grupo:has(input:invalid) .contexto-chip { border-color: rgba(220, 53, 69, .45); }

@media (max-width: 575.98px) {
    .contexto-fila { align-items: flex-start; }
    .contexto-meses { grid-template-columns: repeat(6, 1fr); }
    .contexto-acciones { flex-direction: column; }
    .login-card .card-body { padding: 1rem .9rem !important; }
}
.page-header-acciones > .btn, .page-header-acciones > a, .page-header-acciones .dropdown > .btn { white-space: nowrap; }
/* Menú Configuración en columnas (horizontal en pantallas grandes) */
@media (min-width: 992px) { .menu-columnas { min-width: 460px; } .menu-columnas ul { min-width: 220px; } }

/* Tabla compacta (listados anchos): títulos en dos líneas y menos espacio entre celdas, para que quepan en 1366 px */
.table-sispro.tabla-compacta { font-size: .85rem; }
.table-sispro.tabla-compacta thead th { white-space: normal; line-height: 1.15; vertical-align: bottom; padding: .55rem .6rem; }
.table-sispro.tabla-compacta thead th .orden-col { white-space: normal; }
.table-sispro.tabla-compacta td { padding: .45rem .6rem; }