/*
 * Norma vigente: D174 (docs/ai/NORMA_IDENTIDAD_VISUAL_D174.md) Tokens inertes. Sin alias a variables actuales ni
 * consumidores. Prefijo --vf-ds-* para evitar colisiones con el tema vigente. R-D174-6: foco claro, campos,
 * serie secundaria y lateral activo ajustados. Equivalencias: docs/ai/IDENTIDAD_VISUAL_D174_EQUIVALENCIAS.md.
 */
main#main {
    --vf-ds-bg-page: #FFFFFF;
    --vf-ds-bg-surface: #FFFFFF;
    --vf-ds-bg-subtle: #F8FAFC;
    --vf-ds-sidebar-bg: #0F172A;
    --vf-ds-sidebar-text: #E2E8F0;
    --vf-ds-sidebar-muted: #94A3B8;
    --vf-ds-sidebar-active: #1E3A5F;
    --vf-ds-sidebar-marker: #60A5FA;
    --vf-ds-sidebar-hover: #172554;
    --vf-ds-primary: #1D4ED8;
    --vf-ds-primary-hover: #1E40AF;
    --vf-ds-primary-active: #1E3A8A;
    --vf-ds-focus: #1D4ED8;
    --vf-ds-focus-soft: #BFDBFE;
    --vf-ds-text: #0F172A;
    --vf-ds-text-secondary: #475569;
    --vf-ds-text-muted: #64748B;
    --vf-ds-text-disabled: #94A3B8;
    --vf-ds-border: #E2E8F0;
    --vf-ds-border-strong: #CBD5E1;
    --vf-ds-success: #15803D;
    --vf-ds-success-bg: #F0FDF4;
    --vf-ds-warning: #B45309;
    --vf-ds-warning-bg: #FFFBEB;
    --vf-ds-danger: #B91C1C;
    --vf-ds-danger-bg: #FEF2F2;
    --vf-ds-info: #0369A1;
    --vf-ds-info-bg: #F0F9FF;
    --vf-ds-field-placeholder: #64748B;
    --vf-ds-field-border: #8492A6;
    --vf-ds-chart-secondary: #3B82F6;
    --vf-ds-focus-dark: #60A5FA;
    --vf-ds-focus-width: 2px;
    --vf-ds-focus-offset: 2px;
    --vf-ds-sidebar-active-muted: #CBD5E1;
    --vf-ds-secondary-bg: #FFFFFF;
    --vf-ds-secondary-text: #334155;
    --vf-ds-secondary-border: #CBD5E1;
    --vf-ds-secondary-hover: #F8FAFC;
    --vf-ds-secondary-active: #F1F5F9;
}
@font-face {
    font-family:Inter;
    src:url('fonts/InterVariable.woff2?v=1') format('woff2');
    font-weight:400 600;
    font-display:swap
}
main#main,main#main * {
    box-sizing:border-box
}
body {
    margin:0;
    font:400 16px/1.6 Inter,Arial,sans-serif;

    background:#FFFFFF
}
main#main [hidden] {
    display:none!important
}
main#main h1,main#main h2,main#main h3,main#main strong,main#main th {
    font-weight:600
}
main#main h1 {
    font-size:32px;
    line-height:1.2
}
main#main h2 {
    font-size:22px;
    line-height:1.4
}
main#main h3 {
    font-size:18px
}
main#main p {
    max-width:72ch
}
main#main a {
    color:var(--vf-ds-primary)
}
main#main button,main#main a.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 16px;
    border:1px solid var(--vf-ds-border-strong);
    border-radius:8px;
    background:var(--vf-ds-bg-surface);
    color:var(--vf-ds-primary);
    font:500 14px Inter,Arial,sans-serif;
    cursor:pointer;
    text-decoration:none;
    transition:background 150ms
}
main#main button:hover,main#main a.button:hover {
    background:var(--vf-ds-bg-subtle)
}
main#main button.primary,main#main a.primary {
    background:var(--vf-ds-primary);
    color:var(--vf-ds-bg-page);
    border-color:var(--vf-ds-primary)
}
main#main button.primary:hover,main#main a.primary:hover {
    background:var(--vf-ds-primary-hover)
}
main#main :focus-visible {
    outline:2px solid var(--vf-ds-focus);
    outline-offset:4px;
    box-shadow:0 0 0 4px var(--vf-ds-focus-soft)
}
main#main .skip {
    position:absolute;
    top:-64px;
    left:16px
}
main#main .skip:focus {
    top:8px;
    z-index:20;
    background:var(--vf-ds-bg-page)
}
main#main header {
    border-bottom:1px solid var(--vf-ds-border);
    background:var(--vf-ds-bg-page)
}
main#main .header-inner {
    max-width:1200px;
    min-height:64px;
    margin:auto;
    padding:12px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px
}
main#main .brand img {
    height:28px;
    width:auto;
    max-width:100%
}
main#main nav,main#main .actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center
}
main#main .mobile-menu {
    display:none
}
main#main {
    max-width:1200px;
    margin:auto;
    padding:24px
}
main#main .breadcrumbs,main#main .note,main#main small {
    font-size:13px;
    color:var(--vf-ds-text-secondary)
}
main#main .intro {
    margin-bottom:24px
}
main#main .layout {
    display:grid;
    grid-template-columns:minmax(0,3fr) minmax(0,2fr);
    gap:24px;
    align-items:start
}
main#main .card {
    border:1px solid var(--vf-ds-border);
    border-radius:12px;
    padding:24px;
    min-width:0;
    background:var(--vf-ds-bg-surface);
    box-shadow:0 1px 2px rgba(15,23,42,.06)
}
main#main .result {
    background:var(--vf-ds-bg-subtle)
}
main#main .big {
    font-size:32px;
    font-weight:600;
    line-height:1.3
}
main#main .fields {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
main#main label {
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:14px;
    font-weight:500;
    margin-bottom:12px
}
main#main input,main#main select,main#main textarea {
    width:100%;
    max-width:100%;
    min-height:40px;
    border:1px solid var(--vf-ds-field-border);
    border-radius:8px;
    padding:8px;
    font:400 16px Inter,Arial,sans-serif;

    background:var(--vf-ds-bg-page)
}
main#main textarea {
    min-height:96px
}
main#main input[type=checkbox],main#main input[type=radio] {
    width:20px;
    min-height:20px;
    margin:0 8px 0 0
}
main#main .check {
    display:flex;
    flex-direction:row;
    align-items:center
}
main#main .warning {
    padding:16px;
    border:1px solid var(--vf-ds-warning);
    border-radius:8px;
    background:var(--vf-ds-warning-bg);
    color:var(--vf-ds-warning);
    margin:16px 0
}
main#main .error {
    color:var(--vf-ds-danger)
}
main#main .error:empty {
    display:none
}
main#main .grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}
main#main .tool-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
}
main#main .section {
    margin-top:32px
}
main#main table {
    border-collapse:collapse;
    width:100%;
    font-size:14px
}
main#main td,main#main th {
    padding:8px;
    border-bottom:1px solid var(--vf-ds-border);
    text-align:left;
    overflow-wrap:normal
}
main#main th {
    background:var(--vf-ds-bg-subtle)
}
main#main .table-wrap {
    overflow:auto
}
main#main details {
    border-bottom:1px solid var(--vf-ds-border);
    padding:12px 0
}
main#main summary {
    font-weight:500;
    cursor:pointer
}
main#main .cta,main#main footer {
    background:var(--vf-ds-sidebar-bg);
    color:var(--vf-ds-bg-page);
    padding:24px;
    border-radius:12px
}
main#main .cta a,main#main footer a {
    color:var(--vf-ds-focus-dark)
}
main#main footer {
    margin-top:32px;
    border-radius:0
}
main#main footer>div {
    max-width:1152px;
    margin:auto
}
main#main footer img {
    width:160px;
    height:auto
}
main#main .ingredient,main#main .invoice-line {
    border-bottom:1px solid var(--vf-ds-border);
    padding:16px 0
}
main#main .row-heading {
    display:flex;
    justify-content:space-between;
    gap:8px;
    align-items:center
}
main#main .bars {
    width:100%;
    height:auto;
    fill:var(--vf-ds-primary)
}
main#main .bars text {
    fill:var(--vf-ds-text);
    font-size:14px
}
main#main .bars rect {
    fill:var(--vf-ds-chart-secondary)
}
main#main progress {
    width:100%;
    accent-color:var(--vf-ds-primary)
}
main#main .invoice {
    font-size:14px;
    overflow-wrap:normal
}
main#main .invoice h2 {
    margin-top:0
}
main#main .invoice img {
    max-width:160px;
    max-height:80px;
    width:auto
}
main#main .invoice.modern {
    border-top:8px solid var(--vf-ds-primary)
}
main#main .invoice.minimal {
    border:0;
    box-shadow:none
}
main#main .invoice.classic h2 {
    border-bottom:2px solid var(--vf-ds-primary);
    padding-bottom:8px
}
main#main .invoice .parties {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}
main#main .invoice p {
    white-space:pre-wrap
}
main#main .icon {
    width:32px;
    height:32px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.5
}
main#main .copy-area {
    min-height:80px
}
main#main .empty-filter {
    grid-column:1/-1
}
main#main .print-only {
    display:none
}
main#main .mobile-preview {
    display:none
}
@media(min-width:1100px) {
    main#main header {
        position:sticky;
        top:0;
        z-index:10
    }
}
@media(max-width:1024px) {
    main#main .layout {
        grid-template-columns:1fr
    }
    main#main .grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:600px) {
    main#main {
        padding:16px
    }
    main#main .header-inner {
        padding:12px 16px;
        gap:8px
    }
    main#main .brand img {
        height:24px;
        max-width:144px
    }
    main#main .desktop-nav {
        display:none
    }
    main#main .mobile-menu {
        display:block
    }
    main#main .mobile-menu nav {
        padding:12px
    }
    main#main .mobile-menu summary {
        font-size:14px
    }
    main#main .header-inner>a.button {
        padding:8px;
        font-size:13px
    }
    main#main h1 {
        font-size:26px
    }
    main#main .card {
        padding:16px
    }
    main#main .fields,main#main .grid,main#main .invoice .parties {
        grid-template-columns:1fr
    }
    main#main .mobile-preview {
        display:inline-flex
    }
    main#main .big {
        font-size:26px
    }
    main#main .invoice {
        font-size:13px
    }
}
@media print {
    @page {
        size:A4;
        margin:16mm
    }
    body {
        font-family:Arial,sans-serif
    }
    main#main>* {
        display:none
    }
    main#main {
        display:block;
        max-width:none;
        padding:0
    }
    main#main>* {
        display:none!important
    }
    main#main>.layout {
        display:block!important
    }
    main#main .layout>* {
        display:none!important
    }
    main#main .layout>.result {
        display:block!important;
        background:var(--vf-ds-bg-page);
        border:0;
        padding:0;
        box-shadow:none
    }
    main#main .result>.actions,main#main .result>.error,main#main .result>.copy-area,main#main .result>.print-hide {
        display:none!important
    }
    main#main .invoice {
        border:0;
        box-shadow:none;
        padding:0
    }
    main#main .invoice-line,main#main table tr,main#main .parties {
        break-inside:avoid
    }
    main#main .print-only {
        display:block
    }
    main#main .bars {
        max-height:240px
    }
    main#main .warning {
        break-inside:avoid
    }
    main#main .big {
        font-size:26px
    }
}
main#main [aria-invalid="true"] {
    border-color:var(--vf-ds-danger);
    box-shadow:0 0 0 1px var(--vf-ds-danger)
}
main#main .print-errors {
    padding:16px;
    margin:16px 0;
    border:1px solid var(--vf-ds-danger);
    border-radius:8px;
    background:var(--vf-ds-danger-bg)
}
main#main .print-errors ul {
    padding-left:24px
}

/* Contraste de la llamada a la acción, también dentro de la franja oscura. */
main#main .cta a.button.primary {
    color:var(--vf-ds-bg-page);
    background:var(--vf-ds-primary)
}
main#main .cta a.button.primary:hover {
    background:var(--vf-ds-primary-hover)
}
main#main .cta a.button.primary:focus-visible {
    background:var(--vf-ds-primary);
    outline-color:var(--vf-ds-focus-dark)
}
main#main .cta a.button.primary:active {
    background:var(--vf-ds-primary-active)
}
/* La sonda invisible usa las mismas dimensiones y tipografía que la impresión. */
main#main .invoice-print-probe {
    position:absolute;
    left:-10000px;
    top:0;
    width:178mm;
    visibility:hidden;
    pointer-events:none
}
main#main .invoice-print-height {
    position:absolute;
    height:265mm;
    width:1px
}
main#main .invoice-print-probe .invoice {
    font-family:Arial,sans-serif;
    font-size:10pt;
    line-height:1.35;
    padding:0;
    border:0
}
main#main .invoice-print-probe .invoice .parties {
    grid-template-columns:1fr 1fr;
    gap:4mm
}
main#main .invoice-print-probe .invoice p {
    margin:1.5mm 0;
    max-width:none
}
main#main .invoice-print-probe .invoice h2 {
    font-size:16pt;
    margin:0 0 2mm
}
main#main .invoice-print-probe .invoice h3 {
    font-size:11pt;
    margin:2mm 0
}
main#main .invoice-print-probe .invoice table {
    font-size:10pt
}
main#main .invoice-print-probe .invoice td,main#main .invoice-print-probe .invoice th {
    padding:1.2mm
}
main#main .invoice-print-probe .invoice .warning {
    padding:2mm;
    margin:2mm 0
}
main#main .invoice-print-probe .invoice .note {
    font-size:9pt
}
main#main .invoice-print-probe .invoice .big {
    font-size:16pt
}
main#main .invoice-print-probe .invoice .table-wrap {
    overflow:visible
}
@media print {
    main#main .invoice-print-probe {
        display:none!important
    }
    main#main .invoice {
        font-family:Arial,sans-serif;
        font-size:10pt;
        line-height:1.35;
        padding:0;
        border:0
    }
    main#main .invoice .parties {
        grid-template-columns:1fr 1fr;
        gap:4mm
    }
    main#main .invoice p {
        margin:1.5mm 0;
        max-width:none
    }
    main#main .invoice h2 {
        font-size:16pt;
        margin:0 0 2mm
    }
    main#main .invoice h3 {
        font-size:11pt;
        margin:2mm 0
    }
    main#main .invoice table {
        font-size:10pt
    }
    main#main .invoice td,main#main .invoice th {
        padding:1.2mm
    }
    main#main .invoice .warning {
        padding:2mm;
        margin:2mm 0
    }
    main#main .invoice .note {
        font-size:9pt
    }
    main#main .invoice .big {
        font-size:16pt
    }
    main#main .invoice .table-wrap {
        overflow:visible
    }
    main#main .invoice thead {
        display:table-header-group
    }
}

/* NORMA_DENSIDAD_HERRAMIENTAS: aplicación a pantalla, sin alterar la impresión. */
@media screen {
    body {
        font-size:15px;
        line-height:1.5
    }
    main#main,main#main .header-inner,main#main footer>div {
        max-width:1080px
    }
    main#main {
        padding:16px 24px
    }
    main#main .header-inner {
        height:56px;
        min-height:56px;
        padding:8px 24px
    }
    main#main .brand img {
        height:20px
    }
    main#main header nav a {
        font-size:14px;
        text-decoration:none
    }
    main#main header nav a:hover {
        text-decoration:underline
    }
    main#main button,main#main a.button {
        min-height:32px;
        padding:5px 12px;
        font-size:14px
    }
    main#main h1 {
        font-size:28px;
        font-weight:600;
        margin:0 0 16px
    }
    main#main h2 {
        font-size:18px;
        font-weight:600;
        margin:0 0 16px
    }
    main#main h3 {
        font-size:15px;
        font-weight:600;
        margin:0 0 8px
    }
    main#main p {
        margin:0 0 8px
    }
    main#main .breadcrumbs {
        font-size:12px;
        margin-bottom:12px
    }
    main#main .note,main#main small,main#main label {
        font-size:13px
    }
    main#main label {
        margin-bottom:8px
    }
    main#main input,main#main select,main#main textarea {
        min-height:36px;
        padding:7px 8px;
        font-size:14px;
        line-height:20px
    }
    main#main input:not([type=checkbox]):not([type=radio]),main#main select {
        height:36px
    }
    main#main textarea {
        min-height:72px
    }
    main#main .intro {
        margin-bottom:16px
    }
    main#main .section {
        margin-top:24px
    }
    main#main .layout {
        gap:16px
    }
    main#main .card {
        padding:16px;
        border-radius:10px
    }
    main#main .fields {
        gap:12px
    }
    main#main .grid,main#main .tool-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px
    }
    main#main .icon {
        width:18px;
        height:18px
    }
    main#main .tool-card {
        display:grid;
        grid-template-columns:18px minmax(0,1fr);
        column-gap:8px;
        row-gap:4px;
        align-content:start
    }
    main#main .tool-card .icon {
        grid-column:1;
        grid-row:1;
        margin-top:2px
    }
    main#main .tool-card h3 {
        grid-column:2;
        grid-row:1;
        margin:0
    }
    main#main .tool-card p,main#main .tool-card a {
        grid-column:1/-1;
        margin:0
    }
    main#main .tool-card p {
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        max-height:3em
    }
    main#main .tool-card a {
        font-size:14px;
        text-decoration:none
    }
    main#main .tool-card a:hover {
        text-decoration:none
    }
    main#main:where(body.tools-index *) .fields {
        display:flex;
        flex-wrap:wrap;
        align-items:center
    }
    main#main:where(body.tools-index *) .fields label {
        width:260px;
        max-width:100%
    }
    main#main:where(body.tools-index *) #search {
        max-width:532px
    }
    main#main:where(body.tools-index *) #filter-status {
        margin:0;
        font-size:13px
    }
    main#main:where(body.tools-index *)>h2 {
        margin:16px 0 0
    }
    main#main:where(body.tools-index *) [data-tool-section] {
        margin-top:24px
    }
    main#main:where(body.tools-index *) [data-tool-section] h2 {
        margin-bottom:16px
    }
    main#main .cta {
        padding:20px
    }
    main#main .cta h2 {
        font-size:17px
    }
    main#main footer {
        margin-top:24px;
        padding:20px
    }
    main#main .big {
        font-size:24px;
        margin:0 0 8px
    }
    main#main .warning,main#main .print-errors {
        padding:12px;
        margin:16px 0
    }
    main#main .ingredient,main#main .invoice-line {
        padding:12px 0
    }
    main#main .invoice {
        font-size:14px
    }
    main#main .invoice table {
        font-size:13px
    }
    main#main td,main#main th {
        padding:6px
    }
    main#main .invoice .parties p {
        white-space:pre-line
    }
    main#main .invoice p {
        overflow-wrap:normal
    }
    main#main .result,main#main .invoice,main#main .table-wrap {
        min-width:0
    }
    main#main .table-wrap {
        max-width:100%
    }
    @media(max-width:1024px) {
        main#main .grid,main#main .tool-grid {
            grid-template-columns:repeat(2,minmax(0,1fr))
        }
    }
    @media(max-width:600px) {
        body {
            font-size:14px
        }
        main#main {
            padding:16px
        }
        main#main .header-inner {
            padding:8px 16px
        }
        main#main h1 {
            font-size:22px
        }
        main#main .grid,main#main .tool-grid {
            grid-template-columns:1fr
        }
        main#main .header-inner>a.button {
            font-size:14px;
            padding:5px 8px
        }
        main#main:where(body.tools-index *) .fields label {
            width:100%
        }
        main#main:where(body.tools-index *) .fields {
            gap:4px
        }
        main#main .invoice .parties {
            grid-template-columns:1fr
        }
    }
}

@media screen {
    main#main .visually-hidden {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        margin:-1px;
        overflow:hidden;
        clip-path:inset(50%);
        white-space:nowrap
    }
    main#main .catalog-summary {
        display:flex;
        flex-wrap:wrap;
        align-items:baseline;
        justify-content:space-between;
        gap:8px;
        margin-top:16px
    }
    main#main .catalog-summary h2 {
        margin:0
    }
    main#main:where(body.tools-index *) .intro p {
        max-width:none
    }
}

/* Los avisos fijos no deben conservar la indentación HTML como líneas vacías. */
main#main .invoice-print-probe .invoice .warning,main#main .invoice-print-probe .invoice .note {
    white-space:normal
}
@media print {
    main#main .invoice .warning,main#main .invoice .note {
        white-space:normal
    }
}

/* Herramientas y documentos F2: misma norma de densidad y sin estilos dinámicos. */
main#main .draft-badge {
    grid-column:1/-1;
    justify-self:start;
    font-size:12px;
    font-weight:600;
    color:var(--vf-ds-warning);
    background:var(--vf-ds-warning-bg);
    border:1px solid var(--vf-ds-warning);
    border-radius:4px;
    padding:1px 6px
}
main#main .document-paragraph {
    white-space:pre-line
}
main#main .allergen-dish {
    min-width:0;
    margin:16px 0;
    padding:12px;
    border:1px solid var(--vf-ds-border)
}
main#main .phase2-page .result button {
    margin-top:8px
}
@media screen {
    main#main .phase2-page .fields {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    main#main .phase2-page .invoice h3 {
        margin-top:16px
    }
    main#main .phase2-page .invoice p {
        white-space:normal
    }
    main#main .phase2-page .invoice p.document-paragraph {
        white-space:pre-line
    }
    @media(max-width:600px) {
        main#main .phase2-page .fields {
            grid-template-columns:1fr
        }
    }
}
@media print {
    main#main .phase2-page .result>.print-hide {
        display:none!important
    }
    main#main .phase2-page .invoice .warning {
        white-space:normal
    }
    main#main .phase2-page .invoice h3 {
        break-after:avoid
    }
    main#main .phase2-page .invoice table {
        table-layout:auto
    }
}

/* HERR-F3-A: ayudas visibles; medidas y paleta de la norma conservadas. */
main#main .field-help {
    display:block;
    font-size:13px;
    font-weight:400;
    line-height:1.5;
    color:var(--vf-ds-text-secondary);
    margin-top:4px
}
main#main .check:has(.field-help) {
    flex-wrap:wrap
}
main#main .check .field-help {
    flex-basis:100%
}
main#main .sector-links {
    margin-top:16px
}
main#main .sector-links ul {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
    padding-left:20px
}
main#main .result-explanation {
    margin-bottom:16px
}
main#main .result-explanation h2 {
    margin-top:0
}
main#main .result-explanation ol {
    padding-left:20px;
    margin:0 0 16px
}

main#main { color:var(--vf-ds-text); }