/* ===================================================================
   Limpieza visual

   Va cargada la ULTIMA, despues de app.css, admin.css, cert-form.css y de
   los .razor.css, para poder calmar lo heredado de Naja sin tocar cinco
   hojas distintas. Todo lo de aqui es aspecto: ni un cambio de estructura.

   Lo que se corrige y por que:
     - el encabezado de la tabla era azul marino casi negro, pesaba mas que
       los propios datos
     - los botones de foto eran negro solido, lo mas oscuro de la pantalla
       para la accion menos importante
     - cada chip tenia su color fuerte: la lista parecia un semaforo
     - los campos heredados y los de MudBlazor tenian alturas, bordes y
       esquinas distintas, y se notaba al ponerlos juntos
   =================================================================== */

:root {
    /* Una sola escala de esquinas, en vez de 4px, 6px, 7px y 8px mezclados */
    --mec-r-sm: 6px;
    --mec-r-md: 10px;
    --mec-r-pill: 999px;

    /* Grises de un solo tono, ligeramente frios, para que no peleen con el azul */
    --mec-linea: #E4E8EE;
    --mec-linea-suave: #EEF1F5;
    --mec-texto-tenue: #667085;

    /* Fondos tonales de los chips: mismo gesto para todos, solo cambia el tinte */
    --mec-t-azul: #EAF2FB;   --mec-t-azul-txt: #12508F;
    --mec-t-verde: #E9F5EE;  --mec-t-verde-txt: #1B6B3A;
    --mec-t-ambar: #FDF1E3;  --mec-t-ambar-txt: #8A5216;
    --mec-t-rojo: #FCECEC;   --mec-t-rojo-txt: #9B2226;
    --mec-t-gris: #F1F3F7;   --mec-t-gris-txt: #5A6473;
}

/* ---------- Tablas ---------- */

/* El encabezado deja de ser una banda oscura: una linea basta para separarlo */
.mod-cert-table thead,
.adm-table thead,
table.mod-table thead {
    background: transparent !important;
}

.mod-cert-table thead th,
.adm-table thead th,
table.mod-table thead th {
    background: transparent !important;
    color: var(--mec-texto-tenue) !important;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--mec-linea) !important;
}

.mod-cert-table tbody td,
.adm-table tbody td {
    border-bottom: 1px solid var(--mec-linea-suave);
}

/* ---------- Chips: un solo gesto ---------- */

.type-chip,
.status-chip,
.service-badge,
.pv-chip,
.action-chip,
.mod-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px !important;
    border: 0 !important;
    border-radius: var(--mec-r-pill) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: var(--mec-t-gris) !important;
    color: var(--mec-t-gris-txt) !important;
}

.chip-usa,
.badge-secomext,
.svc-secomext      { background: var(--mec-t-azul) !important;  color: var(--mec-t-azul-txt) !important; }

.chip-mx,
.chip-done,
.pv-ok,
.badge-cintesis,
.svc-cintesis      { background: var(--mec-t-verde) !important; color: var(--mec-t-verde-txt) !important; }

.chip-pending,
.chip-active       { background: var(--mec-t-azul) !important;  color: var(--mec-t-azul-txt) !important; }

.chip-expired      { background: var(--mec-t-ambar) !important; color: var(--mec-t-ambar-txt) !important; }

.badge-caaarem,
.svc-caaarem,
.badge-global,
.svc-global        { background: var(--mec-t-ambar) !important; color: var(--mec-t-ambar-txt) !important; }

.chip-cancelled,
.chip-failed,
.pv-fail           { background: var(--mec-t-rojo) !important;  color: var(--mec-t-rojo-txt) !important; }

/* ---------- Botones de archivo ---------- */

/* Eran negro solido. Ahora son tonales: presentes, pero sin gritar. */
.custom-file-btn {
    background: var(--mec-t-azul) !important;
    color: var(--mec-t-azul-txt) !important;
    border-radius: var(--mec-r-sm) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.custom-file-input:hover .custom-file-btn {
    background: #DDE9F7 !important;
}

/* Cuando ya hay foto, se apaga: la accion ya esta hecha */
.image-slot.has-image .custom-file-btn,
.doc-slot.has-doc .custom-file-btn {
    background: var(--mec-t-gris) !important;
    color: var(--mec-t-gris-txt) !important;
}

.image-slot,
.doc-slot {
    border-radius: var(--mec-r-md);
    border-color: var(--mec-linea) !important;
}

/* ---------- Campos: que los heredados y los de MudBlazor se parezcan ---------- */

.cert-form input[type="text"],
.cert-form input[type="date"],
.cert-form input[type="number"],
.cert-form select,
.adm-page input[type="text"],
.adm-page select {
    border: 1px solid var(--mec-linea);
    border-radius: var(--mec-r-sm);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}

.cert-form input:focus,
.cert-form select:focus,
.adm-page input:focus,
.adm-page select:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(21, 104, 185, 0.12);
}

.cert-form .disabled-field,
.cert-form input:disabled,
.cert-form select:disabled {
    background: #F7F9FC;
    color: var(--mec-texto-tenue);
    border-color: var(--mec-linea-suave);
}

/* ---------- Superficies ---------- */

/* Menos caja: borde fino y sin sombra. Con tantas tarjetas juntas, las
   sombras se suman y la pantalla se ensucia. */
.cert-form .card,
.mec-hoja-bloque,
.mod-table-card,
.adm-card {
    border: 1px solid var(--mec-linea) !important;
    border-radius: var(--mec-r-md) !important;
    box-shadow: none !important;
}

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2 {
    box-shadow: none;
    border: 1px solid var(--mec-linea);
}

/* Los separadores dentro de una tarjeta sobran si ya hay titulo */
.cert-form .card hr,
.mec-hoja-bloque hr {
    display: none;
}

/* ---------- Avisos ---------- */

/* El aviso de mantenimiento era una banda de color saturado de lado a lado.
   Se queda dentro del contenido y en tono suave. */
.mec-aviso {
    border-radius: var(--mec-r-md) !important;
    margin: 12px 16px 0;
}

/* ---------- Botones ---------- */

.mud-button-root {
    border-radius: var(--mec-r-sm);
}

/* Los de accion del formulario venian con sombras y degradados propios */
.mod-form-actions button {
    box-shadow: none !important;
    border-radius: var(--mec-r-sm) !important;
}

/* ---------- Tipografia ---------- */

/* Los titulos de seccion heredados eran casi tan grandes como el de la
   pagina. Se bajan para que la jerarquia se lea de un vistazo. */
.cert-form .card > h3,
.adm-page h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mec-texto-tenue);
    margin: 0 0 10px;
}

/* ---------- Validacion CAAAREM ---------- */

/* En Naja es un recuadro amarillo con borde de 2px, igual que una advertencia.
   Aqui no es un aviso sino un paso previo: panel neutro, el VIN de
   protagonista y una sola accion. */
.mec-caaarem {
    margin-top: 10px;
    padding: 14px 16px;
    background: #F8FAFD;
    border: 1px solid var(--mec-linea);
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: var(--mec-r-md);
}

.mec-caaarem-cabeza {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--mud-palette-primary);
}

.mec-caaarem-titulo {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.mec-caaarem-nota {
    font-size: 0.76rem;
    color: var(--mec-texto-tenue);
    margin-top: 2px;
}

.mec-caaarem-accion {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* El VIN es lo unico que se teclea aqui, asi que manda: ancho, monoespaciado
   y con las letras separadas para poder cotejarlo de un vistazo. */
.mec-caaarem-vin {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.mec-caaarem-vin input {
    width: 100%;
    padding: 10px 62px 10px 12px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.02rem;
    letter-spacing: 0.1em;
    border: 1px solid var(--mec-linea);
    border-radius: var(--mec-r-sm);
    background: #fff;
}

.mec-caaarem-vin input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(21, 104, 185, 0.12);
}

/* Cuando llega a 17 se marca en verde: el boton se habilita justo ahi */
.mec-caaarem-vin input.completo {
    border-color: #6FB58A;
    background: #FBFEFC;
}

.mec-caaarem-cuenta {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: var(--mec-texto-tenue);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* Aprobado: una linea discreta, no un cartel */
.mec-caaarem-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--mec-r-pill);
    background: var(--mec-t-verde);
    color: var(--mec-t-verde-txt);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mec-caaarem-patente {
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid rgba(27, 107, 58, 0.25);
    font-weight: 500;
}

/* ---------- Inspeccion: cuatro campos no caben en una fila ---------- */

/* Inspeccion es una tarjeta estrecha, y sus cuatro campos (Inspector, No.
   Certificado, Fecha, Expira) iban en una sola fila: se cortaban a media
   palabra ("Luis Monte", "MEC-0000"). Se reparten en dos por renglon, y solo
   vuelven a caber cuatro si hay sitio de verdad. */
.mec-hoja-bloque .field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 12px;
}

.mec-hoja-bloque .field-row > .field {
    min-width: 0;
}

.mec-hoja-bloque .field-row > .field input,
.mec-hoja-bloque .field-row > .field select {
    width: 100%;
    min-width: 0;
}

/* ---------- Barra de acciones ---------- */

/* Los de Naja son rectangulares, todos del mismo peso y con sus iconos. Estos
   son ovalados y jerarquizados: solo Guardar va relleno. */
.mec-acciones {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mec-linea);
    border-radius: var(--mec-r-pill);
}

.mec-acciones .mec-pill {
    border-radius: var(--mec-r-pill) !important;
    padding-left: 22px;
    padding-right: 22px;
    text-transform: none;
    letter-spacing: 0;
}

/* El relleno lleva algo de sombra propia para separarse de los demas, pero
   suave: es el unico boton que la tiene en toda la pantalla. */
.mec-acciones .mud-button-filled.mec-pill {
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.10);
}

.mec-acciones-punto {
    font-size: 1.1rem;
    line-height: 1;
}

/* En pantallas angostas la barra deja de ser ovalada: con los botones
   apilados, un ovalo alto se ve raro. */
@media (max-width: 700px) {
    .mec-acciones {
        border-radius: var(--mec-r-md);
    }
    .mec-acciones .mec-pill {
        width: 100%;
    }
}

/* ---------- El VIN del formulario ---------- */

/* Mismo trato que en la validacion de CAAAREM: el tecnico lo teclea mirando el
   tablero, asi que va monoespaciado y separado para cotejarlo letra a letra. */
.mec-vin > label {
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mec-texto-tenue);
    margin-bottom: 4px;
}

.mec-vin-fila {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mec-vin-campo {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.mec-vin-campo input {
    width: 100%;
    padding: 9px 58px 9px 11px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.98rem;
    letter-spacing: 0.09em;
    border: 1px solid var(--mec-linea);
    border-radius: var(--mec-r-sm);
    background: #fff;
}

.mec-vin-campo input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(21, 104, 185, 0.12);
}

.mec-vin-campo input.completo {
    border-color: #6FB58A;
    background: #FBFEFC;
}

.mec-vin-campo input[readonly] {
    background: #F7F9FC;
    color: var(--mec-texto-tenue);
}

.mec-vin-cuenta {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: var(--mec-texto-tenue);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

/* ---------- Cotejo del VIN contra la foto ---------- */

/* En Naja el VIN va encima y la foto debajo, asi que hay que mirar arriba y
   abajo para compararlos. Aqui van lado a lado. */
.mec-cotejo {
    width: min(920px, 94vw);
    max-height: 92vh;
    overflow-y: auto;
    padding: 20px 22px;
    border-radius: 14px;
}

.mec-cotejo-cabeza {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--mec-linea);
}

.mec-cotejo-titulo {
    font-size: 1rem;
    font-weight: 700;
}

.mec-cotejo-nota {
    font-size: 0.78rem;
    color: var(--mec-texto-tenue);
    margin-top: 2px;
}

.mec-cotejo-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 18px;
    padding: 18px 0;
    align-items: start;
}

.mec-cotejo-etiqueta {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mec-texto-tenue);
    margin-bottom: 8px;
}

/* El VIN partido en caracteres sueltos: asi se coteja uno por uno sin perder
   el sitio, que es como se hace mirando el tablero. */
.mec-cotejo-letras {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mec-cotejo-letras span {
    width: 26px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7F9FC;
    border: 1px solid var(--mec-linea);
    border-radius: 5px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.98rem;
    font-weight: 600;
}

.mec-cotejo-foto {
    position: relative;
    border: 1px solid var(--mec-linea);
    border-radius: var(--mec-r-md);
    overflow: hidden;
    background: #0F172A;
    cursor: zoom-in;
}

.mec-cotejo-foto img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
}

/* Ampliada: la foto manda y el VIN se queda al lado para cotejar */
.mec-cotejo-foto.ampliada {
    cursor: zoom-out;
}

.mec-cotejo-foto.ampliada img {
    max-height: 70vh;
}

.mec-cotejo-lupa {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    padding: 5px;
    border-radius: var(--mec-r-pill);
    background: rgba(255, 255, 255, 0.92);
    color: #0F172A;
}

.mec-cotejo-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 14px;
    border-top: 1px solid var(--mec-linea);
}

/* En angosto el VIN se pone encima, pero con las letras sueltas sigue siendo
   comodo de cotejar */
@media (max-width: 720px) {
    .mec-cotejo-cuerpo {
        grid-template-columns: 1fr;
    }
    .mec-cotejo-acciones .mec-pill {
        flex: 1 1 100%;
    }
}

/* Los dos campos de fecha del filtro: el limite de ancho va en el CAMPO, no en
   el selector. Puesto en el selector, el calendario lo heredaba y se abria de
   108px, o sea un cuarto de calendario. */
.mec-filtro-fechas .mud-input-control {
    max-width: 112px;
}

/* ---------- Bloques cerrados del formulario ---------- */

/* El bloque cerrado se apaga y no deja tocar nada (section-locked, en
   cert-form.css). Aqui solo el aviso junto al titulo de que falta. */
.mec-hoja-bloque.section-locked::after {
    border-radius: var(--mec-r-md);
}

.mec-candado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 1px 8px 1px 4px;
    border-radius: var(--mec-r-pill);
    background: var(--mec-t-gris);
    color: var(--mec-t-gris-txt);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}

.mec-candado .mud-icon-root {
    font-size: 0.9rem;
}

/* ---------- Descarga del cliente (solo Mexico) ---------- */

/* Las dos opciones en fila, cada una con su bolita de radio y su icono: se ve
   cual quedo elegida y que le va a bajar al cliente. */
.mec-descarga-ops {
    display: flex;
    gap: 8px;
}

.mec-descarga-op {
    flex: 1;
    margin: 0 !important;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--mec-linea);
    border-radius: var(--mec-r-sm);
    background: #fff;
    transition: border-color .15s, background .15s;
}

.mec-descarga-op:hover {
    border-color: var(--mud-palette-primary);
}

/* La que esta elegida se tine, ademas de la bolita */
.mec-descarga-op:has(.mud-radio-input:checked),
.mec-descarga-op:has(input:checked) {
    background: var(--mec-t-azul);
    border-color: var(--mud-palette-primary);
}

.mec-descarga-op .mud-typography,
.mec-descarga-op .mud-radio-content {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #344054;
}

.mec-descarga-op .mud-icon-root {
    font-size: 1.15rem;
    color: var(--mec-texto-tenue);
}

/* ---------- En qué formulario estoy ---------- */

/* Los dos formularios, USA y México, se capturan igual y era fácil confundirse.
   El encabezado se tiñe según el tipo y se queda pegado arriba al hacer scroll,
   así que siempre está a la vista.

   Naja resolvió lo mismo con una banda de color y un emoji; aquí es el propio
   encabezado, sin banda extra. */
.cert-form .form-header {
    position: sticky;
    top: 64px;                    /* debajo de la barra de arriba */
    z-index: 30;
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid var(--mec-linea);
    border-left-width: 4px;
    border-bottom: 1px solid var(--mec-linea) !important;
    border-radius: var(--mec-r-md);
}

.cert-form .form-header h2 {
    font-size: 1.05rem;
    margin: 0;
}

.mec-tipo-icono {
    font-size: 1.3rem;
}

.mec-tipo-usa .form-header {
    background: var(--mec-t-azul);
    border-left-color: var(--mec-t-azul-txt);
}

.mec-tipo-usa .form-header h2,
.mec-tipo-usa .mec-tipo-icono { color: var(--mec-t-azul-txt); }

.mec-tipo-mx .form-header {
    background: var(--mec-t-verde);
    border-left-color: var(--mec-t-verde-txt);
}

.mec-tipo-mx .form-header h2,
.mec-tipo-mx .mec-tipo-icono { color: var(--mec-t-verde-txt); }

/* El número de certificado, dentro del encabezado teñido */
.cert-form .form-header .cert-number-display {
    background: rgba(255, 255, 255, .7);
}

/* El formulario traía overflow:auto, y eso rompe el "pegado" del encabezado:
   el navegador lo pega dentro de esa caja, que nunca se desplaza. */
.cert-form {
    overflow: visible;
}

/* Y el fondo del formulario completo, apenas teñido del color del tipo. Con
   las tarjetas en blanco encima se nota lo suficiente para saber dónde estás,
   sin que la pantalla se vuelva de color. Naja hace lo mismo, más saturado. */
.mec-tipo-usa,
.mec-tipo-mx {
    padding: 0 10px 12px;
    border-radius: var(--mec-r-md);
}

.mec-tipo-usa { background: #F4F9FE; }
.mec-tipo-mx  { background: #F3FBF6; }

/* El encabezado pegado necesita tapar lo que pasa por debajo */
.mec-tipo-usa .form-header { background: #EAF2FB; }
.mec-tipo-mx  .form-header { background: #E9F5EE; }

/* ---------- Banderas ---------- */

/* Dibujadas, no emoji: Windows no pinta 🇺🇸 ni 🇲🇽, los muestra como letras. */
.mec-bandera {
    width: 26px;
    height: 17px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .12);
    display: block;
}

/* La del pie, junto a Guardar: un poco más grande y separada del botón */
.mec-bandera-grande {
    display: inline-flex;
    align-items: center;
    margin-right: 4px;
}

.mec-bandera-grande .mec-bandera {
    width: 34px;
    height: 22px;
}