/* ========== RESET & BASE ========== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #333;
    background: #f0f2f5;
}

a { color: #4fc3f7; text-decoration: none; }
a:hover { color: #0288d1; }

h1 { font-size: 1.6rem; margin-bottom: 0; color: #1a1a2e; font-weight: 600; }
h2 { font-size: 1.15rem; margin-bottom: 0.8rem; color: #555; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
h3 { font-size: 1rem; margin-bottom: 0.4rem; }

/* ========== LOGIN ========== */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.login-card {
    background: #fff;
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 400px;
}

.login-card h1 {
    text-align: center;
    color: #1a1a2e;
    margin-bottom: 0.3rem;
    font-size: 1.8rem;
}

.login-subtitle {
    text-align: center;
    color: #888;
    margin-bottom: 1.8rem;
    font-size: 0.9rem;
}

/* ========== FORMS ========== */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.3rem;
    font-weight: 500;
    font-size: 0.85rem;
    color: #555;
}

.form-input, select.form-input {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #fff;
}

.form-input:focus {
    outline: none;
    border-color: #4fc3f7;
    box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.15);
}

.checkbox-group {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.form-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ========== BUTTONS ========== */
.btn-login {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #1a1a2e, #302b63);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: opacity 0.2s;
}

.btn-login:hover { opacity: 0.9; }
.btn-login:disabled { opacity: 0.5; cursor: not-allowed; }

.login-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
}

.login-footer strong {
    color: #6b7280;
}

.btn-primary {
    padding: 0.5rem 1.2rem;
    background: #1a1a2e;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background 0.2s;
}

.btn-primary:hover { background: #302b63; }

.btn-secondary {
    padding: 0.5rem 1.2rem;
    background: #fff;
    color: #555;
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
}

.btn-secondary:hover { background: #f5f5f5; }

.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    border: 1px solid #d0d5dd;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-small:hover { background: #f5f5f5; }
.btn-unlock { color: #e67e22; border-color: #e67e22; }
.btn-unlock:hover { background: #fef5e7; }
.btn-toggle { color: #888; }

/* ========== ALERTS ========== */
.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    border-left: 4px solid #dc2626;
}

.alert-success {
    background: #f0fdf4;
    color: #166534;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    border-left: 4px solid #22c55e;
}

/* ========== DATA TABLE ========== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.data-table th {
    background: #1a1a2e;
    color: #fff;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.data-table td {
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.data-table tbody tr:hover td {
    background: #f8f9fa;
}

.actions-cell {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

/* ========== BADGES & TAGS ========== */
.role-badge {
    background: #4fc3f7;
    color: #1a1a2e;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.module-tag {
    background: #e3f2fd;
    color: #1565c0;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    margin-right: 0.2rem;
    display: inline-block;
}

.status-active { color: #16a34a; font-weight: 600; }
.status-inactive { color: #9ca3af; font-weight: 500; }
.status-locked { color: #dc2626; font-weight: 600; }

/* ========== DASHBOARD ========== */
.dashboard {
    max-width: 900px;
    margin: 0 auto;
}

.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.dash-header h1 {
    font-size: 1.4rem;
    color: #1a1a2e;
    margin-bottom: 0.2rem;
}

.dash-subtitle {
    font-size: 0.85rem;
    color: #888;
    text-transform: capitalize;
}

/* Stats row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.stat-number {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1;
}

.stat-label {
    font-size: 0.72rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

/* Card grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Dash card with colored left strip */
.dash-card {
    display: flex;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.dash-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.card-strip {
    width: 6px;
    flex-shrink: 0;
}

.card-usa .card-strip { background: linear-gradient(180deg, #1565c0, #42a5f5); }
.card-mx .card-strip { background: linear-gradient(180deg, #2e7d32, #66bb6a); }
.card-trucks .card-strip { background: linear-gradient(180deg, #e65100, #ff9800); }
.card-admin .card-strip { background: linear-gradient(180deg, #5e35b1, #9575cd); }
.card-invoices .card-strip { background: linear-gradient(180deg, #0d9488, #2dd4bf); }
.card-tokens .card-strip { background: linear-gradient(180deg, #b45309, #f59e0b); }
.card-envios .card-strip { background: linear-gradient(180deg, #0369a1, #38bdf8); }
.card-audit .card-strip { background: linear-gradient(180deg, #4338ca, #818cf8); }

.card-body {
    padding: 1.1rem 1.3rem;
    flex: 1;
}

.card-body h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.25rem;
}

.card-body p {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.card-link {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4fc3f7;
    transition: color 0.2s;
}

.dash-card:hover .card-link {
    color: #0288d1;
}

@media (max-width: 768px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .card-grid { grid-template-columns: 1fr; }
}

/* ========== TABS ========== */
.tab-nav {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 1.5rem;
}

.tab-btn {
    padding: 0.7rem 1.5rem;
    border: none;
    background: none;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s, border-color 0.2s;
}

.tab-btn:hover {
    color: #555;
}

.tab-btn.active {
    color: #4fc3f7;
    border-bottom-color: #4fc3f7;
}

.client-list-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.4rem;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
}

.client-list-checkboxes label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: normal;
    cursor: pointer;
}

/* ========== BLAZOR SPECIFIC ========== */
#blazor-error-ui {
    display: none;
    background: #dc2626;
    color: #fff;
    padding: 0.5rem;
    text-align: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
}

/* ===================================================================
   MudBlazor — ajustes propios de Mechanical
   Solo lo que MudBlazor no cubre. Todo lo demas sale del tema en
   Components/MecTheme.cs, no de aqui.
   =================================================================== */

/* La barra superior es clara, asi que necesita una linea que la separe */
.mec-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}


.mec-login-remember input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

/* Cajon en modo mini: solo caben los iconos, asi que las etiquetas de seccion
   ("Certificados", "Administracion") se cortaban a la mitad. Se ocultan.
   El contenedor es .mud-navmenu, no .mud-nav-menu, asi que basta con colgar
   la regla del cajon cerrado. */
.mud-drawer--closed .mud-typography-overline {
    display: none;
}

/* FocusOnNavigate pone el foco en el h1 de cada pagina para que los lectores
   de pantalla anuncien donde quedaste al navegar. El navegador lo dibuja con
   un recuadro negro que parece un error de maquetado.
   No sirve :not(:focus-visible): Chrome trata este foco como "visible" porque
   viene despues de una interaccion de teclado. Y un h1 no se alcanza con Tab,
   asi que quitarle el contorno no le quita el foco visible a nadie. */
h1:focus {
    outline: none;
}

/* El credito del pie del cajon no cabe en modo mini y se desbordaba
   partiendo "Celestial Dynamics Solutions" en cuatro renglones. */
.mud-drawer--closed .mec-drawer-credit {
    display: none;
}

/* El nombre del sistema: MEC System. Va como texto, no como logo — el logo de
   Mechanical se queda solo para el certificado y los PDF, que es donde
   representa a la empresa. Aqui lo que se nombra es la aplicacion. */
.mec-wordmark {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-primary);
}

/* ===================================================================
   Login a pantalla partida
   El de Naja es una tarjeta centrada. Este parte la pantalla: panel de
   color con el nombre del sistema a la izquierda, formulario a la derecha.
   =================================================================== */
.mec-login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 42% 1fr;
}

.mec-login-marca {
    background: linear-gradient(160deg, #1568B9 0%, #0E4A85 60%, #0A3563 100%);
    color: #fff;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mec-login-marca-nombre {
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.mec-login-marca-regla {
    width: 56px;
    height: 4px;
    background: rgba(255, 255, 255, 0.55);
    margin: 22px 0;
    border-radius: 2px;
}

.mec-login-marca-texto {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.85;
}

.mec-login-marca-pie {
    font-size: 0.78rem;
    opacity: 0.6;
}

.mec-login-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    background: var(--mud-palette-surface);
}

.mec-login-form-caja {
    width: 100%;
    max-width: 380px;
}

.mec-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* En pantallas angostas el panel de color se vuelve una banda de arriba:
   partir la pantalla en dos columnas de 400px no cabe. */
@media (max-width: 860px) {
    .mec-login {
        grid-template-columns: 1fr;
    }
    .mec-login-marca {
        padding: 28px 24px;
    }
    .mec-login-marca-nombre { font-size: 1.8rem; }
    .mec-login-marca-texto  { display: none; }
    .mec-login-marca-regla  { margin: 14px 0; }
    .mec-login-marca-pie    { display: none; }
}


/* ===================================================================
   Formulario de captura — tres disposiciones

   Lo que estorbaba de los intentos anteriores eran los clics y el scroll,
   asi que todas aprietan: campos mas bajos, menos aire, y las tarjetas
   grandes de Naja se quedan en bloques finos.
   =================================================================== */

/* --- Denso: los campos mas bajos y con menos aire que los heredados --- */
.mec-hoja .field label {
    font-size: 0.68rem;
    margin-bottom: 2px;
}

.mec-hoja .field input,
.mec-hoja .field select {
    padding: 6px 8px;
    font-size: 0.82rem;
}

.mec-hoja .field {
    margin-bottom: 8px;
}

/* --- Hoja compacta: todo a la vista, sin tarjetas --- */
.mec-hoja {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.mec-hoja-ancho {
    grid-column: 1 / -1;
}

.mec-hoja-bloque {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 0;
}

.mec-hoja-bloque > h4 {
    margin: 0 0 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Las 8 fotos en una sola tira, no en una rejilla de dos filas: es el bloque
   que mas alto ocupaba. La clase del componente es .image-grid. */
.mec-hoja .image-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}

.mec-hoja .additional-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 1400px) {
    .mec-hoja .image-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .mec-hoja { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .mec-hoja { grid-template-columns: 1fr; }
}


/* Cabecera del formulario: servicio y cliente iban en dos tarjetas apiladas
   que se comian 200px antes de empezar a capturar. Se aprietan y se ponen en
   una sola fila: es lo que mas scroll quitaba, y afecta a las tres
   disposiciones por igual. */
.cert-form .service-selector {
    padding: 8px 12px;
    margin-bottom: 8px;
}

.cert-form .service-selector + .service-selector {
    margin-top: 0 !important;
}

.cert-form .service-selector .field > label {
    font-size: 0.68rem;
    margin-bottom: 2px;
}

.cert-form .service-selector select {
    padding: 6px 8px;
    font-size: 0.85rem;
}

/* Las 8 fotos: no hacen falta botones enormes para elegir archivo */
.mec-hoja .image-slot,
.mec-hoja .doc-slot {
    padding: 6px;
    min-height: 0;
}

.mec-hoja .image-slot > label,
.mec-hoja .doc-slot > label {
    font-size: 0.68rem;
}

.mec-hoja .custom-file-btn {
    padding: 5px 10px;
    font-size: 0.72rem;
}

.mec-hoja .image-preview {
    max-height: 70px;
}