.vf-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vf-barra {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vf-barra h1 {
    font-size: 1.35rem;
    margin: 0;
}

.vf-nota {
    color: var(--texto-secundario, #555);
    margin: 0;
}

.vf-nota-linea {
    color: var(--texto-secundario, #666);
    margin-left: 6px;
}

.vf-cabecera {
    display: flex;
    gap: 16px;
    align-items: center;
    border-radius: 12px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #eff6ff, #f0fdf4);
    border: 1px solid #bfdbfe;
}

.vf-icono {
    font-size: 2.4rem;
    color: #1d4ed8;
}

.vf-sistema {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e3a8a;
}

.vf-empresa { font-size: 1.05rem; }

.vf-nif {
    font-family: monospace;
    letter-spacing: .04em;
    color: var(--texto-secundario, #555);
}

.vf-chip {
    margin-left: auto;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
    white-space: nowrap;
}

.vf-chip-verde { background: #dcfce7; color: #166534; }
.vf-chip-gris { background: #f1f5f9; color: #475569; }

.vf-tarjeta {
    background: var(--superficie, #fff);
    border: 1px solid var(--borde, #e2e2e2);
    border-radius: 10px;
    padding: 16px;
}

.vf-tarjeta h2 {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

.vf-datos {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
}

.vf-datos dt { color: var(--texto-secundario, #555); }
.vf-datos dd { margin: 0; overflow-wrap: anywhere; }

.vf-aviso {
    border-radius: 8px;
    padding: 8px 12px;
    margin: 0;
}

.vf-aviso-aviso { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.vf-aviso-riesgo { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }

.vf-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.vf-btn {
    border: 1px solid var(--borde, #ccc);
    background: var(--superficie, #fff);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.vf-btn:hover { background: #f8fafc; }

.vf-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}

.vf-campo {
    display: grid;
    grid-template-columns: 220px minmax(0, 320px);
    align-items: center;
    gap: 12px;
}

.vf-campo > span { color: var(--texto-secundario, #555); }

.vf-check {
    display: flex;
    gap: 8px;
    align-items: center;
}

.vf-btn:disabled { opacity: .55; cursor: default; }

.vf-btn-primario {
    background: var(--primario, #2563eb);
    border-color: var(--primario, #2563eb);
    color: #fff;
}

.vf-btn-primario:hover { background: #1d4ed8; }

.vf-aviso-informacion { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }

.vf-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    align-items: flex-end;
}

.vf-filtros label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--texto-secundario, #555);
    font-size: .9rem;
}

.vf-tabla-marco {
    max-height: 60vh;
    overflow: auto;
    border: 1px solid var(--borde, #e2e2e2);
    border-radius: 10px;
}

.vf-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.vf-tabla th {
    position: sticky;
    top: 0;
    background: #f1f5f9;
    text-align: left;
    padding: 8px;
    z-index: 1;
}

.vf-tabla td {
    padding: 6px 8px;
    border-top: 1px solid var(--borde, #eee);
    vertical-align: top;
}

.vf-tabla tr:hover td { background: #f8fafc; }

.vf-num { text-align: right; }

.vf-mono {
    font-family: monospace;
    font-size: .85em;
    word-break: break-all;
}

.vf-estado-rojo { color: #b91c1c; font-weight: 600; }
.vf-estado-ambar { color: #b45309; font-weight: 600; }
.vf-estado-verde { color: #15803d; font-weight: 600; }
.vf-estado-gris { color: #64748b; }

.vf-resumen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vf-paginas {
    display: flex;
    gap: 8px;
    align-items: center;
}

@media print {
    .vf-barra .volver-boton,
    .vf-acciones,
    .vf-filtros,
    .vf-paginas { display: none; }
    .vf-tabla-marco { max-height: none; overflow: visible; border: none; }
}
.vf-page-ancha { max-width: 1400px; }

.vf-enlace { margin-left: 8px; }

.vf-rango {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--texto-secundario, #555);
    font-size: .9rem;
}

.vf-rango-input { max-width: 140px; }

.vf-btn .material-symbols-rounded {
    font-size: 1.1rem;
    vertical-align: -3px;
}