@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&display=swap');
/**
 * sm-patente.css — LA patente del sistema (tanda 31). Única definición: igual en todos los temas y todas las vistas
 * (tablero, timeline, tabla, focus, buscador, historial, órdenes, agenda, clientes, portal).
 *
 * Antes había tres definiciones que se pisaban (esta, estilos.css y portal-cliente.css) con alto fijo en píxeles y
 * padding para la franja: al achicarlas (patente-sm, transform: scale en varias pantallas) el número se cortaba abajo.
 * Ahora todo está en "em": el tamaño lo da font-size (el del número) y la chapa escala entera, sin cortes.
 *
 * Uso (en PHP, sm_patente() de includes/ui.php arma esto y separa el número: "AB 123 CD" / "ABC 123"):
 *   <span class="patente-mercosur">AB 123 CD</span>   Mercosur: franja azul "REPUBLICA ARGENTINA", logo Mercosur y bandera
 *   <span class="patente-old">ABC 123</span>          Vieja: marco claro, "ARGENTINA" celeste, escudo y cuerpo negro
 * Tamaños: patente-xs (13px) · patente-sm (17px) · normal (24px) · patente-lg (34px).
 */
.patente-old,
.patente-mercosur {
    --pat-fs: 24px;
    position: relative; isolation: isolate;
    display: inline-flex; align-items: flex-end; justify-content: center;
    box-sizing: border-box; min-width: 5.3em; height: 1.95em;
    padding: 0 .38em .1em;
    font: 700 var(--pat-fs)/1 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    vertical-align: middle; cursor: default; user-select: none;
}
.patente-xs { --pat-fs: 13px; }
.patente-sm { --pat-fs: 17px; }
.patente-lg { --pat-fs: 34px; }

/* ---------- Mercosur (blanca, franja azul) ---------- */
.patente-mercosur {
    color: #111; background: #fff;
    border: .08em solid #1b1b1b; border-radius: .26em;
    box-shadow: 0 .06em .18em rgba(0, 0, 0, .28);
}
.patente-mercosur::before {
    content: 'REPUBLICA ARGENTINA';
    position: absolute; top: 0; left: 0; right: 0; z-index: -1;
    height: 2.35em;   /* ≈ 0.56 del número */
    font: 700 .24em/2.35em 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; letter-spacing: .08em; text-align: center; color: #fff;
    border-radius: .9em .9em 0 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%2375aadb'/%3E%3Crect y='6.67' width='30' height='6.67' fill='%23fff'/%3E%3Ccircle cx='15' cy='10' r='2' fill='%23f6b40e'/%3E%3C/svg%3E") right .9em center / 2.6em auto no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M4 16 Q20 2 36 16' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='6' r='1.6'/%3E%3Ccircle cx='18' cy='3.6' r='1.3'/%3E%3Ccircle cx='24' cy='4.2' r='1.1'/%3E%3Ccircle cx='21' cy='8.4' r='1'/%3E%3C/g%3E%3C/svg%3E") left .9em center / 3.2em auto no-repeat,
        linear-gradient(#1d56b0, #0b2f6e);
}

/* ---------- Vieja (marco claro, cuerpo negro) ---------- */
.patente-old {
    color: #f4f4f4; background: linear-gradient(#fafafa, #e3e3e3);
    border: .06em solid #b9b9b9; border-radius: .22em;
    box-shadow: 0 .06em .18em rgba(0, 0, 0, .28);
    text-shadow: 0 0 .06em rgba(255, 255, 255, .35);
    padding-bottom: .16em;
}
.patente-old::before {   /* franja superior: escudo · ARGENTINA · tornillos */
    content: 'ARGENTINA';
    position: absolute; top: 0; left: 0; right: 0; z-index: -1;
    height: 2.3em;
    font: 700 .24em/2.3em 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; letter-spacing: .06em; text-align: center; color: #3f9bd8;
    text-shadow: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cellipse cx='6' cy='7.5' rx='5' ry='6' fill='%233f9bd8'/%3E%3Cpath d='M1 7.5 h10 v0.2 a5 6 0 0 1 -10 0z' fill='%23fff'/%3E%3Ccircle cx='6' cy='2.2' r='1.6' fill='%23f6b40e'/%3E%3C/svg%3E") left 1.3em center / 1.1em auto no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Crect x='.5' y='.5' width='19' height='5' rx='2.5' fill='%23e9e9e9' stroke='%23a7a7a7'/%3E%3C/svg%3E") left 17% center / 2.4em auto no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 6'%3E%3Crect x='.5' y='.5' width='19' height='5' rx='2.5' fill='%23e9e9e9' stroke='%23a7a7a7'/%3E%3C/svg%3E") right 17% center / 2.4em auto no-repeat;
}
.patente-old::after {    /* cuerpo negro */
    content: '';
    position: absolute; left: .1em; right: .1em; top: .56em; bottom: .1em; z-index: -2;
    background: #0d0d0d; border-radius: .12em;
}

/* Contenedores viejos que achicaban la chapa con transform: ahora el tamaño es el font-size. */
.patente-scale-wrapper, .patente-scale-wrapper-cli { transform: none !important; height: auto !important; margin: 0 !important; }
.patente-scale-wrapper :is(.patente-mercosur, .patente-old) { --pat-fs: 18px; }
.patente-scale-wrapper-cli :is(.patente-mercosur, .patente-old) { --pat-fs: 16px; }
.patente-link:hover :is(.patente-mercosur, .patente-old) { box-shadow: 0 .1em .3em rgba(0, 0, 0, .35); }

/* ---------- La chapa como campo para escribir (sitios públicos, tanda S1) ----------
   <label class="sm-chapa-campo"><span class="patente-mercosur" data-sm-chapa><input name="patente" ...></span></label>
   assets/js/sm-chapa.js cambia sola entre Mercosur y vieja mientras se escribe y separa el número como en la chapa.
   El tamaño lo da --pat-fs (el mismo de la chapa): .sm-chapa-campo--lg para la grande de la portada. */
.sm-chapa-campo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sm-chapa-campo :is(.patente-mercosur, .patente-old) { --pat-fs: 30px; min-width: 6.2em; cursor: text; transition: box-shadow .15s; }
.sm-chapa-campo--lg :is(.patente-mercosur, .patente-old) { --pat-fs: 44px; }
.sm-chapa-campo--sm :is(.patente-mercosur, .patente-old) { --pat-fs: 24px; }
.sm-chapa-campo input { width: 5.6em; border: 0; outline: 0; background: transparent; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; text-align: center; text-transform: uppercase; }
.sm-chapa-campo input::placeholder { color: #b7b7b7; opacity: 1; }
.sm-chapa-campo .patente-old input::placeholder { color: #6d6d6d; }
.sm-chapa-campo:focus-within :is(.patente-mercosur, .patente-old) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sm-primary, #2A61A8) 30%, transparent); }
.sm-chapa-campo.is-invalida :is(.patente-mercosur, .patente-old) { box-shadow: 0 0 0 3px var(--sm-bad, #dc2626); }