/* Base visual P11.2. Solo se carga en el marco del sistema y en el login.
   Bootstrap 5.1 necesita reglas explícitas: sus botones no usan variables 5.3. */
:root {
    --marca-azul: #16305B;
    --marca-azul-rgb: 22, 48, 91;
    --marca-accion: #2A5CAA;
    --marca-accion-rgb: 42, 92, 170;
    --marca-suave: #E8EDF5;
    --marca-plata: #A3AEBD; /* Solo detalles; nunca texto. */
    --marca-fondo: #F4F6F9;
    --marca-superficie: #FFFFFF;
    --marca-borde: #DCE2EA;
    --marca-texto: #1B2433;
    --marca-secundario: #5A6679;
    --marca-exito: #1F7A4D;
    --marca-exito-fondo: #E7F4EC;
    --marca-aviso: #8A5300;
    --marca-aviso-fondo: #FFF3DC;
    --marca-error: #B42318;
    --marca-error-fondo: #FDECEA;
    --marca-titulo: "Sora", system-ui, sans-serif;
    --marca-cuerpo: "Inter", system-ui, sans-serif;
    --bs-primary: var(--marca-azul);
    --bs-primary-rgb: var(--marca-azul-rgb);
    --bs-success: var(--marca-exito);
    --bs-success-rgb: 31, 122, 77;
    --bs-warning: var(--marca-aviso);
    --bs-warning-rgb: 138, 83, 0;
    --bs-danger: var(--marca-error);
    --bs-danger-rgb: 180, 35, 24;
    --bs-info: var(--marca-accion);
    --bs-info-rgb: var(--marca-accion-rgb);
    --bs-body-color: var(--marca-texto);
    --bs-body-bg: var(--marca-fondo);
    --bs-body-font-family: var(--marca-cuerpo);
}

html { font-size: 16px; }
body {
    background: var(--marca-fondo);
    color: var(--marca-texto);
    font-family: var(--marca-cuerpo);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
    color: var(--marca-azul);
    font-family: var(--marca-titulo);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.025em;
}
h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h2 { font-size: clamp(1.5rem, 2.5vw, 1.875rem); }
a { color: var(--marca-accion); }
a:hover { color: var(--marca-azul); }
.nav-link { color: var(--marca-accion); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--marca-azul); color: white; }
.text-black-50 { color: var(--marca-secundario) !important; }
.text-white-50 { color: white !important; }
.valid-feedback, .valid-tooltip { color: var(--marca-exito); }
.invalid-feedback, .invalid-tooltip { color: var(--marca-error); }
p a, .alert a, .login-help a { text-decoration: underline; }
.text-primary { color: var(--marca-azul) !important; }
.text-muted, .text-secondary, .text-slate-500, .text-slate-600 { color: var(--marca-secundario) !important; }
.text-dark, .text-body { color: var(--marca-texto) !important; }
.text-success { color: var(--marca-exito) !important; }
.text-warning { color: var(--marca-aviso) !important; }
.text-danger { color: var(--marca-error) !important; }
.text-info { color: var(--marca-accion) !important; }
.bg-primary { background-color: var(--marca-azul) !important; color: white !important; }
.bg-success { background-color: var(--marca-exito-fondo) !important; color: var(--marca-exito) !important; }
.bg-warning { background-color: var(--marca-aviso-fondo) !important; color: var(--marca-aviso) !important; }
.bg-danger { background-color: var(--marca-error-fondo) !important; color: var(--marca-error) !important; }
.bg-info { background-color: var(--marca-suave) !important; color: var(--marca-azul) !important; }
/* Coordinador (P11.2): con bg-opacity, bg-primary es un tinte suave, no el azul sólido; si no, el ícono azul desaparece. */
.bg-primary[class*="bg-opacity-"] { background-color: var(--marca-suave) !important; color: var(--marca-azul) !important; }

.btn {
    font-family: var(--marca-titulo);
    font-size: 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    box-shadow: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.btn-sm { font-size: 0.875rem; padding: 0.375rem 0.75rem; }
.btn-primary, .btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--marca-azul);
    border-color: var(--marca-azul);
    color: white;
    opacity: 1;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--marca-accion);
    border-color: var(--marca-accion);
    color: white;
    transform: none;
    box-shadow: none;
}
.btn-outline-primary {
    color: var(--marca-azul);
    border-color: var(--marca-azul);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled { color: var(--marca-azul); border-color: var(--marca-azul); opacity: 1; }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-primary.active, .btn-check:checked + .btn-outline-primary,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--marca-azul);
    border-color: var(--marca-azul);
    color: white;
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary {
    background-color: var(--marca-accion);
    border-color: var(--marca-accion);
    color: white;
}
.btn-success { background-color: var(--marca-exito); border-color: var(--marca-exito); color: white; }
.btn-danger { background-color: var(--marca-error); border-color: var(--marca-error); color: white; }
.btn-warning { background-color: var(--marca-aviso-fondo); border-color: var(--marca-aviso); color: var(--marca-aviso); }
.btn-info { background-color: var(--marca-suave); border-color: var(--marca-accion); color: var(--marca-azul); }
.btn-success:hover, .btn-success:focus, .btn-success:active { background-color: var(--marca-exito); border-color: var(--marca-exito); color: white; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--marca-error); border-color: var(--marca-error); color: white; }
.btn-warning:hover, .btn-warning:focus, .btn-warning:active { background-color: var(--marca-aviso); border-color: var(--marca-aviso); color: white; }
.btn-info:hover, .btn-info:focus, .btn-info:active { background-color: var(--marca-accion); border-color: var(--marca-accion); color: white; }
.btn-outline-success { color: var(--marca-exito); border-color: var(--marca-exito); }
.btn-outline-danger { color: var(--marca-error); border-color: var(--marca-error); }
.btn-outline-warning { color: var(--marca-aviso); border-color: var(--marca-aviso); }
.btn-outline-info { color: var(--marca-accion); border-color: var(--marca-accion); }
.btn-outline-success:hover { color: white; background-color: var(--marca-exito); border-color: var(--marca-exito); }
.btn-outline-danger:hover { color: white; background-color: var(--marca-error); border-color: var(--marca-error); }
.btn-outline-warning:hover { color: white; background-color: var(--marca-aviso); border-color: var(--marca-aviso); }
.btn-outline-info:hover { color: white; background-color: var(--marca-accion); border-color: var(--marca-accion); }
.btn-link { color: var(--marca-accion); }

.form-control, .form-select, .input-group-text {
    font-family: var(--marca-cuerpo);
    font-size: 1rem;
    color: var(--marca-texto);
    border-color: var(--marca-borde);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}
.form-control::placeholder { color: var(--marca-secundario); opacity: 1; }
.input-group-text { background: var(--marca-fondo); }
.form-label { color: var(--marca-texto); font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--marca-accion);
    box-shadow: 0 0 0 0.2rem rgba(var(--marca-accion-rgb), 0.2);
}
.form-check-input { border-color: var(--marca-secundario); }
.form-check-input:checked { background-color: var(--marca-azul); border-color: var(--marca-azul); }
.form-check-input:indeterminate { background-color: var(--marca-azul); border-color: var(--marca-azul); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-check:focus-visible + .btn {
    outline: 3px solid var(--marca-accion);
    outline-offset: 3px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--marca-azul);
    color: white;
}
.nav-pills .nav-link { font-family: var(--marca-titulo); }
.page-link { color: var(--marca-accion); border-color: var(--marca-borde); }
.page-link:hover { color: var(--marca-azul); background-color: var(--marca-suave); }
.page-link:focus { color: var(--marca-azul); box-shadow: 0 0 0 0.2rem rgba(var(--marca-accion-rgb), 0.2); }
.page-item.active .page-link { background-color: var(--marca-azul); border-color: var(--marca-azul); color: white; }
.page-item.disabled .page-link { color: var(--marca-secundario); }

.alert { border-radius: 0.75rem; padding: 1rem 1.25rem; }
.alert-primary, .alert-info { color: var(--marca-azul); background-color: var(--marca-suave); border-color: var(--marca-borde); }
.alert-success { color: var(--marca-exito); background-color: var(--marca-exito-fondo); border-color: var(--marca-exito); }
.alert-warning { color: var(--marca-aviso); background-color: var(--marca-aviso-fondo); border-color: var(--marca-aviso); }
.alert-danger { color: var(--marca-error); background-color: var(--marca-error-fondo); border-color: var(--marca-error); }
.alert .alert-link { color: inherit; }
.badge { font-family: var(--marca-cuerpo); font-weight: 600; letter-spacing: normal; line-height: 1.4; }
.badge.bg-primary { color: var(--marca-azul) !important; background-color: var(--marca-suave) !important; }
.badge.bg-secondary { color: var(--marca-secundario) !important; background-color: var(--marca-fondo) !important; }

.card {
    background: var(--marca-superficie);
    border: 1px solid var(--marca-borde) !important;
    border-radius: 0.75rem !important;
    box-shadow: none !important;
    transition: none;
}
.card-header { padding: 1.25rem 1.5rem !important; border-color: var(--marca-borde) !important; }
.card-footer { border-color: var(--marca-borde) !important; border-radius: 0 0 0.75rem 0.75rem !important; }
.table { color: var(--marca-texto); font-family: var(--marca-cuerpo); font-variant-numeric: tabular-nums; }
.table > thead > tr > th { color: var(--marca-secundario); text-transform: none; font-size: 0.875rem; letter-spacing: normal; }
.table-active { --bs-table-accent-bg: var(--marca-suave); }
.table-primary { --bs-table-bg: var(--marca-suave); --bs-table-color: var(--marca-azul); }
input[type="number"], .tabular-nums { font-variant-numeric: tabular-nums; }

/* Marco: desde 1200 px, una sola fila con la óptica, el menú y la cuenta; por debajo, todo va en "Menú". */
body.sistema-optica { min-height: 100vh; display: flex; flex-direction: column; margin-bottom: 0; }
.system-header { background: var(--marca-azul); }
.system-header .navbar { padding: 0.75rem clamp(1rem, 1.25vw, 1.5rem); }
.system-header .container-fluid { gap: 0.75rem; padding: 0; }
.system-header .navbar-brand {
    color: white;
    font-family: var(--marca-titulo);
    font-size: 1rem;
    font-weight: 600;
    height: 2.5rem;
    margin: 0;
    min-width: 0;
    max-width: calc(100% - 7rem);
}
.system-optica-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.system-optica-logo { max-width: 5rem; max-height: 2.5rem; object-fit: contain; margin-right: 0.75rem; flex-shrink: 0; }
/* Margen libre del kit: la mitad del alto del símbolo. */
.system-optica-symbol { width: 1.75rem; height: 1.75rem; margin-right: 0.875rem; flex-shrink: 0; }
.system-header .navbar-collapse { gap: 0.75rem; }
.system-menu, .system-account { gap: 0.125rem; }
.system-header .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white !important;
    font-family: var(--marca-titulo);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    overflow-wrap: anywhere;
}
.system-header .dropdown-toggle::after { margin-left: 0; }
.system-header .nav-link:hover, .system-header .nav-link:focus { background-color: rgba(255, 255, 255, 0.1); }
.system-header .nav-link.active {
    color: var(--marca-azul) !important;
    background: white;
    box-shadow: inset 0 -3px var(--marca-plata);
    font-weight: 600;
}
.system-header .nav-link.active .bi { color: inherit !important; }
.system-header .nav-link .bi { color: white !important; }
.system-header .navbar-brand:focus-visible, .system-header .nav-link:focus-visible, .system-header .navbar-toggler:focus-visible { outline-color: white; }
.system-header .navbar-toggler { flex-shrink: 0; color: white; border-color: rgba(255, 255, 255, 0.6); font-family: var(--marca-titulo); font-size: 0.875rem; padding: 0.5rem 0.75rem; }
.system-header .navbar-toggler-icon { width: 1.125rem; height: 1.125rem; vertical-align: middle; }
.system-header .dropdown-menu { max-width: calc(100vw - 3rem); border: 1px solid var(--marca-borde) !important; border-radius: 0.75rem; box-shadow: 0 4px 12px rgba(22, 48, 91, 0.1) !important; }
.system-header .dropdown-item { color: var(--marca-texto); padding: 0.625rem 1rem; white-space: normal; font-size: 0.9375rem; }
.system-header .dropdown-item .bi { color: inherit !important; }
.system-header .dropdown-item:hover, .system-header .dropdown-item:focus { color: var(--marca-azul); background: var(--marca-suave); }
.system-header .dropdown-item.active { color: white; background: var(--marca-azul); }
.system-header .system-account { align-items: stretch; }
.system-account .nav-link .bi { font-size: 1.25rem; line-height: 1; }
.system-header .system-user { border: 0; background: transparent; width: 100%; text-align: left; }
.system-user-name { max-width: 10rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.system-user-header { display: none; }
.system-user-header .dropdown-header { color: var(--marca-secundario); }
.system-header .nav-link[title="Notificaciones"]::after { content: "Avisos"; }
.system-header .nav-link[title="Notificaciones"] .badge { position: static !important; transform: none !important; font-size: 0.75rem !important; }
.system-logout { margin: 0; }
.system-content { flex: 1; width: 100%; min-width: 0; padding: 1.75rem clamp(1rem, 3vw, 2.5rem); }
.system-back { margin-bottom: 1.5rem; }
.system-footer { display: flex; justify-content: center; align-items: center; gap: 0.75rem; padding: 1.5rem; color: var(--marca-secundario); font-size: 0.875rem; }
.system-footer img { width: 144px; height: auto; margin: 0.75rem; }
.system-content .btn-hover-gray:hover { background: var(--marca-suave) !important; color: var(--marca-azul) !important; border-color: var(--marca-borde) !important; }

@media (min-width: 1200px) {
    /* Solo el nombre de la óptica se achica (con "…"); menú y cuenta conservan su ancho. */
    .system-header .container-fluid { gap: 1rem; }
    .system-header .navbar-brand { max-width: none; }
    .system-header .navbar-collapse { flex-shrink: 0; }
    .system-account { margin-left: auto; }
    .system-header .navbar-nav .nav-link { font-size: 0.8125rem; gap: 0.25rem; padding: 0.5rem 0.375rem; white-space: nowrap; overflow-wrap: normal; }
    .system-header .dropdown-menu { right: 0; left: auto; width: max-content; margin-top: 0.875rem; }
    /* Avisos: solo el ícono y su contador; "Avisos" se sigue anunciando. */
    .system-header .nav-link[title="Notificaciones"]::after { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .system-header .nav-link[title="Notificaciones"] .badge { position: absolute !important; top: 0.125rem !important; left: auto !important; right: -0.125rem; font-size: 0.6875rem !important; line-height: 1; padding: 0.2rem 0.375rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    /* Sin espacio para el nombre del usuario: el botón lo sigue anunciando y su menú lo muestra arriba. */
    .system-user-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .system-user-header { display: block; }
}
@media (min-width: 1600px) {
    .system-header .navbar-nav .nav-link { font-size: 0.875rem; gap: 0.3125rem; padding: 0.5rem; }
}
@media (max-width: 1199.98px) {
    .system-header .navbar-collapse { width: 100%; }
    .system-menu { padding-top: 0.75rem; }
    .system-account { padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.3); margin-top: 0.75rem; }
    .system-header .dropdown-menu { width: 100% !important; min-width: 0; max-width: 100%; }
}

/* Login: una acción principal y ninguna imagen decorativa externa. */
.login-screen { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100dvh; }
.login-brand-panel { background: var(--marca-azul); color: white; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 5rem); }
.login-brand-content { max-width: 28rem; }
.login-brand-logo { width: min(100%, 300px); height: auto; margin: 1.5rem 0 3.5rem; }
.login-brand-content h2 { color: white; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.25; margin-bottom: 1.5rem; }
.login-brand-content p { color: white; font-size: 1.125rem; line-height: 1.7; max-width: 24rem; margin-bottom: 0; }
.login-form-panel { background: white; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; min-width: 0; }
.login-form-container { width: 100%; max-width: 26rem; }
.login-form-logo { display: block; width: min(100%, 240px); height: auto; margin: 1.5rem 0 3rem; }
.login-form-container h1 { margin-bottom: 0.75rem; }
.login-page .form-control, .login-page .input-group-text { min-height: 3rem; }
.login-captcha .input-group-text { padding: 0.625rem; }
.login-captcha .form-control { min-width: 0; }
.login-submit { padding-top: 0.75rem; margin: 1.5rem 0 2rem; }
.login-submit .btn { min-height: 3.25rem; }
.login-help { font-size: 0.9375rem; line-height: 1.7; margin-bottom: 0; }
@media (max-width: 991.98px) {
    .login-screen { grid-template-columns: 1fr; }
    .login-brand-panel { display: none; }
    .login-form-panel { padding: 2rem max(1.25rem, 5vw); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
    .system-header, .system-footer, .system-back { display: none !important; }
    body.sistema-optica { display: block; background: white !important; margin: 0; }
    .system-content { padding: 0; }
}


/* ========================================================================
   P11.3 — Componentes compartidos del sistema de ópticas.
   Añadir marca-page al contenedor de pantalla; no modifica login ni tickets.
   Encabezado: marca-page-header > div (h1 + marca-subtitulo) + marca-actions.
   Cifras: marca-cifras [marca-cifras--tres] > marca-cifra >
           marca-cifra-label + marca-cifra-value [marca-monto] + marca-cifra-note.
   Listado: marca-panel > marca-table-scroll (tabindex=0 y aria-label) >
            table.table.marca-table. Usar th scope=col y marca-monto en th/td de dinero.
   Estado: <partial name="_EstadoNota" model="nota.Estado" />.
   Vacío: marca-vacio > ícono aria-hidden + p + enlace secundario.
   Botones: btn marca-btn + marca-btn--principal|secundario|peligro;
            añadir marca-btn--sm a TODAS las acciones de una fila para igual tamaño.
   ======================================================================== */
.marca-page { min-width: 0; max-width: 100%; }
.marca-page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 1.75rem; }
.marca-page-header > div { min-width: 0; }
.marca-page-header h1 { margin: 0; }
.marca-subtitulo { color: var(--marca-secundario); margin: 0.5rem 0 0; line-height: 1.6; }
.marca-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.marca-monto { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cifras sobrias: cuatro columnas desde 1200 px, dos desde 576 px, una en móvil. */
.marca-cifras { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.75rem; }
.marca-cifra { min-width: 0; padding: 1.5rem; background: var(--marca-superficie); border: 1px solid var(--marca-borde); border-radius: 0.75rem; }
.marca-cifra-label { color: var(--marca-secundario); font-size: 0.875rem; font-weight: 500; margin: 0 0 0.75rem; }
.marca-cifra-value { color: var(--marca-azul); font-family: var(--marca-titulo); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.3; margin: 0; overflow-wrap: anywhere; }
.marca-cifra-value.marca-monto { white-space: normal; }
.marca-cifra-note { color: var(--marca-secundario); font-size: 0.875rem; margin: 0.75rem 0 0; line-height: 1.5; }
.marca-cifra-note .bi { margin-right: 0.25rem; }
.marca-panel { min-width: 0; max-width: 100%; background: var(--marca-superficie); border: 1px solid var(--marca-borde); border-radius: 0.75rem; margin-bottom: 1.75rem; }
.marca-panel-body { padding: 1.5rem; }
.marca-section-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--marca-borde); }
.marca-section-header h2 { font-size: 1.125rem; margin: 0; }
.marca-section-header p { color: var(--marca-secundario); font-size: 0.875rem; margin: 0.375rem 0 0; }

/* El desplazamiento queda en el listado, nunca en la página. También contiene DataTables. */
.marca-table-scroll { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; border-radius: 0.75rem; }
.marca-table { width: 100%; margin: 0; }
.marca-table > thead > tr > th { background: var(--marca-fondo); color: var(--marca-secundario); font-size: 0.875rem; font-weight: 600; text-transform: none; letter-spacing: normal; white-space: nowrap; }
.marca-table > :not(caption) > * > * { padding: 1rem; border-color: var(--marca-borde); vertical-align: middle; }
.marca-table > tbody > tr:last-child > td { border-bottom: 0; }
.marca-table .marca-monto { min-width: 7rem; }
.marca-table small { color: var(--marca-secundario); }
.marca-table td { min-width: 7rem; }
.marca-table td.marca-table-actions { min-width: 13rem; }
.marca-table-actions .marca-actions { justify-content: flex-end; }
.marca-table-scroll .dataTables_wrapper { padding: 1rem; }
.marca-table-scroll .dataTables_wrapper > .row { margin-left: 0; margin-right: 0; }
.marca-table-scroll .pagination { flex-wrap: wrap; }

/* Seis estados; color, ícono y texto. Entregado usa el mismo verde en fondo sólido. */
.marca-estado { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border-radius: 0.5rem; font-family: var(--marca-cuerpo); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.marca-estado--registrado { color: var(--marca-secundario); background: var(--marca-fondo); }
.marca-estado--laboratorio { color: var(--marca-azul); background: var(--marca-suave); }
.marca-estado--taller { color: var(--marca-aviso); background: var(--marca-aviso-fondo); }
.marca-estado--listo { color: var(--marca-exito); background: var(--marca-exito-fondo); }
.marca-estado--entregado { color: var(--marca-superficie); background: var(--marca-exito); }
.marca-estado--anulada { color: var(--marca-error); background: var(--marca-error-fondo); }
.marca-vacio { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: 2.5rem 1.25rem; text-align: center; color: var(--marca-secundario); }
.marca-vacio > .bi { font-size: 2rem; color: var(--marca-secundario); }
.marca-vacio p, .marca-vacio h3 { margin: 0; }

/* Tres jerarquías, misma caja y foco visible heredado de marca.css. */
.btn.marca-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.625rem 1rem; border: 1px solid; border-radius: 0.5rem; font-size: 0.9375rem; line-height: 1.4; text-decoration: none; white-space: normal; box-shadow: none; }
.btn.marca-btn--sm { min-height: 2.5rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.btn.marca-btn--principal { color: var(--marca-superficie); background: var(--marca-azul); border-color: var(--marca-azul); }
.btn.marca-btn--principal:hover, .btn.marca-btn--principal:focus { color: var(--marca-superficie); background: var(--marca-accion); border-color: var(--marca-accion); }
.btn.marca-btn--secundario { color: var(--marca-azul); background: var(--marca-superficie); border-color: var(--marca-borde); }
.btn.marca-btn--secundario:hover, .btn.marca-btn--secundario:focus, .btn.marca-btn--secundario.active { color: var(--marca-azul); background: var(--marca-suave); border-color: var(--marca-azul); }
.btn.marca-btn--peligro { color: var(--marca-error); background: var(--marca-superficie); border-color: var(--marca-error); }
.btn.marca-btn--peligro:hover, .btn.marca-btn--peligro:focus { color: var(--marca-superficie); background: var(--marca-error); border-color: var(--marca-error); }
.btn.marca-btn:disabled { opacity: 0.65; }

/* Composiciones reutilizables para Inicio y el centro de documentos. */
.marca-documentos, .marca-inicio-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.75rem; }
.marca-documentos .marca-panel, .marca-inicio-grid .marca-panel { margin-bottom: 0; }
.marca-documento { display: flex; flex-direction: column; padding: 1.5rem; }
.marca-documento h2 { font-size: 1.125rem; margin: 0 0 0.75rem; }
.marca-documento p { color: var(--marca-secundario); font-size: 0.9375rem; line-height: 1.6; }
.marca-documento .marca-actions { margin-top: auto; }
.marca-accesos { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.marca-acceso { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--marca-borde); border-radius: 0.5rem; color: var(--marca-azul); text-decoration: none; }
.marca-acceso:hover { background: var(--marca-suave); color: var(--marca-azul); }
.marca-acceso strong, .marca-acceso small { display: block; }
.marca-acceso small { color: var(--marca-secundario); margin-top: 0.25rem; }
.marca-tiempo { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; color: var(--marca-secundario); font-size: 0.875rem; margin-top: 0.75rem; }
.marca-tiempo i { margin-right: 0.375rem; }
.marca-reloj { display: inline-block; min-width: 7rem; font-variant-numeric: tabular-nums; }
.marca-trabajo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--marca-borde); color: var(--marca-texto); text-decoration: none; }
.marca-trabajo:hover { background: var(--marca-fondo); }
.marca-trabajo:last-child { border-bottom: 0; }
.marca-trabajo > div { min-width: 0; max-width: 100%; }
.marca-trabajo h3 { font-size: 1rem; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.marca-trabajo small { display: block; color: var(--marca-secundario); }
.marca-trabajo .marca-monto { margin: 0.5rem 0 0; font-size: 0.875rem; }
.marca-paginador { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--marca-borde); }
.marca-chart { position: relative; width: 100%; min-width: 0; height: 20rem; }
.marca-tabs { gap: 0.5rem; margin-bottom: 1rem; }
.marca-tabs .nav-link { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; border: 1px solid var(--marca-borde); background: var(--marca-superficie); color: var(--marca-azul); }
.marca-tabs .nav-link.active { background: var(--marca-azul); color: var(--marca-superficie); }
.marca-contador { padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--marca-fondo); color: var(--marca-secundario); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.marca-tabs .active .marca-contador { background: var(--marca-superficie); color: var(--marca-azul); }
.marca-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.modal-content.marca-modal { border: 1px solid var(--marca-borde); border-radius: 0.75rem; box-shadow: none; }

@media (min-width: 576px) {
    .marca-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .marca-accesos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .marca-cifras--tres, .marca-documentos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .marca-inicio-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (min-width: 1200px) {
    .marca-cifras:not(.marca-cifras--tres) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .marca-page-header .marca-actions { width: 100%; }
    .marca-page-header .marca-btn--principal { width: 100%; }
    .marca-tabs { flex-direction: column; }
    .marca-trabajo > .marca-trabajo-estado { width: 100%; text-align: right; }
    .marca-table-scroll .dataTables_filter input { max-width: 9rem; }
}


/* P11.4 — Composición de notas sobre las piezas P11.3 (sin nuevas variantes paralelas).
   marca-paso: número de paso dentro de marca-section-header.
   marca-resumen-fijo: tres cifras compactas, visibles al desplazarse.
   marca-nota-aside: carrito/cobro al costado desde 1200 px.
   marca-notas-table: las mismas filas de DataTables se leen como tarjetas bajo 1280 px. */
.marca-paso { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--marca-suave); color: var(--marca-azul); font-weight: 600; font-variant-numeric: tabular-nums; }
.marca-nota .marca-section-header { justify-content: flex-start; gap: 0.75rem; }
.marca-nota .marca-section-header > .badge { margin-left: auto; }
.marca-nota .marca-panel-body { padding: 1.25rem; }
.marca-nota .marca-productos-tabs { flex-direction: row; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; padding: 0; margin: 0 0 1.25rem; }
.marca-nota .marca-productos-tabs .nav-link { width: 100%; padding: 0.625rem 0.5rem; border-radius: 0.5rem; }
.marca-nota .select2-container { max-width: 100%; }
.marca-nota #grupoDis, .marca-nota #grupoTec { flex-wrap: wrap; }
.marca-nota .metodo-btn { min-height: 2.75rem; flex: 1 1 45%; }
.marca-nota .refraccion-card { cursor: pointer; border: 2px solid transparent; }
.marca-nota .refraccion-card:hover, .marca-nota .refraccion-card.seleccionada { border-color: var(--marca-azul) !important; background: var(--marca-suave) !important; }
.marca-nota .item-carrito { border-left: 3px solid var(--marca-azul); overflow-wrap: anywhere; }
.marca-nota .item-carrito .badge { background: var(--marca-suave) !important; color: var(--marca-azul) !important; }
.marca-carrito-total { border-top: 1px solid var(--marca-borde); padding: 1rem 1.25rem; font-variant-numeric: tabular-nums; }
.marca-resumen-fijo { position: sticky; top: 0.5rem; z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.875rem 0.5rem; gap: 0; box-shadow: 0 4px 12px rgba(22,48,91,0.06); }
.marca-resumen-fijo .marca-cifra { border: 0; border-radius: 0; padding: 0.25rem 0.75rem; }
.marca-resumen-fijo .marca-cifra + .marca-cifra { border-left: 1px solid var(--marca-borde); }
.marca-resumen-fijo .marca-cifra-label { font-size: 0.8125rem; margin-bottom: 0.375rem; }
.marca-resumen-fijo .marca-cifra-value { font-size: clamp(1rem, 1.7vw, 1.5rem); text-align: left; }
.marca-resumen-fijo #resError { grid-column: 1 / -1; padding: 0 0.75rem; }
.marca-detalle .page-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.marca-detalle .panel-col { display: flex; flex-direction: column; min-width: 0; gap: 1.25rem; }
.marca-detalle .panel-col .marca-panel { margin-bottom: 0; }
.marca-detalle .marca-panel h2 { font-size: 1.125rem; }
.marca-detalle-contenido { order: 1; }
.marca-detalle-acciones { order: 2; }
.marca-ticket-preview { order: 3; grid-column: 1 / -1; padding-bottom: 1.5rem; }
.marca-detalle .ticket { min-width: 0; max-width: 100%; margin: 0 auto; }
.marca-detalle .ticket, .marca-detalle .ticket * { font-family: 'Courier New', monospace; }
.marca-detalle-item, .marca-pago { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--marca-borde); }
.marca-detalle-item > div { min-width: 0; flex: 1 1 12rem; overflow-wrap: anywhere; }
.marca-detalle-item:last-child, .marca-pago:last-child { border-bottom: 0; }
.marca-pago { padding: 0.75rem 0; }
.marca-detalle .step-row { padding: 0.75rem; }
.marca-detalle .step-badge { font-size: 0.6875rem; }
.marca-detalle .det-costos { padding: 1rem !important; border: 1px solid var(--marca-borde); }
@media (min-width: 992px) {
    .marca-detalle .page-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
}
@media (min-width: 1200px) {
    .marca-nota .marca-productos-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .marca-nota .col-xl-4 { align-self: stretch; }
    .marca-nota-aside { position: sticky; top: 7rem; }
}
/* Ocho columnas completas a partir de 1280: ancho flexible y acciones en dos líneas. */
@media (min-width: 1280px) {
    #tablaNotas { table-layout: fixed; width: 100% !important; }
    #tablaNotas th, #tablaNotas td { min-width: 0; padding: 0.75rem 0.5rem; white-space: normal; overflow-wrap: anywhere; }
    #tablaNotas th:nth-child(1) { width: 12% !important; }
    #tablaNotas th:nth-child(2) { width: 8% !important; }
    #tablaNotas th:nth-child(3) { width: 19% !important; }
    #tablaNotas th:nth-child(4) { width: 6% !important; }
    #tablaNotas th:nth-child(5) { width: 12% !important; }
    #tablaNotas th:nth-child(6) { width: 9% !important; }
    #tablaNotas th:nth-child(7) { width: 14% !important; }
    #tablaNotas th:nth-child(8) { width: 20% !important; }
    #tablaNotas .marca-estado { white-space: normal; }
    #tablaNotas .marca-monto { font-size: 0.875rem; }
}
/* Conserva una tabla semántica, una sola fila/acción por nota y todos sus data-*.
   Filtrado/orden/paginación siguen operando sobre las mismas filas. */
@media (max-width: 1279.98px) {
    #tablaNotas, #tablaNotas tbody { display: block; width: 100% !important; }
    #tablaNotas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); }
    #tablaNotas tbody tr.nv-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; padding: 1.25rem; margin-bottom: 1rem; border: 1px solid var(--marca-borde); border-radius: 0.75rem; }
    #tablaNotas tbody tr.nv-row td { display: block; min-width: 0; max-width: 100%; padding: 0 !important; border: 0; text-align: left !important; white-space: normal; overflow-wrap: anywhere; background: transparent; box-shadow: none; }
    #tablaNotas td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 0.25rem; color: var(--marca-secundario); font-size: 0.8125rem; font-weight: 500; }
    #tablaNotas td:nth-child(3), #tablaNotas td:last-child { grid-column: 1 / -1; }
    #tablaNotas .marca-estado { white-space: normal; }
    #tablaNotas .marca-actions { justify-content: flex-start; }
    #tablaNotas td.dataTables_empty { display: block; min-width: 0; }
    .marca-notas-table .marca-btn { min-height: 2.75rem; }
}