/*
 * Placa no padrão Mercosul: faixa azul com BRASIL em cima e caracteres pretos em fundo branco.
 * Carro e caminhão numa linha (proporção ~3:1); moto em duas linhas, quase quadrada.
 * HTML vem de {% placa_mercosul %} (core/templatetags/placa_tags.py) ou window.placaMercosulHtml (shared-utils.js).
 * Tamanhos: padrão (listas), .placa-lg (detalhes).
 */
.placa-mercosul {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    background: #fff;
    border: 1.5px solid #1f2937;
    border-radius: 4px;
    overflow: hidden;
    line-height: 1;
    color: #111827;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.15);
    flex-shrink: 0;
    text-transform: uppercase;
    white-space: nowrap;
}
.placa-mercosul .placa-faixa {
    position: relative;
    display: block;
    background: #003399;
    color: #fff;
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 1.5px 12px;
}
.placa-mercosul .placa-br {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.34rem;
    letter-spacing: 0;
}
.placa-mercosul .placa-bandeira {
    position: absolute;
    right: 3px;
    top: 50%;
    width: 7px;
    height: 5px;
    transform: translateY(-50%);
    background:
        radial-gradient(circle, #1d4ed8 0 1.1px, transparent 1.3px),
        linear-gradient(135deg, transparent 30%, #facc15 30% 70%, transparent 70%) center / 70% 70% no-repeat,
        #16a34a;
}
.placa-mercosul .placa-numero {
    display: flex;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 1px 5px 2px;
}

/* carro e caminhão: uma linha */
.placa-mercosul.placa-carro {
    min-width: 76px;
}
.placa-mercosul.placa-carro .placa-numero {
    font-size: 0.82rem;
}

/* moto: letras em cima, números embaixo */
.placa-mercosul.placa-moto {
    width: 44px;
}
.placa-mercosul.placa-moto .placa-faixa {
    padding: 1.5px 0;
    font-size: 0.36rem;
    letter-spacing: 0.06em;
}
.placa-mercosul.placa-moto .placa-br,
.placa-mercosul.placa-moto .placa-bandeira {
    display: none;
}
.placa-mercosul.placa-moto .placa-numero {
    flex-direction: column;
    align-items: center;
    font-size: 0.72rem;
    gap: 1px;
    padding: 2px 2px 3px;
}

/* placa fora do padrão (estrangeira, incompleta): só o texto, sem desenhar a placa */
.placa-texto {
    display: inline-block;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 0 0.35rem;
    white-space: nowrap;
}

/* tamanho grande (telas de detalhe) */
.placa-mercosul.placa-lg {
    border-width: 2px;
    border-radius: 6px;
}
.placa-mercosul.placa-lg .placa-faixa {
    font-size: 0.6rem;
    padding: 2.5px 18px;
}
.placa-mercosul.placa-lg .placa-br {
    font-size: 0.5rem;
    left: 5px;
}
.placa-mercosul.placa-lg .placa-bandeira {
    width: 11px;
    height: 8px;
    right: 5px;
}
.placa-mercosul.placa-lg.placa-carro {
    min-width: 120px;
}
.placa-mercosul.placa-lg.placa-carro .placa-numero {
    font-size: 1.3rem;
    padding: 2px 8px 3px;
}
.placa-mercosul.placa-lg.placa-moto {
    width: 68px;
}
.placa-mercosul.placa-lg.placa-moto .placa-faixa {
    font-size: 0.5rem;
    padding: 2px 0;
}
.placa-mercosul.placa-lg.placa-moto .placa-numero {
    font-size: 1.1rem;
    padding: 3px 3px 4px;
}