:root {
    --verde: #55B80D;
    --verde-2: #46960A;
    --negro: #0c0c0c;
    --texto: #1a1a1a;
    --muted: #6b7280;
    --linea: #e6e8ec;
    --fondo: #f3f4f6;
    --blanco: #fff;
    --naranja: #ff7a18;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    font-family: Inter, "Segoe UI", sans-serif;
    color: var(--texto);
    background: var(--fondo);
    font-size: 14px;
    line-height: 1.4;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
svg { display: block; }

.zf-menu-check { position: absolute; opacity: 0; pointer-events: none; }

.zf-shell { display: block; min-height: 100vh; background: var(--fondo); }
.zf-cabecera {
    display: flex;
    flex-direction: column;
    background: #111;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
}
.zf-barra-alta {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    min-height: 74px;
    padding: 0 22px;
}
.zf-barra-alta .zf-logo { padding: 0; }
.zf-barra-alta .zf-logo img { height: 52px; }
.zf-barra-alta .zf-folios { margin: 0; }
.zf-barra-alta > :nth-child(2) { margin-left: auto; }
.zf-barra-alta .zf-top-der { margin-left: 0; gap: 16px; }
.zf-cabecera .zf-chip strong { color: #fff; }
.zf-cabecera .zf-chip small { color: #c5c9d1; }
.zf-cabecera .zf-avatar { width: 40px; height: 40px; background: var(--verde); color: #111; font-size: 15px; }
.zf-cabecera .zf-salir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid #3a3a3a;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
}
.zf-cabecera .zf-salir:hover { background: #1c1c1c; color: #fff; }
.zf-cabecera .zf-buscar {
    width: 280px;
    flex: none;
    max-width: none;
    height: 38px;
    background: #1c1c1c;
    border-color: #2a2a2a;
    color: #c5c9d1;
}
.zf-cabecera .zf-buscar input { color: #fff; }
.zf-barra-menu {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    background: #161616;
    border-top: 1px solid #2a2a2a;
}
.zf-barra-menu > a,
.zf-barra-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    color: #f3f3f3;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.zf-barra-menu i,
.zf-salir i {
    font-family: icofont;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    width: 18px;
    text-align: center;
}
.zf-barra-menu summary::-webkit-details-marker { display: none; }
.zf-barra-menu summary::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    margin-left: 2px;
}
.zf-barra-menu > a:hover,
.zf-barra-menu summary:hover { background: #1c1c1c; }
.zf-barra-menu > a.activo,
.zf-barra-menu details.activo > summary { background: var(--verde); color: #111; }
.zf-barra-menu details { position: relative; }
.zf-barra-menu details > div {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.zf-barra-menu details[open] > div { display: flex; flex-direction: column; }
.zf-barra-menu details > div a {
    padding: 8px 10px;
    border-radius: 6px;
    color: #111;
    font-weight: 600;
}
.zf-barra-menu details > div a:hover,
.zf-barra-menu details > div a.activo { background: #f3fdf3; }
.zf-lado {
    width: 228px;
    flex: none;
    background: var(--negro);
    color: #f2f2f2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    z-index: 20;
}
.zf-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px 8px;
    color: #fff;
    position: relative;
    z-index: 1;
}
.zf-logo img { height: 44px; width: auto; display: block; }

.zf-folios {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 18px;
    position: relative;
    z-index: 1;
}
.zf-folios i { font-size: 22px; color: var(--verde); }
.zf-folios strong { display: block; font-size: 18px; line-height: 1; }
.zf-folios span { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #cfcfcf; }

.zf-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; position: relative; z-index: 1; }
.zf-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #f3f3f3;
    padding: 10px 12px;
    border-radius: 6px;
    font-weight: 500;
}
.zf-nav a i { width: 18px; font-size: 18px; line-height: 1; text-align: center; }
.zf-nav a:hover { background: #1c1c1c; }
.zf-nav a.activo { background: var(--verde); color: #111; font-weight: 700; }
.zf-acordeon { display: flex; flex-direction: column; }
.zf-acordeon-check { position: absolute; opacity: 0; pointer-events: none; }
.zf-nav-grupo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 0 2px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f3f3f3;
    cursor: pointer;
}
.zf-nav-grupo:hover { background: #1c1c1c; }
.zf-nav-grupo::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    margin-right: 4px;
}
.zf-acordeon-check:checked + .zf-nav-grupo::after { transform: rotate(45deg); margin-top: -3px; }
.zf-subnav { display: none; flex-direction: column; gap: 2px; }
.zf-acordeon-check:checked ~ .zf-subnav { display: flex; }
.zf-subnav a { padding-left: 22px; }
.zf-concepto {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 12px;
    align-items: end;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 8px;
}
.zf-concepto label { display: flex; flex-flow: row wrap; align-items: center; column-gap: 4px; row-gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.zf-concepto label > input,
.zf-concepto label > select,
.zf-concepto label > textarea,
.zf-concepto label > .zf-comp-caja,
.zf-concepto label > .zf-sugerencias { flex: 1 1 100%; }
.zf-prediales, .zf-pedimentos { display: flex; flex-flow: row wrap; align-items: center; column-gap: 4px; row-gap: 4px; font-size: 13px; font-weight: 600; min-width: 0; }
.zf-prediales > span, .zf-pedimentos > span { display: inline-flex; align-items: center; gap: 4px; }
.zf-prediales > .zf-predial-filas,
.zf-pedimentos > .zf-pedimento-filas,
.zf-prediales > .zf-btn-sec,
.zf-pedimentos > .zf-btn-sec,
.zf-prediales > .zf-nota,
.zf-pedimentos > .zf-nota,
.zf-prediales > input,
.zf-pedimentos > input { flex: 1 1 100%; }
.zf-prediales[hidden] { display: none; }
.zf-comps-concepto {
    display: grid;
    gap: 8px;
    padding: 12px;
    border: 1px dashed #dbe3d2;
    border-radius: 12px;
    background: #fbfdf8;
}
.zf-comps-concepto-titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}
.zf-comp-concepto {
    border: 1px solid #e9edf2;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}
.zf-concepto .zf-comp-concepto > .zf-usar-direccion {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 10px 12px;
    color: #111;
    cursor: pointer;
}
.zf-concepto .zf-comp-concepto:hover { border-color: #c6e6a8; }
.zf-concepto .zf-comp-concepto:has(.zf-complemento-activo:checked) {
    border-color: #b7dd8a;
    box-shadow: 0 0 0 3px rgba(85, 184, 13, 0.12);
}
.zf-comp-concepto-nombre {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
}
.zf-comp-concepto .zf-comp-ico,
.zf-comp-orden .zf-comp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 18px;
}
.zf-comp-concepto:hover .zf-comp-ico,
.zf-comp-concepto:has(.zf-complemento-activo:checked) .zf-comp-ico,
.zf-comp-orden > .zf-bloque:has(.zf-complemento-activo:checked) .zf-comp-ico,
.zf-comp-orden > #comercio-exterior .zf-comp-ico {
    background: #e7f6d4;
    color: #2f6b09;
}
.zf-comp-concepto .zf-iedu,
.zf-comp-concepto .zf-hidrocarburos,
.zf-comp-concepto .zf-vehiculo,
.zf-comp-concepto .zf-terceros {
    padding: 14px 16px 16px;
    border-top: 1px solid #e9edf2;
    background: #fff;
}
.zf-vehiculo[hidden],
.zf-hidrocarburos[hidden],
.zf-terceros[hidden] { display: none; }
.zf-predial-fila, .zf-pedimento-fila { display: flex; gap: 8px; align-items: center; }
.zf-aero-fila { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px 16px; align-items: end; margin-bottom: 14px; }
.zf-aero-fila select, .zf-aero-fila input, .zf-aero-quitar { height: 38px; }
.zf-veh-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; align-items: end; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.zf-veh-fila input, .zf-veh-quitar { height: 38px; }
.zf-iedu-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 16px; align-items: end; margin-bottom: 14px; }
.zf-iedu-fila input, .zf-iedu-fila select, .zf-iedu-quitar { height: 38px; }
.zf-iedu[hidden] { display: none; }
.zf-precio-modo { display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 0 0 8px; border: 0; padding: 0; }
.zf-leyenda-fila { display: grid; grid-template-columns: 140px 1fr 2fr auto; gap: 8px 16px; align-items: end; margin: 0 0 14px; }
.zf-leyenda-fila input, .zf-leyenda-quitar { height: 38px; }
.zf-predial-fila input, .zf-pedimento-fila input { flex: 1; }
.zf-predial-quitar, .zf-pedimento-quitar { flex: 0 0 auto; height: 38px; }
.zf-partes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.zf-partes-campos { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.zf-partes-campos[hidden] { display: none; }
.zf-parte-fila, .zf-especifica-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.zf-especificas[hidden] { display: none; }
.zf-ce-bloque { margin-top: 14px; }
.zf-ce-filas { display: flex; flex-direction: column; gap: 8px; }
.zf-ce-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; align-items: end; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.zf-ce-fila input, .zf-ce-fila select { width: 100%; min-width: 0; height: 38px; }
.zf-ce-fila .zf-btn-sec { height: 38px; }
.zf-especifica-quitar { height: 38px; }
.zf-parte-quitar { height: 38px; }
.zf-concepto .zf-ancho { grid-column: span 2; }
.zf-concepto .zf-linea { grid-column: 1 / -1; }
.zf-concepto-cabeza {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px 16px;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 4px;
    color: #111;
}
.zf-concepto-plegar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 180px;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.zf-concepto-plegar:hover { background: transparent; color: inherit; }
.zf-concepto-marca {
    flex: none;
    width: 16px;
    height: 16px;
    border: 2px solid #9ca3af;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
}
.zf-concepto-marca::before,
.zf-concepto-marca::after {
    content: "";
    position: absolute;
    background: #6b7280;
}
.zf-concepto-marca::before { top: 5px; left: 2px; width: 8px; height: 2px; }
.zf-concepto-marca::after { top: 2px; left: 5px; width: 2px; height: 8px; }
.zf-concepto:not(.cerrado) .zf-concepto-marca::after { display: none; }
.zf-concepto-nombre {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zf-concepto-cifras {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    color: #6b7280;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.zf-concepto.cerrado {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px 10px;
    padding: 8px 12px;
}
.zf-concepto.cerrado > :not(.zf-concepto-cabeza) { display: none !important; }
.zf-concepto.cerrado .zf-concepto-cabeza { grid-column: auto; }
.zf-concepto-cabeza .zf-quitar { width: 32px; height: 32px; flex: none; padding: 0; }
.zf-concepto .zf-sugerencias { top: 100%; margin-top: 4px; }
.zf-concepto .zf-sugerir.abierta { z-index: 8; }
.zf-concepto select,
.zf-concepto input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-concepto textarea {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    padding: 0 10px;
    font-weight: 500;
}
.zf-concepto select:focus,
.zf-concepto input:not([type="checkbox"]):not([type="radio"]):focus,
.zf-concepto textarea:focus {
    outline: 2px solid rgba(85, 184, 13, 0.35);
    border-color: var(--verde);
}
.zf-concepto textarea { height: 72px; padding: 8px; resize: vertical; }
.zf-impuestos-linea { margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; }
.zf-impuestos-concepto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px 16px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fafafa;
}
.zf-impuestos-concepto[hidden] { display: none; }
.zf-campos[hidden],
.zf-leyendas[hidden],
.zf-carta[hidden],
.zf-carta-int[hidden],
.zf-carta-istmo[hidden],
.zf-carta-modo[hidden],
.zf-motivo-traslado[hidden],
.zf-ine-comite[hidden],
.zf-ine-entidad[hidden],
.zf-ine-ambito[hidden] { display: none; }
.zf-notarios h3, .zf-detallista h3, .zf-carta h3,
[data-complemento] h3, #comercio-exterior h3 {
    margin: 18px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #374151;
}
.zf-comp-orden .zf-bloque-cuerpo label:not(.zf-imp-casilla):not(.zf-usar-direccion):not([hidden]),
.zf-comp-concepto .zf-iedu label:not([hidden]),
.zf-comp-concepto .zf-hidrocarburos label:not([hidden]),
.zf-comp-concepto .zf-vehiculo label:not([hidden]),
.zf-comp-concepto .zf-terceros label:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}
.zf-comp-orden .zf-bloque-cuerpo label .zf-info,
.zf-comp-concepto label .zf-info {
    margin: 0;
    order: 0;
}
.zf-comp-caja { order: 1; }
.zf-aero-fila > label,
.zf-veh-fila > label,
.zf-iedu-fila > label,
.zf-leyenda-fila > label,
.zf-ce-fila > label {
    margin-bottom: 0;
}
.zf-comp-orden .zf-bloque-cuerpo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-orden .zf-bloque-cuerpo select,
.zf-comp-orden .zf-bloque-cuerpo textarea,
.zf-comp-concepto .zf-iedu input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-concepto .zf-iedu select,
.zf-comp-concepto .zf-hidrocarburos input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-concepto .zf-hidrocarburos select,
.zf-comp-concepto .zf-vehiculo input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-concepto .zf-vehiculo select,
.zf-comp-concepto .zf-terceros input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-concepto .zf-terceros select {
    display: block;
    width: 100%;
    min-width: 0;
    height: 38px;
    margin-top: 6px;
    padding: 0 10px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: inherit;
}
.zf-comp-orden .zf-bloque-cuerpo textarea,
.zf-comp-concepto textarea {
    height: auto;
    min-height: 72px;
    padding: 10px;
    resize: vertical;
}
.zf-comp-caja {
    position: relative;
    display: block;
    flex: 1 1 100%;
    min-width: 0;
    margin-top: 6px;
}
.zf-comp-caja > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
}
.zf-comp-caja:has(textarea) > i {
    top: 12px;
    transform: none;
}
.zf-comp-orden .zf-bloque-cuerpo .zf-comp-caja input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-orden .zf-bloque-cuerpo .zf-comp-caja select,
.zf-comp-orden .zf-bloque-cuerpo .zf-comp-caja textarea,
.zf-comp-concepto .zf-comp-caja input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.zf-comp-concepto .zf-comp-caja select,
.zf-comp-concepto .zf-comp-caja textarea {
    margin-top: 0;
    padding-left: 34px;
}
.zf-comp-concepto .zf-comp-caja textarea,
.zf-comp-orden .zf-bloque-cuerpo .zf-comp-caja textarea {
    padding: 10px 10px 10px 34px;
}
.zf-comp-orden .zf-bloque-cuerpo input:not([type="checkbox"]):not([type="radio"]):focus,
.zf-comp-orden .zf-bloque-cuerpo select:focus,
.zf-comp-orden .zf-bloque-cuerpo textarea:focus,
.zf-comp-concepto input:not([type="checkbox"]):not([type="radio"]):focus,
.zf-comp-concepto select:focus,
.zf-comp-concepto textarea:focus {
    outline: 2px solid rgba(85, 184, 13, 0.35);
    border-color: var(--verde);
}
.zf-comp-orden .zf-imp-casilla {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
    cursor: pointer;
}
.zf-comp-orden .zf-imp-casilla:has(input:checked) {
    border-color: #15803d;
    background: #f3fdf3;
}
.zf-comp-orden .zf-imp-casilla input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; }
.zf-emision [hidden] { display: none !important; }
.zf-emision .zf-bloque {
    border: 1px solid #e9edf2;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.zf-emision .zf-concepto {
    border-color: #e9edf2;
    border-radius: 12px;
}
.zf-emision .input input,
.zf-emision .input select,
.zf-emision .input textarea {
    border-radius: 8px;
}
.zf-emision .input input:focus,
.zf-emision .input select:focus,
.zf-emision .input textarea:focus {
    outline: 2px solid rgba(85, 184, 13, 0.35);
    border-color: var(--verde);
}
.zf-emision .zf-impuestos-concepto {
    border-color: #e9edf2;
    border-radius: 8px;
}
.zf-comp-seccion:not(:has(.zf-comp-orden > section:not([hidden]))) { display: none; }
.zf-comp-seccion > .zf-bloque-cuerpo { display: grid; gap: 12px; }
.zf-comp-orden {
    display: grid;
    gap: 10px;
    margin: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}
.zf-comp-orden > .zf-bloque,
.zf-comp-orden > #comercio-exterior {
    margin: 0;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}
.zf-comp-orden > .zf-bloque:has(.zf-complemento-activo:checked),
.zf-comp-orden > #comercio-exterior {
    border-color: #b7dd8a;
    box-shadow: 0 0 0 3px rgba(85, 184, 13, 0.12);
}
.zf-comp-orden .zf-barra {
    display: block;
    background: #fff;
    color: #111;
    min-height: 0;
    padding: 0;
}
.zf-comp-orden .zf-barra::after,
.zf-comp-orden .zf-barra-ico { display: none; }
.zf-comp-orden .zf-barra h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}
.zf-comp-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.zf-comp-nombre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.zf-comp-seccion > .zf-barra h2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.zf-comp-desc {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    text-transform: none;
}
.zf-comp-orden .zf-usar-direccion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 12px 14px;
    cursor: pointer;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
}
.zf-comp-orden .zf-usar-direccion h2,
.zf-comp-concepto-nombre { order: 1; flex: 1; }
.zf-comp-aviso {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 16px;
    cursor: pointer;
}
.zf-comp-aviso:hover,
.zf-comp-aviso:focus {
    background: #ffedd5;
    color: #9a3412;
}
.zf-comp-orden > #comercio-exterior > .zf-barra .zf-comp-aviso {
    margin-left: auto;
}
.zf-comp-orden .zf-usar-direccion input,
.zf-comp-concepto > .zf-usar-direccion input {
    appearance: none;
    -webkit-appearance: none;
    order: 3;
    width: 42px;
    height: 24px;
    margin: 0;
    flex: none;
    border-radius: 999px;
    background: #e5e7eb;
    box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.06);
    cursor: pointer;
    position: relative;
    accent-color: var(--verde);
}
.zf-comp-orden .zf-usar-direccion input::after,
.zf-comp-concepto > .zf-usar-direccion input::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2);
    transition: transform 0.15s ease;
}
.zf-comp-orden .zf-usar-direccion input:checked,
.zf-comp-concepto > .zf-usar-direccion input:checked {
    background: var(--verde);
}
.zf-comp-orden .zf-usar-direccion input:checked::after,
.zf-comp-concepto > .zf-usar-direccion input:checked::after {
    transform: translateX(18px);
}
.zf-comp-orden .zf-barra:has(.zf-complemento-activo):hover { background: #fbfdf8; }
.zf-comp-orden .zf-bloque:has(.zf-complemento-activo):not(:has(.zf-complemento-activo:checked)) > .zf-bloque-cuerpo { display: none; }
.zf-comp-orden > .zf-bloque:has(.zf-complemento-activo:checked) > .zf-bloque-cuerpo,
.zf-comp-orden > #comercio-exterior > .zf-bloque-cuerpo {
    padding: 16px 16px 4px;
    border-top: 1px solid #e9edf2;
    background: #fff;
}
.zf-comp-orden > #comercio-exterior > .zf-barra {
    display: flex;
    align-items: center;
    min-height: 64px;
    padding: 12px 14px;
}
.zf-carta .zf-btn-sec { margin: 8px 0 4px; }
.zf-carta-fila { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
.zf-carta details { margin: 8px 0 4px; }
.zf-carta summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; }
.zf-notarios .zf-btn-sec { margin: 8px 0 4px; }
.zf-notarios .zf-notarios-fila { margin-bottom: 8px; }
.zf-imp-grupo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.zf-imp-grupo > strong { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.zf-imp-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.zf-concepto label.zf-imp-casilla {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.zf-concepto label.zf-imp-casilla input { width: 16px; height: 16px; margin-top: 2px; flex: none; padding: 0; }
.zf-concepto label.zf-imp-casilla span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zf-concepto label.zf-imp-casilla strong { font-size: 14px; line-height: 1.2; }
.zf-concepto label.zf-imp-casilla small { color: var(--muted); font-size: 12px; font-weight: 500; }
.zf-concepto label.zf-imp-casilla:has(input:checked) { border-color: #15803d; background: #f3fdf3; }
.zf-concepto label.zf-imp-casilla.ret:has(input:checked) { border-color: #c2410c; background: #fff7ed; }
.zf-quitar { height: 38px; background: #fff; border: 1px solid #d5d8de; }
.zf-acciones-emision { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0; }
.zf-prefacturas, .zf-sin-timbrar { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px 14px; }
.zf-acciones-emision button { min-width: 0; height: 40px; padding: 0 14px; gap: 6px; }
.zf-totales { display: grid; justify-content: end; gap: 4px; margin-top: 16px; min-width: 220px; margin-left: auto; }
.zf-totales div { display: flex; justify-content: space-between; gap: 24px; }
.zf-totales div:last-child, .zf-totales .zf-total-fila { font-size: 18px; }
.zf-agregar-concepto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 4px 0 10px;
    border: 1px dashed #7ec43a;
    border-radius: 10px;
    background: #f3fae9;
    color: #2f6b09;
    font-size: 15px;
    font-weight: 700;
}
.zf-agregar-concepto i { font-size: 18px; }
.zf-agregar-concepto:hover {
    background: #e7f6d4;
    border-color: var(--verde);
    color: #1f4d06;
}
.zf-importes-concepto { display: flex; gap: 18px; margin-left: auto; flex: none; font-size: 13px; color: #374151; }
.zf-importes-concepto strong { font-variant-numeric: tabular-nums; }
.zf-totales-vivo { margin-top: 8px; min-width: 280px; }
.zf-totales-vivo .zf-nota { grid-column: 1 / -1; margin: 4px 0 0; }
@media (max-width: 800px) {
    .zf-impuestos-concepto { grid-template-columns: 1fr; }
    .zf-concepto, .zf-concepto .zf-ancho { grid-template-columns: 1fr; grid-column: auto; }
    .zf-concepto .zf-linea { grid-column: auto; }
    .zf-concepto.cerrado { grid-template-columns: minmax(0, 1fr); }
    .zf-concepto-cabeza { flex-wrap: wrap; }
    .zf-importes-concepto { margin-left: 0; }
    .zf-quitar, .zf-filtro > button, .zf-masivo > button { width: 100%; }
    .zf-emision-pie-fila { flex-direction: column; align-items: stretch; }
    .zf-emision-pie .zf-totales { width: 100%; justify-content: space-between; }
    .zf-emision-pie .zf-acciones-emision { width: 100%; padding-left: 0; border-left: 0; justify-content: stretch; }
    .zf-acciones-emision button { flex: 1 1 0; }
}

.zf-lado-corte {
    position: absolute;
    left: -20%;
    bottom: -30px;
    width: 150%;
    height: 170px;
    background: linear-gradient(115deg, transparent 42%, var(--verde) 42% 58%, transparent 58%);
    pointer-events: none;
}

.zf-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zf-top {
    height: 58px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid var(--linea);
    position: sticky;
    top: 0;
    z-index: 10;
}
.zf-hamburguesa {
    width: 36px;
    height: 36px;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
}
.zf-hamburguesa span { display: block; height: 2px; background: #111; border-radius: 2px; }
.zf-buscar {
    flex: 1;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e3e5e8;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: #9aa0a6;
}
.zf-buscar i { font-size: 16px; }
.zf-buscar input { border: 0; outline: 0; flex: 1; background: transparent; color: var(--texto); }
.zf-buscar input::placeholder { color: #9aa0a6; }
.zf-top-der { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.zf-chip { display: flex; align-items: center; gap: 8px; }
.zf-chip strong, .zf-chip small { display: block; }
.zf-chip strong { font-size: 13px; line-height: 1.1; }
.zf-chip small { color: var(--muted); font-size: 11px; font-weight: 500; }
.zf-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--verde);
    color: #16300a;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
}
.zf-salir { color: var(--muted); font-weight: 600; font-size: 13px; }
.zf-salir:hover { color: #111; }

.zf-contenido { padding: 12px 12px 32px; }

.zf-bloque {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    margin-bottom: 14px;
    overflow: hidden;
}
.zf-barra {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 14px 0 10px;
    background: var(--negro);
    color: #fff;
    overflow: hidden;
}
.zf-barra::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 168px;
    background: linear-gradient(115deg, transparent 0 42%, var(--verde) 42% 58%, transparent 58%);
    pointer-events: none;
}
.zf-barra h2 { margin: 0; font-size: 14px; font-weight: 600; position: relative; z-index: 1; }
.zf-barra-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: var(--verde);
    color: #111;
    position: relative;
    z-index: 1;
    flex: none;
    font-family: icofont;
    font-size: 16px;
    line-height: 1;
}
.zf-barra-ico::before {
    font-family: icofont;
    font-style: normal;
    font-weight: normal;
    content: "\eb0e";
    font-size: 16px;
    line-height: 1;
}
.zf-ico-emisor::before { content: "\e970"; }
.zf-ico-receptor::before { content: "\ed09"; }
.zf-ico-conceptos::before { content: "\ef75"; }
.zf-ico-certificado::before { content: "\ead6"; }
.zf-ico-serie::before { content: "\ef76"; }
.zf-ico-clientes::before { content: "\ed09"; }
.zf-ico-productos::before { content: "\eec1"; }
.zf-ico-impuestos::before { content: "\ebdf"; }
.zf-ico-etiquetas::before { content: "\f004"; }
.zf-ico-empleados::before { content: "\e9c3"; }
.zf-ico-inicio::before { content: "\ef47"; }
.zf-ico-dinero::before { content: "\ef9d"; }
.zf-ico-complementos::before { content: "\efc7"; }
/* Configuración: Datos del emisor */
.zf-cfg { width: 100%; max-width: none; margin: 0; }
.zf-cfg .zf-cfg-tarjeta > h2:first-child,
.zf-cfg .zf-cfg-tarjeta > .zf-ventana-titulo h2,
.zf-cfg .zf-cfg-tarjeta > .zf-cfdi-titulo.zf-cfdi-primero { margin-top: 0; }
.zf-cfg .zf-cfg-tarjeta > h2 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #111827; }
.zf-cfg .zf-cfg-tarjeta > .zf-ventana-titulo { margin-bottom: 12px; }
.zf-cfg .zf-cfg-tarjeta > .zf-ventana-titulo h2 { font-size: 15px; }
.zf-migas { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: #9ca3af; font-size: 12px; }
.zf-migas a { color: #6b7280; }
.zf-migas a:hover { color: var(--verde-2); }
.zf-migas strong { color: #374151; font-weight: 600; }
.zf-cfg-cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.zf-cfg-cabeza h1 { margin: 0; font-size: 22px; font-weight: 700; color: #111827; }
.zf-cfg-cabeza p { margin: 2px 0 0; color: #6b7280; font-size: 13px; }
.zf-cfg-ico {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 10px;
    background: #eef8e3;
    color: #3f8a0a;
    font-size: 18px;
}
.zf-cfg-ico.grande { width: 46px; height: 46px; border-radius: 12px; font-size: 22px; }
.zf-cfg-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid #cfe3f7;
    border-radius: 10px;
    background: #eaf4fd;
    color: #1e3a5f;
    font-size: 13px;
}
.zf-cfg-info i { color: #2563eb; font-size: 16px; }
.zf-cfg-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 16px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow-x: auto;
}
.zf-cfg-tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 16px;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease;
}
.zf-cfg-tabs a i { font-size: 16px; color: #9ca3af; }
.zf-cfg-tabs a:hover { color: #111; }
.zf-cfg-tabs a:hover i { color: #6b7280; }
.zf-cfg-tabs a.activo { color: #2f6f05; border-bottom-color: var(--verde); }
.zf-cfg-tabs a.activo i { color: var(--verde-2); }
.zf-cfg-fiscales { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 0 28px; align-items: start; }
.zf-cfg-fiscales .zf-cfg-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zf-cfg .input .zf-cfg-input input[readonly] { background: #f9fafb; color: #6b7280; }
.zf-cfg-lado {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 12px;
    background: #f1f9e8;
    border: 1px solid #dcebcc;
}
.zf-cfg-lado p { display: flex; gap: 8px; margin: 0; color: #374151; font-size: 12px; line-height: 1.45; }
.zf-cfg-lado p i { flex: none; margin-top: 1px; color: var(--verde-2); font-size: 15px; }
.zf-cfg-ilustra { position: relative; display: flex; justify-content: center; padding: 6px 0 10px; }
.zf-cfg-ilustra-doc {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 96px;
    padding: 14px 12px 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.1);
}
.zf-cfg-ilustra-doc strong { color: #1e3a5f; font-size: 15px; letter-spacing: 0.04em; }
.zf-cfg-ilustra-doc i { display: block; height: 5px; border-radius: 3px; background: #dbe3ee; }
.zf-cfg-ilustra-doc i:nth-child(3) { width: 70%; }
.zf-cfg-ilustra-doc i:nth-child(4) { width: 85%; }
.zf-cfg-ilustra-doc small { align-self: flex-end; margin-top: 2px; color: #1e3a5f; font-size: 10px; font-weight: 700; }
.zf-cfg-ilustra-ok {
    position: absolute;
    right: 10px;
    bottom: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--verde);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 10px rgba(85, 184, 13, 0.35);
}
.zf-cfg-acciones.derecha { justify-content: flex-end; }
.zf-cfg-acciones.centro { justify-content: center; }
.zf-cfg-tarjeta {
    margin-bottom: 16px;
    padding: 18px 20px 20px;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    scroll-margin-top: 90px;
    overflow: hidden;
}
.zf-cfg-tarjeta-cabeza {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -18px -20px 18px;
    padding: 12px 20px;
    background: var(--negro);
    color: #fff;
    overflow: hidden;
}
.zf-cfg-tarjeta-cabeza::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 168px;
    background: linear-gradient(115deg, transparent 0 42%, var(--verde) 42% 58%, transparent 58%);
    pointer-events: none;
}
.zf-cfg-tarjeta-cabeza > * { position: relative; z-index: 1; }
.zf-cfg-tarjeta-cabeza .zf-cfg-ico { background: var(--verde); color: #111; border-radius: 6px; width: 32px; height: 32px; font-size: 16px; }
.zf-cfg-tarjeta-cabeza h2 { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.zf-cfg-tarjeta-cabeza p { margin: 2px 0 0; color: #b8bec8; font-size: 12px; }
.zf-cfg-tarjeta-der { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.zf-cfg-tarjeta-cabeza .zf-cfg-badge.ok { background: rgba(85, 184, 13, 0.2); color: #c6f0a3; }
.zf-cfg-tarjeta-cabeza .zf-cfg-badge.aviso { background: rgba(245, 158, 11, 0.22); color: #fde68a; }
.zf-cfg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.zf-cfg-badge.ok { background: #eef8e3; color: #2f6f05; }
.zf-cfg-badge.aviso { background: #fff4e0; color: #9a5b00; }
.zf-cfg-badge i { font-size: 14px; }
.zf-cfg-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.zf-cfg-campos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.zf-cfg-campos .input { margin-bottom: 16px; }
.zf-cfg-campos .input label { text-transform: none; letter-spacing: 0; font-size: 12px; color: #374151; }
.zf-cfg-campos .zf-obligatorio::after { margin-left: 2px; }
.zf-cfg-input { position: relative; display: flex; align-items: center; }
.zf-cfg-input > i {
    position: absolute;
    left: 12px;
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
}
.zf-cfg .input .zf-cfg-input input,
.zf-cfg .input .zf-cfg-input select {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 38px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
}
.zf-cfg .input .zf-cfg-input input:focus, .zf-cfg .input .zf-cfg-input select:focus { outline: 2px solid rgba(85, 184, 13, 0.35); border-color: var(--verde); }
.zf-cfg .input .zf-cfg-input.archivo input { padding: 0 8px 0 38px; display: flex; align-items: center; color: #6b7280; font-size: 12px; }
.zf-cfg-input.archivo input::file-selector-button {
    margin-right: 10px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid #d9dde3;
    border-radius: 6px;
    background: #f9fafb;
    color: #111;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.zf-cfg-acciones { display: flex; gap: 10px; }
.zf-cfg .zf-btn, .zf-cfg .zf-btn-sec, .zf-cfg .zf-btn-rojo, .zf-cfg button { height: 34px; gap: 6px; border-radius: 8px; font-size: 13px; }
.zf-cfg .zf-btn:disabled, .zf-cfg .zf-btn-sec:disabled, .zf-cfg .zf-btn-rojo:disabled { opacity: 0.5; cursor: not-allowed; }
.zf-btn-rojo { background: #fdecec; color: #b91c1c; border-color: #f7c9c9; }
.zf-btn-rojo:hover { background: #fbdcdc; color: #991b1b; }
.zf-cfg-tabla { margin-top: 4px; border-top: 1px solid #f1f3f6; padding-top: 6px; }
.zf-tabla-csd td code { font-size: 12px; letter-spacing: 0.04em; }
.zf-tabla-csd .zf-acciones { display: flex; justify-content: flex-end; gap: 6px; }
.zf-tabla-csd .zf-acciones .zf-btn-sec { height: 30px; padding: 0 10px; font-size: 12px; }
.zf-cfg .zf-tabla-csd .zf-acciones .zf-btn-ico { width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 15px; }
.zf-cfg .zf-tabla-csd .zf-acciones .zf-btn-ico i { margin: 0; }
.zf-estado.neutro { background: #f3f4f6; color: #4b5563; }
.zf-cfg-logo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.zf-cfg-soltar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 120px;
    padding: 18px;
    border: 1px dashed #c9cfd8;
    border-radius: 10px;
    background: #fafbfc;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.zf-cfg-soltar:hover, .zf-cfg-soltar.activo { border-color: var(--verde); background: #f3fae9; }
.zf-cfg-soltar i { font-size: 28px; color: #9ca3af; }
.zf-cfg-soltar strong { font-size: 13px; color: #374151; }
.zf-cfg-soltar span { font-size: 12px; color: #2563eb; }
.zf-cfg-soltar small { font-size: 11px; color: #9ca3af; }
.zf-cfg-logo-botones { display: flex; gap: 8px; margin: 12px 0 16px; }
.zf-cfg-logo-botones .zf-btn { cursor: pointer; }
.zf-cfg-sub { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: #374151; }
.zf-cfg-sub-sep { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e5e7eb; font-size: 13px; }
.zf-ser-pred-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.zf-ser-pred-cabeza .zf-cfg-sub { font-size: 14px; margin-bottom: 2px; }
.zf-ser-pred-cabeza .zf-nota { margin: 0; }
.zf-cfg-series .zf-cfdi-familias { margin-bottom: 4px; }

/* Usuarios adicionales */
.zf-cfg-campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zf-usr-bloque-titulo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zf-usr-bloque-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #15803d; font-size: 16px; flex: none; }
.zf-usr-bloque-titulo h3 { margin: 0; font-size: 15px; font-weight: 800; color: #111827; }
.zf-usr-bloque-titulo p { margin: 2px 0 0; font-size: 12px; color: #6b7280; }
.zf-cfg .zf-usr-campo label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #374151; }
.zf-cfg .zf-usr-campo label.zf-obligatorio::after { content: "*"; color: #dc2626; }
.zf-usr-claves { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 16px; align-items: start; margin-top: 4px; }
.zf-usr-ojo { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #6b7280; cursor: pointer; display: grid; place-items: center; }
.zf-usr-ojo:hover { background: #f3f4f6; color: #111; }
.zf-cfg .zf-usr-ojo { height: 28px; width: 28px; padding: 0; }
.zf-cfg .zf-cfg-input:has(.zf-usr-ojo) input { padding-right: 40px; }
.zf-cfg .zf-usr-campo .zf-cfg-input input[type="password"], .zf-cfg .zf-usr-campo .zf-cfg-input input[type="text"].con-ojo { padding-right: 40px; }
.zf-usr-tips { padding: 12px 14px; border-radius: 12px; background: #f0fdf4; border: 1px solid #bbf7d0; }
.zf-usr-tips h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #166534; }
.zf-usr-tips ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.zf-usr-tips li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #166534; }
.zf-usr-tips li i { color: #16a34a; }
.zf-usr-nota-clave { margin: 8px 0 0; }
.zf-cfg-usuarios .zf-cfg-sub { margin-top: 18px; font-size: 13px; }
.zf-usr-sub { margin: -4px 0 10px; }
.zf-cfdi-tiles.zf-usr-permisos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.zf-cfdi-tile.zf-usr-tile { align-items: center; min-height: 56px; padding: 8px 12px; }
.zf-usr-tile span { display: flex; flex-direction: column; min-width: 0; }
.zf-usr-tile strong { font-size: 13px; color: #111827; }
.zf-usr-tile small { font-size: 11px; color: #6b7280; line-height: 1.2; }
.zf-usr-acciones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f3f4f6; }
.zf-usr-filtros { gap: 8px; }
.zf-usr-filtros .zf-cat-buscar { flex: 0 1 240px; height: 34px; border-color: #374151; background: #1f2937; color: #9ca3af; }
.zf-cfg .zf-usr-filtros .zf-cat-buscar input { color: #fff; }
.zf-cfg .zf-usr-filtros select { height: 34px; padding: 0 28px 0 10px; border: 1px solid #374151; border-radius: 10px; background: #1f2937; color: #e5e7eb; font-size: 12px; }
.zf-usr-persona { display: flex; align-items: center; gap: 10px; }
.zf-usr-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.zf-usr-avatar.azul { background: #dbeafe; color: #1d4ed8; }
.zf-usr-avatar.verde { background: #dcfce7; color: #15803d; }
.zf-usr-avatar.morado { background: #ede9fe; color: #6d28d9; }
.zf-usr-avatar.naranja { background: #ffedd5; color: #c2410c; }
.zf-usr-avatar.teal { background: #ccfbf1; color: #0f766e; }
.zf-usr-avatar.rojo { background: #fee2e2; color: #b91c1c; }
.zf-usr-permisos-iconos { white-space: nowrap; }
.zf-usr-prefijo .zf-usr-rfc { position: absolute; left: 34px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: #6b7280; letter-spacing: 0.02em; pointer-events: none; white-space: nowrap; }
.zf-cfg .zf-usr-prefijo input { padding-left: calc(34px + var(--rfc-ancho, 118px)) !important; text-transform: lowercase; }
.zf-usr-acceso-nota { display: block; margin-top: 5px; font-size: 11px; color: #6b7280; }
.zf-usr-acceso-nota code, .zf-usr-acceso { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; color: #111827; background: #f3f4f6; padding: 1px 6px; border-radius: 5px; }
.zf-usr-acceso strong { color: var(--verde-2); }
.zf-usr-permiso { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 3px; border-radius: 6px; background: #f3fae9; color: var(--verde-2); font-size: 13px; }
.zf-usr-tabla tr[hidden] { display: none; }
.zf-usr-pie { margin-top: 10px; font-size: 12px; color: #6b7280; }

/* Cambiar contraseña */
.zf-clave { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 0; margin: -18px -20px -20px; }
.zf-clave-forma { padding: 20px 22px 22px; border-right: 1px solid #eef0f3; }
.zf-clave-forma .zf-usr-campo { margin-bottom: 14px; }
.zf-clave-forma .zf-usr-campo:last-of-type { margin-bottom: 0; }
.zf-clave-fuerza { margin: -6px 0 14px; }
.zf-clave-barras { display: flex; gap: 6px; margin-bottom: 6px; }
.zf-clave-barras span { flex: 1; height: 5px; border-radius: 999px; background: #e5e7eb; transition: background .15s; }
.zf-clave-barras span.debil { background: #dc2626; }
.zf-clave-barras span.media { background: #f59e0b; }
.zf-clave-barras span.fuerte { background: #16a34a; }
.zf-clave-fuerza p { margin: 0; font-size: 12px; color: #374151; }
.zf-clave-fuerza strong.debil { color: #dc2626; }
.zf-clave-fuerza strong.media { color: #b45309; }
.zf-clave-fuerza strong.fuerte { color: #15803d; }
.zf-clave-acciones { display: flex; gap: 10px; margin-top: 18px; }
.zf-cfg .zf-clave-acciones .zf-btn, .zf-cfg .zf-clave-acciones .zf-btn-sec { height: 38px; padding: 0 18px; }
.zf-clave-lado { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 22px; background: #fafbfc; }
.zf-clave-caja { padding: 16px 18px; border-radius: 12px; border: 1px solid; }
.zf-clave-caja.verde { background: #f0fdf4; border-color: #bbf7d0; }
.zf-clave-caja.azul { background: #eff6ff; border-color: #bfdbfe; }
.zf-clave-caja h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 800; color: #111827; }
.zf-clave-caja h4 span { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; }
.zf-clave-caja.verde h4 span { background: #15803d; color: #fff; }
.zf-clave-caja.azul h4 span { background: #1d4ed8; color: #fff; }
.zf-clave-caja p { margin: 0 0 10px 42px; font-size: 12px; color: #4b5563; }
.zf-clave-caja ul { margin: 0 0 0 42px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.zf-clave-caja li { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #374151; line-height: 1.35; }
.zf-clave-caja li i { flex: none; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; font-size: 9px; margin-top: 1px; }
.zf-clave-caja.verde li i { border: 1.5px solid #9ca3af; color: transparent; }
.zf-clave-caja.verde li.ok i { border-color: #16a34a; background: #16a34a; color: #fff; }
.zf-clave-caja.verde li.ok { color: #15803d; }
.zf-clave-caja.azul li i { color: #2563eb; font-size: 12px; }
@media (max-width: 1000px) {
    .zf-clave { grid-template-columns: 1fr; }
    .zf-clave-forma { border-right: 0; border-bottom: 1px solid #eef0f3; }
}
@media (max-width: 1200px) {
    .zf-cfdi-tiles.zf-usr-permisos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zf-usr-claves { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .zf-cfdi-tiles.zf-usr-permisos { grid-template-columns: 1fr 1fr; }
    .zf-cfg-campos.dos { grid-template-columns: 1fr; }
}
.zf-cfg-panel[hidden] { display: none; }

/* Impuestos: resumen, filtros y tarjetas */
.zf-cat-resumen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.zf-cat-dato { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.zf-cat-dato-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex: none; }
.zf-cat-dato-ico.azul, .zf-cat-tarjeta.azul .zf-cat-ico { background: #dbeafe; color: #2563eb; }
.zf-cat-dato-ico.verde, .zf-cat-tarjeta.verde .zf-cat-ico { background: #dcfce7; color: #16a34a; }
.zf-cat-dato-ico.naranja, .zf-cat-tarjeta.naranja .zf-cat-ico { background: #ffedd5; color: #ea580c; }
.zf-cat-dato-ico.morado, .zf-cat-tarjeta.morado .zf-cat-ico { background: #ede9fe; color: #7c3aed; }
.zf-cat-dato-ico.teal, .zf-cat-tarjeta.teal .zf-cat-ico { background: #ccfbf1; color: #0f766e; }
.zf-cat-dato-ico.rojo, .zf-cat-tarjeta.rojo .zf-cat-ico { background: #fee2e2; color: #dc2626; }
.zf-cat-dato > div { display: flex; flex-direction: column; line-height: 1.15; }
.zf-cat-dato small { font-size: 12px; color: #6b7280; }
.zf-cat-dato strong { font-size: 24px; color: #111827; }
.zf-cat-dato em { font-style: normal; font-size: 11px; color: #9ca3af; }
.zf-cat-filtros { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 12px; }
.zf-cat-buscar { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; color: #9ca3af; }
.zf-cfg .zf-cat-buscar input { flex: 1; border: 0; outline: 0; background: transparent; height: 100%; font-size: 13px; color: #111827; padding: 0; }
.zf-cfg .zf-cat-filtros select { height: 38px; padding: 0 32px 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; font-size: 13px; color: #374151; }
.zf-cat-vista { display: flex; gap: 6px; margin-left: auto; }
.zf-cfg .zf-cat-vista button { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #374151; font-weight: 600; cursor: pointer; }
.zf-cfg .zf-cat-vista button.activo { background: var(--verde-2); border-color: var(--verde-2); color: #fff; }
.zf-cat-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.zf-cat-tarjeta { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.zf-cat-tarjeta:hover { box-shadow: 0 8px 22px rgba(17, 24, 39, .08); transform: translateY(-1px); }
.zf-cat-tarjeta[hidden] { display: none; }
.zf-cat-tarjeta > header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 12px; }
.zf-cat-tarjeta.azul > header { background: linear-gradient(90deg, #eff6ff, #fff); }
.zf-cat-tarjeta.verde > header { background: linear-gradient(90deg, #f0fdf4, #fff); }
.zf-cat-tarjeta.naranja > header { background: linear-gradient(90deg, #fff7ed, #fff); }
.zf-cat-tarjeta.morado > header { background: linear-gradient(90deg, #f5f3ff, #fff); }
.zf-cat-tarjeta.teal > header { background: linear-gradient(90deg, #f0fdfa, #fff); }
.zf-cat-tarjeta.rojo > header { background: linear-gradient(90deg, #fef2f2, #fff); }
.zf-cat-pastilla.gris { background: #f3f4f6; color: #4b5563; }
.zf-cat-pastilla.ambar { background: #fef3c7; color: #b45309; }
.zf-cat-acciones.tres { grid-template-columns: 1fr 1fr 1fr; }
.zf-cfg .zf-cat-acciones .zf-btn-sec.zf-btn-estrella { color: #b45309; }
.zf-cat-ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; flex: none; }
.zf-cat-nombre { flex: 1; min-width: 0; }
.zf-cat-nombre h3 { margin: 4px 0 2px; font-size: 16px; font-weight: 800; color: #111827; }
.zf-cat-nombre p { margin: 0; font-size: 12px; color: #6b7280; }
.zf-cat-pastilla { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; white-space: nowrap; }
.zf-cat-detalle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; margin: 0; padding: 4px 16px 14px; }
.zf-cat-detalle dt { font-size: 11px; color: #9ca3af; margin-bottom: 2px; }
.zf-cat-detalle dd { margin: 0; display: flex; align-items: center; gap: 5px; font-size: 13px; color: #374151; font-weight: 600; }
.zf-cat-detalle dd i { color: #6b7280; font-size: 13px; }
.zf-cat-detalle .zf-cat-destacado { font-size: 15px; color: #111827; font-weight: 800; }
.zf-cat-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid #f3f4f6; margin-top: auto; }
.zf-cat-acciones .zf-inline { display: contents; }
.zf-cfg .zf-cat-acciones .zf-btn-sec, .zf-cfg .zf-cat-acciones .zf-btn-rojo { width: 100%; justify-content: center; }
.zf-cat-acciones-ico { display: flex; justify-content: flex-end; align-items: center; gap: 6px; grid-template-columns: none; }
.zf-cat-acciones-ico .zf-inline { display: inline-flex; }
.zf-cfg .zf-cat-acciones-ico .zf-btn-sec, .zf-cfg .zf-cat-acciones-ico .zf-btn-rojo { width: 32px; height: 32px; padding: 0; }
.zf-cfg .zf-cat-acciones-ico .zf-btn-ico { position: relative; font-size: 15px; }
.zf-cfg .zf-cat-acciones-ico .zf-btn-ico i { margin: 0; }
.zf-cfg .zf-cat-acciones-ico .zf-btn-ico::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--negro);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s, transform .12s;
    z-index: 5;
}
.zf-cfg .zf-cat-acciones-ico .zf-btn-ico:hover::after, .zf-cfg .zf-cat-acciones-ico .zf-btn-ico:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.zf-cat-vacio { grid-column: 1 / -1; }
.zf-cat-tarjetas[hidden], .zf-cat-tabla[hidden], .zf-cat-tabla tr[hidden] { display: none; }
.zf-cat-tabla { width: 100%; }
.zf-cat-tabla-acciones { display: flex; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.zf-cfg .zf-cat-tabla-acciones .zf-btn-ico { position: relative; width: 32px; height: 32px; padding: 0; justify-content: center; font-size: 15px; }
.zf-cfg .zf-cat-tabla-acciones .zf-btn-ico i { margin: 0; }
.zf-cfg .zf-cat-tabla-acciones .zf-btn-ico::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--negro);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s, transform .12s;
    z-index: 5;
}
.zf-cfg .zf-cat-tabla-acciones .zf-btn-ico:hover::after, .zf-cfg .zf-cat-tabla-acciones .zf-btn-ico:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.zf-cat-dialogo { width: min(680px, calc(100% - 32px)); padding-bottom: 18px; }
.zf-cat-dialogo .zf-campos { margin-top: 12px; }
.zf-cat-dialogo .input[hidden] { display: none; }
.zf-cat-dialogo-pie { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.zf-cfg .zf-cat-dialogo-pie button { height: 38px; padding: 0 18px; }
@media (max-width: 1200px) {
    .zf-cat-resumen { grid-template-columns: repeat(2, 1fr); }
    .zf-cat-tarjetas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .zf-cat-resumen, .zf-cat-tarjetas { grid-template-columns: 1fr; }
    .zf-cat-vista { margin-left: 0; width: 100%; }
}
.zf-cfg-rango { display: grid; grid-template-columns: 48px 1fr 56px 20px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: #4b5563; }
.zf-cfg-rango input[type="range"] { width: 100%; accent-color: var(--verde); }
.zf-cfg-rango output {
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #d9dde3;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.zf-cfg-rango em { font-style: normal; color: #9ca3af; font-size: 11px; }
.zf-cfg-restablecer { margin-top: 6px; }
.zf-cfg-logo-der { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.zf-cfg-vista {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #e9edf2;
    border-radius: 10px;
    background: #f3f4f6 repeating-conic-gradient(#e9ebee 0 25%, transparent 0 50%) 0 0 / 16px 16px;
    overflow: hidden;
}
.zf-cfg-vista img { max-width: 100%; max-height: 180px; object-fit: contain; }
.zf-cfg-medida { margin: 8px 0 0; font-size: 12px; color: #6b7280; }
.zf-cfg-medida strong { color: #111; }
.zf-cfg-tips {
    padding: 14px 16px;
    border: 1px solid #cfe3f7;
    border-radius: 10px;
    background: #eaf4fd;
    color: #1e3a5f;
    font-size: 12px;
}
.zf-cfg-tips strong { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; }
.zf-cfg-tips strong i { color: #2563eb; }
.zf-cfg-tips ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.zf-cfg-tips li { display: flex; gap: 6px; line-height: 1.4; }
.zf-cfg-tips li::before { content: "\eed8"; font-family: icofont; color: var(--verde-2); flex: none; }
/* Configuración CFDI */
.zf-cfdi-nota {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 320px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.18);
    color: #dbe7fb;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
}
.zf-cfdi-nota i { flex: none; margin-top: 1px; color: #93c5fd; font-size: 13px; }
.zf-cfdi-nota a { color: #fff; font-weight: 700; text-decoration: underline; }
.zf-cfdi-familias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.zf-cfdi-familia {
    --fam-color: #3f8a0a;
    --fam-fondo: #f1f9e8;
    --fam-ico: #d8efc2;
    padding: 14px 16px 16px;
    border-radius: 12px;
    background: var(--fam-fondo);
}
.zf-cfdi-familia.morado { --fam-color: #6d28d9; --fam-fondo: #f3effd; --fam-ico: #e2d8fb; }
.zf-cfdi-familia.teal { --fam-color: #0f766e; --fam-fondo: #e9f7f5; --fam-ico: #c9ebe6; }
.zf-cfdi-familia.naranja { --fam-color: #c2410c; --fam-fondo: #fff3ea; --fam-ico: #fcdcc7; }
.zf-cfdi-familia h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: var(--fam-color);
    font-size: 14px;
    font-weight: 700;
}
.zf-cfdi-familia h3 span {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--fam-ico);
    color: var(--fam-color);
    font-size: 16px;
}
.zf-cfdi-familia label {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}
.zf-cfdi-familia label > span { display: flex; align-items: center; color: #4b5563; font-size: 12px; font-weight: 500; }
.zf-cfdi-familia input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #111;
}
.zf-cfdi-familia input:focus { outline: 2px solid rgba(85, 184, 13, 0.35); border-color: var(--verde); }
.zf-cfg-campos.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zf-cfdi-campo label { display: flex; align-items: center; text-transform: none; letter-spacing: 0; font-size: 12px; color: #374151; margin-bottom: 6px; }
.zf-cfg .zf-cfdi-campo textarea {
    width: 100%;
    min-height: 110px;
    padding: 10px 12px;
    border: 1px solid #d9dde3;
    border-radius: 8px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    resize: vertical;
}
.zf-cfdi-switches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 20px; padding-top: 6px; border-top: 1px solid #f1f3f6; margin-top: 4px; }
.zf-cfdi-switches.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; padding-top: 0; margin-top: 0; }
.zf-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 28px;
    padding: 2px 0;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
}
.zf-switch .zf-switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.zf-switch-pista {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #d1d5db;
    transition: background-color 0.2s ease;
}
.zf-switch-pista::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
.zf-switch .zf-switch-input:checked + .zf-switch-pista { background: var(--verde); }
.zf-switch .zf-switch-input:checked + .zf-switch-pista::after { transform: translateX(16px); }
.zf-switch .zf-switch-input:focus-visible + .zf-switch-pista { outline: 2px solid rgba(85, 184, 13, 0.4); outline-offset: 2px; }
.zf-cfdi-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; }
.zf-cfdi-dos .zf-cfg-tarjeta { margin-bottom: 16px; }
.zf-cfdi-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.zf-cfdi-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 10px;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.zf-cfdi-tile:hover { border-color: #c9d2de; background: #f9fafb; }
.zf-cfdi-tile input { width: 15px; height: 15px; flex: none; accent-color: var(--verde); margin: 0; }
.zf-cfdi-tile i { flex: none; width: 18px; text-align: center; color: #6b7280; font-size: 15px; }
.zf-cfdi-tile:has(input:checked) { border-color: var(--verde); background: #f3fae9; }
.zf-cfdi-tile:has(input:checked) i { color: var(--verde-2); }
.zf-cfdi-acciones {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 -4px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(6px);
    border-top: 1px solid #e9edf2;
    border-radius: 12px 12px 0 0;
}
@media (max-width: 1200px) {
    .zf-cfdi-familias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-cfg-campos.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-cfdi-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .zf-cfdi-familias, .zf-cfg-campos.cuatro, .zf-cfdi-switches, .zf-cfdi-switches.dos, .zf-cfdi-dos { grid-template-columns: 1fr; }
    .zf-cfdi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-cfdi-nota { max-width: none; }
}
.zf-cfg-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.zf-cfg-pie .zf-volver { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; }
@media (max-width: 900px) {
    .zf-cfg-campos, .zf-cfg-campos.tres, .zf-cfg-logo, .zf-cfg-logo-der, .zf-cfg-fiscales { grid-template-columns: 1fr; }
    .zf-cfg-lado { order: -1; margin-bottom: 14px; }
    .zf-cfg-ilustra { display: none; }
    .zf-cfg-tarjeta-cabeza { flex-wrap: wrap; }
    .zf-cfg-tarjeta-der { margin-left: 0; width: 100%; justify-content: space-between; }
}
.zf-ico-buscar::before { content: "\ed11"; }
.zf-emision {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.zf-emision-fila {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: start;
    padding: 16px;
}
.zf-emision-campos { display: contents; }
.zf-emision-fila:not(:has(.zf-emision-campos)) {
    grid-template-columns: minmax(220px, 1.3fr) repeat(5, minmax(110px, 1fr));
}
.zf-emision-emisor { min-width: 0; }
.zf-emision-sub {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
}
.zf-emision-extra {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #eef0f3;
}
.zf-emision-pie {
    position: sticky;
    bottom: 0;
    z-index: 6;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.08);
}
.zf-emision-pie .zf-bloque-cuerpo { padding: 10px 16px; }
.zf-emision-pie-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 28px;
}
.zf-emision-pie .zf-totales {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
}
.zf-emision-pie .zf-totales div {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    padding: 0 16px;
    border-right: 1px solid #eef0f3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
}
.zf-emision-pie .zf-totales div:first-child { padding-left: 0; }
.zf-emision-pie .zf-totales div:last-of-type { border-right: 0; padding-right: 0; }
.zf-emision-pie .zf-totales strong {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    font-variant-numeric: tabular-nums;
    color: #111;
}
.zf-emision-pie .zf-totales .zf-total-fila strong { font-size: 22px; }
.zf-emision-pie .zf-totales .zf-nota {
    flex: 1 1 100%;
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    align-items: flex-start;
}
.zf-emision-pie .zf-acciones-emision {
    flex: 0 0 auto;
    padding-left: 20px;
    border-left: 1px solid #eef0f3;
}
.zf-emision-pie .zf-acciones-emision button[value="generar"] {
    min-width: 168px;
    background: var(--verde);
    color: #fff;
    border-color: var(--verde);
}
.zf-emision-etiqueta,
.zf-emision-fila .input label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}
.zf-obligatorio::after { content: "*"; color: #e11d48; order: 1; }
.zf-emision-fila .zf-info { order: 2; }
.zf-emision-identidad { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zf-emision-identidad img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: 4px;
    flex: none;
}
.zf-emision-identidad strong { display: block; font-size: 14px; line-height: 1.25; }
.zf-emision-identidad small { display: block; color: var(--muted); font-size: 12px; }
.zf-matriz {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #e9fbe9;
    color: #127a12;
    font-size: 12px;
    font-weight: 600;
}
.zf-emisor-cabeza {
    display: flex;
    align-items: center;
    gap: 18px;
}
.zf-emisor-cabeza img {
    width: 148px;
    height: 64px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 4px;
    padding: 6px;
    flex: none;
}
.zf-emisor-cabeza .zf-fichas { flex: 1; }
.zf-barra-acciones { margin-left: auto; position: relative; z-index: 1; display: flex; gap: 8px; align-items: center; }
.zf-barra-acciones .zf-btn-sec i { font-size: 14px; }
.zf-usar-direccion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #fff;
}
.zf-usar-direccion input { width: 16px; height: 16px; }

.zf-bloque-cuerpo { padding: 14px 16px 16px; }
.zf-nota { margin: 0 0 12px; color: var(--muted); font-size: 13px; }

.zf-fichas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 18px;
}
.zf-campo span {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.zf-campo strong { font-size: 14px; font-weight: 600; }

button, .zf-btn, .zf-btn-sec {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}
button, .zf-btn { background: var(--verde); color: #111; }
button:hover, .zf-btn:hover { background: var(--verde-2); color: #111; }
.zf-btn-sec { background: #fff; color: #111; border-color: #d5d8de; }
.zf-btn-sec:hover { background: #f7f7f7; }

.input { margin: 0 0 14px; }
.input label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4b5563;
}
.zf-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    vertical-align: -2px;
    cursor: pointer;
}
.zf-info:hover,
.zf-info[aria-expanded="true"] { background: transparent; color: #111; }
.zf-info-flotante {
    position: fixed;
    z-index: 80;
    width: max-content;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid #d9dde3;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(17, 17, 17, 0.14);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.4;
    color: #111;
    pointer-events: none;
}
.zf-info-flotante[hidden] { display: none; }
.input input, .input select, .input textarea {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9dde3;
    border-radius: 4px;
    background: #fff;
}
.input textarea { height: auto; min-height: 120px; padding: 10px; }
.zf-condiciones input { width: 100%; }
.zf-relacion-check { margin: 10px 0 0; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#relacion-campos[hidden] { display: none; }
.zf-relacionados {
    margin-top: 6px;
    padding: 12px 14px 14px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fafafa;
}
.zf-relacionados-cabeza {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 10px;
}
.zf-relacionados-cabeza strong { font-size: 13px; }
.zf-relacionados-cabeza p { margin: 0; color: var(--muted); font-size: 12px; }
.zf-relacion-fila {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(240px, 2fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 8px;
}
.zf-relacion-fila label {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 4px;
    row-gap: 4px;
    align-items: center;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}
.zf-relacion-fila label > span { grid-column: 1; grid-row: 1; }
.zf-relacion-fila label > .zf-info { grid-column: 2; grid-row: 1; margin: 0; }
.zf-relacion-fila select,
.zf-relacion-fila input {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #d9dde3;
    border-radius: 4px;
    background: #fff;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: #111;
}
.zf-relacion-fila .zf-quitar { margin: 0; white-space: nowrap; }
.zf-relacionados > .zf-notas-agregar { margin-top: 4px; }
.input input:focus, .input select:focus, .input textarea:focus { outline: 2px solid rgba(85, 184, 13, 0.4); border-color: #111; }
.zf-cfdi-titulo {
    margin: 28px 0 14px;
    padding-top: 18px;
    border-top: 1px solid #e6e8ec;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--verde);
}
.zf-cfdi-primero { margin-top: 0; padding-top: 0; border-top: 0; }
.zf-cfdi-opciones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 16px;
}
@media (max-width: 900px) {
    .zf-cfdi-opciones { grid-template-columns: 1fr; }
}
.input.checkbox label {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 500;
}
.input.checkbox input { width: 16px; height: 16px; }
.error-message { color: #9b2c2c; font-size: 12px; margin-top: 4px; }

.zf-tabla { width: 100%; border-collapse: collapse; }
.zf-tabla th {
    text-align: left;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
    background: var(--verde);
    padding: 10px 8px;
    border-bottom: 0;
}
.zf-tabla td { padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.zf-tabla tr:last-child td { border-bottom: 0; }
.zf-estado {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #e9fbe9;
    color: #127a12;
}
.zf-estado.no { background: #fde8e8; color: #9b2c2c; }

.message { margin: 0 0 12px; padding: 10px 12px; border-radius: 4px; background: #fff; border: 1px solid var(--linea); }
.message.error { background: #fde8e8; border-color: #f0c2c2; color: #9b2c2c; }
.message.success { background: #e9fbe9; border-color: #b7e8b7; color: #127a12; }
.zf-volver { display: inline-block; margin-top: 8px; color: var(--muted); font-weight: 600; }
.zf-formulario,
.zf-formulario-ancho { width: 100%; max-width: none; }
.zf-campos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 16px;
    align-items: start;
}
.zf-campos-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.zf-span-2 { grid-column: span 2; }
.zf-span-3 { grid-column: span 3; }
.zf-campos > .input.textarea,
.zf-campos > .input.checkbox,
.zf-span-4 { grid-column: 1 / -1; }
.zf-pie { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.zf-pie .zf-volver { margin-top: 0; }
.zf-tabla-productos { min-width: 860px; }
.zf-tabla-productos td { vertical-align: middle; }
.zf-imp {
    display: inline-flex;
    align-items: center;
    margin: 2px 4px 2px 0;
    padding: 3px 8px;
    border-radius: 999px;
    background: #e9fbe9;
    color: #127a12;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.zf-imp.ret { background: #fff4e8; color: #9a4d00; }
.zf-imp.no { background: #f3f4f6; color: #6b7280; font-weight: 600; }
.zf-imp-panel {
    margin: 4px 0 16px;
    padding: 14px 16px;
    border: 1px solid var(--linea);
    border-radius: 12px;
    background: #fafafa;
}
.zf-imp-panel h3 { margin: 0 0 4px; font-size: 15px; }
.zf-imp-panel .zf-nota { margin: 0; }
.zf-imp-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.zf-imp-opcion {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 10px;
    cursor: pointer;
}
.zf-imp-opcion:has(input:checked) { border-color: #111; background: #f3fdf3; }
.zf-imp-opcion input { margin-top: 3px; }
.zf-imp-opcion strong { display: block; font-size: 14px; }
.zf-imp-opcion small { color: var(--muted); font-size: 12px; }
.zf-solapa-titulo { margin: 14px 0 8px; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; }
/* Empleados: percepciones, deducciones y otros pagos precargados */
.zf-tabla-empleados { min-width: 900px; }
.zf-tabla-empleados td { vertical-align: middle; }
.zf-nomina-panel { margin: 4px 0 16px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: 12px; background: #fafafa; }
.zf-nomina-panel h3 { margin: 0 0 4px; font-size: 15px; }
.zf-nomina-panel .zf-nota { margin: 0 0 10px; }
.zf-nomina-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.zf-nomina-cabeza .zf-btn-sec { height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.zf-nomina-renglon {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 36px;
    gap: 8px 10px;
    align-items: end;
    margin-bottom: 8px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 10px;
}
.zf-nomina-renglon.tres { grid-template-columns: minmax(0, 2.2fr) minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.9fr) 36px; }
.zf-nomina-renglon label { display: flex; flex-flow: row wrap; align-items: center; column-gap: 4px; row-gap: 4px; font-size: 12px; font-weight: 600; min-width: 0; }
.zf-nomina-renglon label > input,
.zf-nomina-renglon label > select { flex: 1 1 100%; }
.zf-nomina-renglon select, .zf-nomina-renglon input { width: 100%; min-width: 0; height: 36px; margin: 0; }
.zf-nomina-renglon .zf-quitar {
    height: 36px; width: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #f0c2c2; border-radius: 8px; background: #fdecec; color: #b91c1c; cursor: pointer; font-size: 16px;
}
.zf-nomina-renglon .zf-quitar:hover { background: #fbdcdc; }
.zf-nomina-vacio { margin: 0; padding: 10px 12px; border: 1px dashed var(--linea); border-radius: 10px; color: var(--muted); font-size: 13px; }
.zf-nomina-totales { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 4px 0 16px; font-size: 13px; color: var(--muted); }
.zf-nomina-totales strong { color: #111; font-variant-numeric: tabular-nums; }
.zf-nomina-chip { display: block; font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.zf-nomina-chip strong { display: block; color: #111; }
.zf-nomina-extra {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--linea);
    border-radius: 10px;
    background: #fff;
}
@media (max-width: 900px) {
    .zf-nomina-renglon, .zf-nomina-renglon.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-nomina-renglon label:first-child { grid-column: 1 / -1; }
}
.zf-dialog {
    width: min(560px, calc(100% - 32px));
    padding: 18px 20px 8px;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(16, 24, 40, 0.16);
}
.zf-dialog-solapas {
    display: flex;
    gap: 4px;
    margin: 4px 0 14px;
    border-bottom: 1px solid #e6e8ec;
}
.zf-dialog-solapas button {
    height: 36px;
    padding: 0 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #6b7280;
}
.zf-dialog-solapas button:hover { background: transparent; color: #111; }
.zf-dialog-solapas button.activa {
    background: transparent;
    color: #111;
    border-bottom-color: var(--verde);
}
.zf-dialog::backdrop { background: rgba(17, 17, 17, 0.35); }
.zf-dialog h2 { margin: 0 36px 8px 0; font-size: 18px; }
.zf-dialog-cerrar { position: absolute; top: 10px; right: 10px; margin: 0; }
.zf-dialog-cerrar button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 22px;
    line-height: 1;
}
.zf-dialog-cerrar button:hover { background: #f3f4f6; color: #111; }
.zf-dialog-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.zf-iva-cuatro {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.zf-imp-panel.apagado .zf-imp-opcion { opacity: 0.45; pointer-events: none; }
@media (max-width: 900px) {
    .zf-iva-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .zf-iva-cuatro { grid-template-columns: 1fr; }
}
.zf-impuestos .input.select {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-bottom: 14px;
}
.zf-impuestos .input.select > label { width: 100%; margin-bottom: 0; }
.zf-sugerir { position: relative; }
.zf-formulario .zf-sugerencias { top: 100%; margin-top: 4px; }
.zf-formulario .zf-sugerir.abierta { z-index: 8; }
.zf-sugerencias {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 68px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    overflow: auto;
    max-height: 240px;
}
.zf-sugerencias button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: #111;
    font-weight: 600;
    text-align: left;
}
.zf-sugerencias button small { color: var(--muted); font-weight: 500; }
.zf-sugerencias button.activa,
.zf-sugerencias button:hover { background: #f3fdf3; }
.zf-sugerencia-vacia { margin: 0; padding: 10px 12px; color: var(--muted); font-size: 13px; }
.zf-filtro { display: flex; gap: 8px; align-items: end; margin-bottom: 14px; flex-wrap: wrap; }
.zf-filtro .input { margin: 0; flex: 1; min-width: 140px; max-width: 240px; }
.zf-filtro select, .zf-filtro input[type="date"] { height: 38px; border: 1px solid #d9dde3; border-radius: 4px; background: #fff; padding: 0 8px; }
.zf-resumen { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.zf-resumen strong { font-size: 18px; }
.zf-masivo { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }
.zf-masivo .input { margin: 0; min-width: 240px; }
.zf-consulta { overflow-x: auto; }
.zf-tabla-ancha { min-width: 1280px; }
.zf-filtro-consulta { align-items: end; }
.zf-filtro-consulta .input { max-width: 180px; }
.zf-filtro-consulta .zf-buscar-q { flex: 1 1 240px; max-width: none; }
.zf-filtro-consulta label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.zf-filtro-consulta input[type="text"],
.zf-filtro-consulta select,
.zf-filtro-consulta input[type="date"],
.zf-filtro-consulta button { height: 38px; }
.zf-consulta-barra {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    padding: 8px 14px;
    border-radius: 8px;
    background: #111;
    color: #fff;
    flex-wrap: wrap;
}
.zf-consulta-barra h2 { margin: 0; font-size: 16px; }
.zf-consulta-limite {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d1d5db;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
}
.zf-consulta-limite select {
    height: 32px;
    border: 0;
    border-radius: 6px;
    background: #fff;
    color: #111;
    padding: 0 8px;
}
.zf-consulta-barra .zf-paginas { flex: 1; justify-content: center; margin: 0; }
.zf-consulta-barra .zf-paginas a { background: transparent; color: #fff; border-color: #3a3a3a; }
.zf-consulta-barra .zf-paginas .active a { background: var(--verde); border-color: var(--verde); color: #111; }
.zf-consulta-barra .zf-paginas .disabled a { background: transparent; color: #6b7280; }
.zf-consulta-total { margin-left: auto; font-size: 18px; }
.zf-consulta-cuenta { color: #d1d5db; font-size: 13px; white-space: nowrap; }
.zf-tabla-consulta { min-width: 980px; }
.zf-tabla-consulta td { vertical-align: middle; }
.zf-doble { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.zf-prod { display: flex; align-items: center; gap: 10px; }
.zf-prod > i { color: var(--verde); font-size: 20px; }
.zf-barra-acciones .zf-btn,
.zf-barra-acciones .zf-btn-sec,
.zf-dialog-acciones .zf-btn-sec,
.zf-dialog-solapas button,
.zf-masivo button,
.zf-filtro button { gap: 6px; }
.zf-doble small { color: var(--muted); font-size: 12px; }
.zf-tipo {
    display: inline-block;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f4ff;
    color: #1d4f91;
    font-size: 12px;
    font-weight: 700;
}
.zf-comps { display: flex; flex-wrap: wrap; gap: 4px; }
.zf-comp {
    display: inline-block;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    background: #e8f6ec;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
}
.zf-comp.vacio {
    background: #f3f4f6;
    color: #9ca3af;
    font-weight: 600;
}
.zf-dinero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zf-pendiente { color: var(--naranja); font-weight: 700; }
.zf-pendiente.cero { color: #127a12; }
.zf-estado i { margin-right: 2px; }
.zf-fila-ico { display: flex; justify-content: flex-end; gap: 4px; }
.zf-fila-ico form { display: inline-flex; margin: 0; }
.zf-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    color: #2563eb;
}
.zf-ico:hover { background: #f3f7ff; color: #1d4ed8; }
.zf-ico.no { color: #dc2626; }
.zf-ico.no:hover { background: #fef2f2; color: #b91c1c; }
.zf-mini { height: auto; padding: 0; background: transparent; color: #111; font-weight: 700; }
.zf-mini:hover { background: transparent; color: #127a12; }
.zf-cancelar { display: flex; align-items: end; gap: 12px; margin-top: 16px; }
.zf-cancelar .input { margin: 0; min-width: 280px; }
.zf-acciones { white-space: nowrap; text-align: right; }
.zf-puntos {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 8px;
    background: #fff;
    color: #111;
    border: 1px solid var(--linea);
    font-size: 20px;
    line-height: 1;
}
.zf-puntos:hover, .zf-puntos[aria-expanded="true"] { background: #f3fdf3; }
.zf-menu {
    position: fixed;
    z-index: 30;
    min-width: 190px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--linea);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
}
.zf-menu a, .zf-menu button {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #111;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}
.zf-menu a:hover, .zf-menu button:hover { background: #f3fdf3; }
.zf-menu .zf-peligro {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    border-radius: 6px;
    text-align: left;
    font-weight: 600;
}
.zf-inline { display: inline; }
.zf-peligro {
    background: transparent;
    color: #9b2c2c;
    height: auto;
    padding: 0;
    font-weight: 700;
}
.zf-peligro:hover { background: transparent; color: #7f1d1d; }
.zf-paginas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    font-weight: 700;
}
.zf-paginas > span { color: var(--muted); font-size: 13px; font-weight: 600; }
.zf-paginas ul {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.zf-paginas li { list-style: none; margin: 0; }
.zf-paginas a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: #fff;
    color: #111;
    text-decoration: none;
}
.zf-paginas .active a {
    background: var(--verde);
    border-color: var(--verde);
    color: #111;
}
.zf-paginas .disabled a { color: #9aa0a6; background: #f4f5f6; pointer-events: none; }
textarea { width: 100%; min-height: 90px; padding: 8px 10px; border: 1px solid #d9dde3; border-radius: 4px; font: inherit; }
.checkbox { margin: 0 0 8px; }
.checkbox label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.checkbox input { width: 16px; height: 16px; }

.zf-puerta { background: #0b1016; }
.zf-puerta-escena {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px) minmax(0, 0.7fr);
    align-items: center;
    gap: 28px;
    padding: 32px 48px;
}
.zf-puerta-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
    pointer-events: none;
}
.zf-puerta-velo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(8, 12, 18, 0.88) 0%, rgba(8, 12, 18, 0.62) 38%, rgba(8, 12, 18, 0.28) 68%, rgba(8, 12, 18, 0.45) 100%),
        linear-gradient(180deg, rgba(8, 12, 18, 0.18) 0%, transparent 28%, transparent 72%, rgba(8, 12, 18, 0.28) 100%);
}
.zf-raya { position: absolute; background: var(--verde); pointer-events: none; z-index: 1; }
.zf-raya-a { width: 280px; height: 38px; left: -72px; top: 36px; transform: rotate(32deg); opacity: 0.95; }
.zf-raya-b {
    width: 340px;
    height: 340px;
    right: -150px;
    bottom: -180px;
    background: transparent;
    border: 26px solid var(--verde);
    border-radius: 50%;
    opacity: 0.9;
}
.zf-logo-clara { color: #fff; }
.zf-hero {
    position: relative;
    z-index: 2;
    overflow: visible;
    color: #fff;
    background: transparent;
    padding: 0 12px 0 8px;
    display: flex;
    flex-direction: column;
    max-width: min(460px, 100%);
    min-width: 0;
    justify-self: start;
}
.zf-hero .zf-logo { padding: 0; }
.zf-hero .zf-logo img { height: 56px; mix-blend-mode: screen; }
.zf-hero h1 {
    margin: 28px 0 14px;
    font-size: 48px;
    line-height: 1.08;
    letter-spacing: -0.04em;
    color: #fff;
    max-width: 12ch;
}
.zf-hero h1 em { font-style: normal; color: var(--verde); }
.zf-hero-texto { max-width: 42ch; color: #d1d5db; font-size: 16px; margin: 0; }

.zf-acceso-panel {
    position: relative;
    z-index: 2;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
}
.zf-login {
    width: 100%;
    max-width: 440px;
    position: relative;
    background: #fff;
    border: 0;
    border-radius: 22px;
    padding: 28px 32px 22px;
    box-shadow: 0 28px 70px rgba(8, 12, 18, 0.38);
}
.zf-login .zf-logo { justify-content: center; padding: 0 0 12px; }
.zf-login .zf-logo img { height: 52px; }
.zf-login h1 { margin: 0; text-align: center; font-size: 28px; letter-spacing: -0.03em; }
.zf-login h1 + p { margin: 4px 0 18px; text-align: center; color: #6b7280; }
.zf-login .message { border-radius: 10px; }
.zf-etiqueta { display: block; margin: 0 0 6px; font-weight: 600; color: #374151; }
.zf-field { position: relative; margin-bottom: 12px; }
.zf-field > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #9aa3af; }
.zf-field input {
    width: 100%;
    height: 44px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0 42px;
    background: #f9fafb;
}
.zf-field input::placeholder { color: #9ca3af; letter-spacing: normal; }
.zf-field input:focus { outline: 2px solid rgba(85, 184, 13, 0.4); border-color: #111; background: #fff; }
.zf-ojo {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #9aa3af;
}
.zf-ojo i { font-size: 18px; color: #9aa3af; }
.zf-ojo:hover { background: transparent; color: #111; }
.zf-opciones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 0 14px; font-size: 13px; }
.zf-check { display: flex; align-items: center; gap: 8px; color: #374151; cursor: pointer; white-space: nowrap; }
.zf-check input { width: 16px; height: 16px; accent-color: var(--verde); }
.zf-olvido {
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--verde);
    font-weight: 600;
}
.zf-olvido:hover { background: transparent; color: var(--verde-2); }
.zf-olvido-nota { margin: -8px 0 14px; color: #6b7280; font-size: 12px; }
.zf-forma button[type="submit"] {
    width: 100%;
    height: 46px;
    border-radius: 10px;
    background: var(--verde);
    color: #fff;
    font-size: 15px;
    gap: 8px;
}
.zf-forma button[type="submit"]:hover { background: var(--verde-2); color: #fff; }
.zf-field input.zf-rfc { text-transform: uppercase; letter-spacing: 0.06em; }
.zf-separa {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 10px;
    color: #9aa3af;
    font-size: 13px;
}
.zf-separa::before, .zf-separa::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }
.zf-forma button.zf-demo {
    background: #fff;
    color: #111;
    border: 1px solid #d5d8de;
    gap: 8px;
}
.zf-forma button.zf-demo:hover { background: #f7f7f7; color: #111; }
.zf-forma button.zf-demo i { font-size: 18px; color: #374151; }
.zf-demo-nota { margin: 10px 0 0; text-align: center; color: #6b7280; font-size: 12px; }

@media (max-width: 1100px) {
    .zf-emision-fila,
    .zf-emision-fila:not(:has(.zf-emision-campos)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-emision-emisor { grid-column: 1 / -1; }
    .zf-relacionados-cabeza { align-items: flex-start; }
    .zf-campos,
    .zf-campos-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-span-3,
    .zf-campos > .input.textarea,
    .zf-campos > .input.checkbox,
    .zf-span-4 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .zf-emisor-cabeza { flex-direction: column; align-items: stretch; }
    .zf-emisor-cabeza img { width: 132px; height: 56px; }
    .zf-barra { flex-wrap: wrap; height: auto; padding: 8px 10px; }
    .zf-barra::after { width: 64px; }
    .zf-barra-acciones { margin-left: 0; }
    .zf-barra-alta { flex-wrap: wrap; min-height: 64px; padding: 8px 12px; gap: 10px; }
    .zf-barra-alta .zf-logo img { height: 40px; }
    .zf-cabecera .zf-buscar { display: none; }
    .zf-cabecera .zf-chip small { display: none; }
    .zf-cabecera .zf-chip strong { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .zf-barra-menu { flex-wrap: wrap; align-items: flex-start; height: auto; padding: 6px 8px 8px; }
    .zf-barra-menu details > div { position: static; width: 100%; min-width: 0; margin-top: 4px; box-shadow: none; }
    .zf-fichas, .zf-puerta-escena, .zf-campos, .zf-campos-5 { grid-template-columns: 1fr; }
    .zf-span-2, .zf-span-3, .zf-span-4 { grid-column: auto; }
    .zf-filtro .input, .zf-masivo .input { min-width: 0; max-width: none; flex: 1 1 100%; }
    .zf-paginas { flex-direction: column; align-items: flex-start; }
    .zf-consulta-barra .zf-paginas { flex-direction: row; align-items: center; width: 100%; justify-content: flex-start; }
    .zf-paginas ul { flex-wrap: wrap; }
    .zf-puerta-escena { grid-template-columns: 1fr; padding: 28px 18px 36px; gap: 28px; align-items: stretch; }
    .zf-raya-a, .zf-raya-b { display: none; }
    .zf-hero { max-width: none; }
    .zf-hero h1 { font-size: 34px; margin-top: 18px; }
    .zf-puerta-foto { object-position: 36% center; }
    .zf-login { max-width: none; padding: 28px 22px 22px; }
    .zf-cuenta-texto strong { max-width: 8.5rem; }
    .zf-buscar { display: none; }
}

.zf-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f4f5f7;
}
.zf-marco {
    position: sticky;
    top: 0;
    z-index: 40;
    background: #fff;
}
.zf-side {
    width: 100%;
    flex: none;
    display: flex;
    flex-direction: row;
    min-height: 0;
    height: auto;
    overflow: visible;
    background: #fff;
    color: #243040;
    border-bottom: 1px solid #e6eadf;
}
.zf-side-cabeza {
    flex: none;
    padding: 20px 16px 14px;
    border-bottom: 1px solid #e6eadf;
    background: #fff;
}
.zf-side-logo {
    display: block;
    flex: none;
    padding: 0;
}
.zf-side-logo img { height: 34px; width: auto; display: block; }
.zf-folios-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    padding: 8px 10px;
    background: #f7fbf2;
    border: 1px solid #e6eadf;
    border-radius: 10px;
}
.zf-folios-logo i {
    color: var(--verde);
    font-size: 18px;
}
.zf-folios-logo span {
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.zf-folios-logo strong {
    margin-left: auto;
    color: #243040;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.zf-folios-top {
    --folios-color: #22c55e;
    --folios-fondo: #f0fbf4;
    --folios-borde: #d6f0dd;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 50px;
    padding: 0 16px 0 10px;
    border-radius: 14px;
    background: var(--folios-fondo);
    border: 1px solid var(--folios-borde);
    white-space: nowrap;
    color: inherit;
    cursor: default;
}
.zf-folios-top.bajo { --folios-color: #f59e0b; --folios-fondo: #fff8eb; --folios-borde: #f6e3b8; }
.zf-folios-top.agotado { --folios-color: #ef4444; --folios-fondo: #fef2f2; --folios-borde: #f8d0d0; }
.zf-folios-top-icono {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--folios-color);
    color: #fff;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}
.zf-folios-top.bajo .zf-folios-top-icono { box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25); }
.zf-folios-top.agotado .zf-folios-top-icono { box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25); }
.zf-folios-top-icono i { font-size: 15px; line-height: 1; font-weight: 700; }
.zf-folios-top-texto { display: flex; flex-direction: column; justify-content: center; gap: 2px; line-height: 1.1; }
.zf-folios-top-texto small {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}
.zf-folios-top-texto strong {
    color: #111827;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.zf-folios-top.bajo .zf-folios-top-texto strong { color: #b45309; }
.zf-folios-top.agotado .zf-folios-top-texto strong { color: #b91c1c; }
.zf-side-nav, .zf-side-pie { display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0 10px; }
.zf-side-nav { flex: 1; justify-content: center; overflow: visible; padding-top: 0; padding-bottom: 0; min-height: 48px; background: #96ef5f40; }
.zf-side-pie { flex: none; padding-bottom: 16px; margin-top: 0; border-top: 1px solid #e6eadf; padding-top: 10px; }
.zf-side-nav > a,
.zf-side-pie > a,
.zf-side-luego,
.zf-side-sub summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    color: #243040;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.zf-side-luego { color: #9ca3af; cursor: default; }
.zf-side-nav i, .zf-side-pie i, .zf-side-luego i, .zf-side-sub summary i {
    width: 18px;
    font-size: 18px;
    text-align: center;
}
.zf-side-nav > a:hover,
.zf-side-pie > a:hover,
.zf-side-sub summary:hover { background: #f3f8ea; }
.zf-side-nav > a.activo,
.zf-side-sub.activo > summary { background: var(--verde); color: #111; }
.zf-side-sub summary::-webkit-details-marker { display: none; }
.zf-side-sub { position: relative; }
.zf-side-sub summary::after {
    content: "";
    margin-left: 4px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}
.zf-side-sub[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.zf-side-sub > div {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 45;
    min-width: 230px;
    max-height: min(70vh, 520px);
    overflow: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
}
.zf-side-sub[open] > div { display: flex; flex-direction: column; gap: 2px; }
.zf-side-sub > div a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #374151;
    font-weight: 600;
}
.zf-side-sub > div a i { width: 16px; font-size: 16px; text-align: center; }
.zf-side-sub > div a:hover { background: #f3f8ea; }
.zf-side-sub > div a.activo { background: var(--verde); color: #111; }
.zf-side-sub .zf-side-luego { gap: 8px; min-height: 32px; padding: 7px 10px; color: #6b7280; }
.zf-side-sub .zf-side-luego i { width: 16px; font-size: 16px; color: #9ca3af; }
.zf-side-sub > div a.zf-side-hijo { padding-left: 22px; }
.zf-side-sub > div a i { color: #6b7280; }
.zf-side-sub > div a:hover i,
.zf-side-sub > div a.activo i { color: inherit; }
.zf-side-sep { margin: 6px 10px; border-top: 1px dashed #d1d5db; }
.zf-side-sub2 summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    color: #374151;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}
.zf-side-sub2 summary::-webkit-details-marker { display: none; }
.zf-side-sub2 summary i { width: 16px; font-size: 16px; text-align: center; }
.zf-side-sub2 summary::after {
    content: "";
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}
.zf-side-sub2[open] summary::after { transform: rotate(45deg); }
.zf-side-sub2 summary:hover { background: #f3f8ea; }
.zf-side-sub2 summary.activo { color: var(--verde-2); }
.zf-side-sub2 > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 4px 18px;
    padding-left: 8px;
    border-left: 2px solid #e6eadf;
}
.zf-side-sub > div .zf-side-sub2 > div a { padding: 6px 10px; font-size: 13px; font-weight: 500; }.zf-side-grupo {
    margin: 8px 10px 2px;
    color: #9ca3af;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.zf-ventana {
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    overflow: hidden;
}
.zf-ventana-cuerpo { padding: 18px 20px 22px; }
.zf-series-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 32px;
}
.zf-serie-bloque h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--verde);
}
.zf-serie-bloque h3 i { font-size: 16px; }
.zf-serie-bloque label {
    display: block;
    margin-top: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9aa1ab;
}
.zf-serie-bloque input {
    display: block;
    width: 100%;
    margin-top: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e6e8ec;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    color: #111;
}
.zf-serie-pie {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 36px;
}
.zf-serie-pie .zf-btn-sec,
.zf-serie-pie .zf-btn-guardar {
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
}
.zf-btn-guardar {
    background: var(--verde);
    color: #111;
    border-color: var(--verde);
}
.zf-btn-guardar:hover { background: var(--verde-2); color: #111; }
@media (max-width: 1100px) {
    .zf-series-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
    .zf-series-grid { grid-template-columns: 1fr; }
}
.zf-ventana-cuerpo h2 { margin: 0 0 12px; font-size: 18px; }
.zf-logo-empresa { max-width: 460px; margin: 0 0 28px; }
.zf-logo-empresa h3 { margin: 0 0 4px; font-size: 16px; text-align: center; }
.zf-logo-empresa > p, .zf-logo-empresa .zf-logo-medida { margin: 0 0 12px; text-align: center; color: var(--muted); }
.zf-logo-caja {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d5d8de;
    border-radius: 8px;
    background: #fafafa;
    padding: 16px;
}
.zf-logo-caja img { object-fit: contain; max-width: 100%; }
.zf-logo-vacio { font-size: 42px; color: #c5c9d1; }
.zf-logo-acciones { display: flex; justify-content: center; gap: 10px; margin: 14px 0; flex-wrap: wrap; }
.zf-logo-acciones .zf-btn, .zf-logo-acciones .zf-btn-sec { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.zf-rango { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-weight: 600; }
.zf-rango input[type="range"] { flex: 1; accent-color: var(--verde); }
.zf-rango span { width: 36px; text-align: right; }
.zf-restablecer { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.zf-ventana-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.zf-ventana-titulo h2 { margin: 0; }
.zf-espacio-nota { margin: 0; color: #6b7280; }
.zf-catalogo-cabeza { margin-bottom: 16px; }
.zf-catalogo-cabeza h1 { margin: 0 0 4px; font-size: 26px; }
.zf-catalogo-cabeza p { margin: 0; color: var(--muted); }
.zf-catalogo-grupo { margin-bottom: 18px; }
.zf-catalogo-grupo h2 { margin: 0 0 10px; font-size: 14px; color: #374151; }
.zf-espacios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.zf-espacio {
    scroll-margin-top: 84px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 148px;
    padding: 16px;
    border: 1px solid #eceff3;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.zf-espacio i { font-size: 22px; color: var(--verde); }
.zf-espacio strong { margin-top: 10px; font-size: 15px; }
.zf-espacio span {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--verde);
}
.zf-espacio p { margin: 8px 0 0; color: #6b7280; font-size: 13px; }
.zf-espacio-vacio { background: #f8faf8; border-style: dashed; }
.zf-espacio-vacio i, .zf-espacio-vacio span { color: #9ca3af; }
.zf-espacio:hover { border-color: #bbf7d0; }
.zf-espacio-vacio:hover { border-color: #d1d5db; }
.zf-side-fondo { display: none; }
.zf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zf-top {
    position: static;
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    min-height: 64px;
    padding: 0 16px 0 18px;
    background: #fff;
    border-bottom: 1px solid #eceff3;
}
.zf-side-btn {
    display: none;
    width: 38px;
    height: 38px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.zf-app .zf-buscar {
    flex: 1;
    max-width: 480px;
    height: 40px;
    margin: 0;
    background: #f3f4f6;
    border-color: transparent;
}
.zf-app .zf-top-der { margin-left: auto; flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.zf-soporte {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 50px;
    min-width: 64px;
    padding: 0 10px;
    border-radius: 12px;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    cursor: default;
    transition: background-color 0.2s ease;
}
.zf-soporte i { font-size: 22px; line-height: 1; color: #15803d; }
.zf-soporte-texto { line-height: 1; white-space: nowrap; }
.zf-soporte:hover { background: #f3f4f6; }
.zf-cuenta { position: relative; min-width: 0; }
.zf-cuenta summary {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 12px 0 4px;
    border-radius: 999px;
    list-style: none;
    cursor: pointer;
}
.zf-cuenta summary::-webkit-details-marker { display: none; }
.zf-cuenta summary::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-left: 2px;
    border-right: 1.5px solid #6b7280;
    border-bottom: 1.5px solid #6b7280;
    transform: rotate(45deg) translateY(-2px);
}
.zf-cuenta[open] summary { background: #f3f4f6; }
.zf-cuenta summary:hover { background: #f3f4f6; }
.zf-cuenta-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 196px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
}
.zf-cuenta-menu a,
.zf-cuenta-menu span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}
.zf-cuenta-menu span { color: #9ca3af; }
.zf-cuenta-menu a:hover { background: #f3f4f6; }
.zf-cuenta-menu i { width: 16px; text-align: center; font-size: 16px; }
.zf-cuenta-texto { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.zf-cuenta-texto strong {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}
.zf-cuenta-texto small {
    display: flex;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}
.zf-rfc { color: #243040; font-weight: 700; letter-spacing: 0.03em; }
.zf-app .zf-avatar { width: 32px; height: 32px; background: var(--verde); color: #111; font-size: 12px; }
.zf-avatar-logo {
    background: #fff;
    overflow: hidden;
    border: 1px solid #e6eadf;
    padding: 1px;
}
.zf-app .zf-avatar-logo { width: 40px; height: 40px; }
.zf-avatar-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.zf-app .zf-contenido { padding: 18px 22px 40px; }

.zf-hero-dash {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    min-height: 148px;
    margin-bottom: 16px;
    padding: 22px 26px;
    border-radius: 16px;
    background-color: #dfe8d4;
    background-size: cover;
    background-position: center 42%;
    color: #fff;
}
.zf-hero-dash h1 { margin: 0 0 4px; font-size: 28px; font-weight: 700; }
.zf-hero-dash p { margin: 0; color: #f3f4f6; }
.zf-hero-acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.zf-emitir {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--verde);
    color: #111;
    font-weight: 700;
}
.zf-emitir:hover { background: var(--verde-2); color: #111; }
.zf-actualizado {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 12px;
}
.zf-hero-dash time { text-align: right; }
.zf-hero-dash time span { display: block; font-size: 13px; color: #e5e7eb; }
.zf-hero-dash time strong { font-size: 16px; }
.zf-hero-plano {
    min-height: 0;
    color: #243040;
    background-image: none;
    background-color: #f4fbe8;
    border: 1px solid #e4efd4;
}
.zf-hero-plano p { color: #4b5563; }
.zf-kpis, .zf-dash-2, .zf-dash-3 {
    display: grid;
    gap: 14px;
    margin-bottom: 14px;
}
.zf-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zf-dash-2 { grid-template-columns: 1.35fr 0.9fr; }
.zf-dash-3 { grid-template-columns: 1.1fr 1fr 0.85fr; }
.zf-kpi, .zf-tarjeta {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.zf-kpi { display: flex; gap: 12px; padding: 16px; }
.zf-kpi p { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.zf-kpi strong { display: block; margin: 2px 0; font-size: 24px; line-height: 1.1; }
.zf-kpi small { color: #6b7280; font-size: 12px; }
.zf-kpi-ico {
    width: 42px;
    height: 42px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e9fbe9;
    color: var(--verde);
    font-size: 20px;
}
.zf-delta { font-weight: 700; margin-right: 4px; }
.zf-delta.sube { color: var(--verde); }
.zf-delta.baja { color: #dc2626; }
.zf-tarjeta { padding: 14px 16px 16px; min-width: 0; }
.zf-tarjeta > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.zf-tarjeta h2 { margin: 0; font-size: 15px; font-weight: 700; }
.zf-periodo { color: var(--verde); font-size: 18px; }
.zf-ver { color: var(--verde); font-size: 13px; font-weight: 700; }
.zf-ver:hover { text-decoration: underline; }
.zf-grafica { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: stretch; }
.zf-grafica-y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 168px;
    color: #9ca3af;
    font-size: 11px;
    text-align: right;
}
.zf-grafica svg { width: 100%; height: 168px; display: block; }
.zf-grafica line { stroke: #eef0f3; stroke-width: 1; }
.zf-grafica polygon { fill: rgba(34, 197, 94, 0.18); }
.zf-grafica polyline { fill: none; stroke: #55B80D; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.zf-grafica-x {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
    color: #9ca3af;
    font-size: 11px;
}
.zf-formas { display: flex; align-items: center; gap: 18px; min-width: 0; }
.zf-tarjeta:has(.zf-formas) { container-type: inline-size; container-name: formas; }
@container formas (max-width: 480px) {
    .zf-formas { flex-direction: column; align-items: stretch; }
    .zf-formas .zf-dona { margin: 0 auto; }
}
.zf-dona {
    width: 168px;
    height: 168px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
}
.zf-dona > div {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: #fff;
    display: grid;
    place-items: center;
    align-content: center;
    text-align: center;
}
.zf-dona strong { font-size: 13px; }
.zf-dona span { color: var(--muted); font-size: 12px; }
.zf-formas ul { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; }
.zf-formas li {
    display: grid;
    grid-template-columns: 10px 1fr auto auto;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    font-size: 13px;
}
.zf-formas li { min-width: 0; }
.zf-formas li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-formas li i { width: 8px; height: 8px; border-radius: 50%; }
.zf-formas li b { color: #374151; }
.zf-formas li em { font-style: normal; color: #6b7280; min-width: 88px; text-align: right; }
.zf-tabla-scroll { overflow-x: auto; }
.zf-mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.zf-mini th {
    text-align: left;
    color: #6b7280;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 8px 8px 0;
}
.zf-mini td { padding: 8px 8px 8px 0; border-top: 1px solid #f1f3f5; vertical-align: middle; }
.zf-mini a { color: #111; font-weight: 700; }
.zf-mini a:hover { color: #15803d; }
.zf-vacio { color: var(--muted); text-align: center; padding: 16px 0; }
.zf-dias {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.zf-dias.verde { background: #e9fbe9; color: #15803d; }
.zf-dias.ambar { background: #ffedd5; color: #c2410c; }
.zf-dias.rojo { background: #fde8e8; color: #b91c1c; }
.zf-fichas-dash { grid-template-columns: 1fr 1fr; }
.zf-accesos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.zf-accesos a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 78px;
    border: 1px solid #eceff3;
    border-radius: 12px;
    background: #fafafa;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.zf-accesos a i { font-size: 22px; color: var(--verde); }
.zf-accesos a:hover { background: #f3fdf3; border-color: #bbf7d0; }
.zf-permisos ul { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.zf-permisos li { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.zf-mes-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -4px 0 12px;
}
.zf-mes-barra h2 { margin: 0; font-size: 16px; }
.zf-mes-nav { display: flex; align-items: center; gap: 8px; }
.zf-mes-nav strong { min-width: 140px; text-align: center; font-size: 14px; }
.zf-mes-nav a, .zf-mes-nav span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    font-size: 20px;
    line-height: 1;
}
.zf-mes-nav a:hover { border-color: #bbf7d0; color: #15803d; }
.zf-mes-nav span { color: #d1d5db; }
.zf-tipos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.zf-tipos .zf-tipo {
    --tipo-color: #55B80D;
    --tipo-fondo: #eef8e3;
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    padding: 18px 20px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #111827;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.zf-tipo::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--tipo-color);
}
.zf-tipo:hover { box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08); transform: translateY(-1px); }
.zf-tipo-e { --tipo-color: #f43f5e; --tipo-fondo: #fdecef; }
.zf-tipo-n { --tipo-color: #0ea5e9; --tipo-fondo: #e6f5fd; }
.zf-tipo-p { --tipo-color: #8b5cf6; --tipo-fondo: #f0eafe; }
.zf-tipo-t { --tipo-color: #f97316; --tipo-fondo: #fff0e4; }
.zf-tipo header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.zf-tipo-ico {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--tipo-fondo);
    color: var(--tipo-color);
    font-size: 17px;
}
.zf-tipo header .zf-delta {
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    background: #eef8e3;
}
.zf-tipo header .zf-delta.baja { background: #fdecef; }
.zf-tipo p {
    margin: 0;
    color: var(--tipo-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.zf-tipo strong {
    display: block;
    margin: 6px 0 14px;
    color: #111827;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.zf-tipo.sin-datos strong { color: #9ca3af; }
.zf-tipo footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #f1f3f6;
}
.zf-tipo footer small {
    color: #374151;
    font-size: 12px;
    font-weight: 600;
}
.zf-tipo.sin-datos footer small { color: #9ca3af; }
.zf-tipo footer time { color: #9ca3af; font-size: 11px; font-weight: 500; }
.zf-clases > div {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}
.zf-clases article {
    padding: 10px 12px;
    border-radius: 10px;
    background: #f8faf8;
}
.zf-clases span { display: block; color: #6b7280; font-size: 12px; font-weight: 700; }
.zf-clases strong { display: block; margin-top: 2px; }
.zf-clases small { color: #6b7280; }
.zf-leyenda { display: flex; flex-wrap: wrap; gap: 10px 14px; list-style: none; margin: 0; padding: 0; }
.zf-leyenda li { display: flex; align-items: center; gap: 6px; color: #4b5563; font-size: 12px; font-weight: 600; }
.zf-leyenda i { width: 8px; height: 8px; border-radius: 50%; }
.zf-barras svg { width: 100%; height: 180px; display: block; }
.zf-barras line { stroke: #eef0f3; stroke-width: 1; }
.zf-barras-x { display: grid; grid-template-columns: repeat(12, 1fr); color: #9ca3af; font-size: 11px; text-align: center; }
.zf-punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: #55B80D;
    vertical-align: middle;
}
.zf-punto-E { background: #fb7185; }
.zf-punto-N { background: #38bdf8; }
.zf-punto-P { background: #a78bfa; }
.zf-punto-T { background: #fb923c; }
.zf-clase { display: block; margin-left: 14px; color: #9ca3af; font-size: 11px; }
.zf-anio { margin-bottom: 14px; }

@media (max-width: 1180px) {
    .zf-kpis, .zf-dash-3 { grid-template-columns: 1fr 1fr; }
    .zf-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zf-clases > div { grid-template-columns: 1fr 1fr 1fr; }
    .zf-dash-2 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .zf-side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        flex-direction: column;
        overflow: auto;
        border-bottom: 0;
        border-right: 1px solid #e6eadf;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        z-index: 40;
    }
    .zf-side-nav { flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: auto; padding-top: 12px; min-height: 0; }
    .zf-side-sub summary::after { margin-left: auto; }
    .zf-side-sub > div {
        position: static;
        min-width: 0;
        max-height: none;
        padding: 2px 0 6px 28px;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .zf-app.zf-side-abierta .zf-side { transform: none; }
    .zf-app.zf-side-abierta .zf-side-fondo {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 35;
    }
    .zf-side-btn { display: inline-grid; place-items: center; }
    .zf-folios-top { height: 40px; gap: 8px; padding: 0 10px 0 6px; border-radius: 999px; }
    .zf-folios-top-icono { width: 26px; height: 26px; }
    .zf-folios-top-icono i { font-size: 12px; }
    .zf-folios-top-texto small { display: none; }
    .zf-folios-top-texto strong { font-size: 14px; }
    .zf-soporte { height: 40px; min-width: 40px; padding: 0; border-radius: 50%; }
    .zf-soporte i { font-size: 18px; }
    .zf-soporte-texto { display: none; }
    .zf-top { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 12px; }
    .zf-side-btn { order: 1; }
    .zf-top .zf-side-logo { order: 2; }
    .zf-app .zf-top-der { order: 3; }
    .zf-app .zf-buscar { order: 4; display: flex; flex: 1 1 100%; max-width: none; }
    .zf-app .zf-contenido { padding: 12px 12px 28px; }
    .zf-hero-dash {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 16px;
    }
    .zf-hero-dash h1 { font-size: 22px; }
    .zf-hero-dash p { font-size: 13px; }
    .zf-hero-acciones {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .zf-hero-dash .zf-emitir {
        flex-direction: row;
        align-items: center;
        align-self: flex-start;
        width: auto;
        margin: 0;
        white-space: nowrap;
    }
    .zf-hero-dash time { text-align: left; }
    .zf-mes-barra { flex-wrap: wrap; align-items: flex-start; }
    .zf-mes-nav strong { min-width: 0; }
    .zf-kpis, .zf-clases > div { grid-template-columns: 1fr 1fr; }
    .zf-dash-3 { grid-template-columns: 1fr; }
    .zf-kpi { padding: 12px; gap: 8px; }
    .zf-kpi > div { min-width: 0; }
    .zf-kpi strong { font-size: 18px; }
    .zf-kpi small { display: flex; flex-wrap: wrap; gap: 2px 6px; }
    .zf-campo { min-width: 0; }
    .zf-campo span, .zf-campo strong { overflow-wrap: anywhere; }
    .zf-main, .zf-contenido { min-width: 0; max-width: 100%; }
    .zf-tipos {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        grid-template-columns: none;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
    }
    .zf-tipo { flex: 0 0 168px; scroll-snap-align: start; }
    .zf-tipo strong { font-size: 18px; }
    .zf-dash-2 { grid-template-columns: 1fr; }
    .zf-formas { flex-direction: column; align-items: stretch; }
    .zf-dona { width: 148px; height: 148px; margin: 0 auto 8px; }
    .zf-dona > div { width: 96px; height: 96px; }
    .zf-grafica, .zf-barras, .zf-tabla-scroll, .zf-dash-2, .zf-dash-3 { min-width: 0; max-width: 100%; }
    .zf-grafica { grid-template-columns: 48px 1fr; }
    .zf-grafica-y, .zf-grafica svg { height: 140px; }
    .zf-grafica-y { font-size: 10px; }
    .zf-leyenda { gap: 6px 10px; }
    .zf-barras { overflow-x: auto; }
    .zf-barras svg, .zf-barras-x { min-width: 640px; }
    .zf-accesos a { min-height: 68px; }
    .zf-tarjeta > header { flex-wrap: wrap; }
    .zf-cuenta-texto strong, .zf-cuenta-texto small { max-width: 8.5rem; }
}

/* ---- Consulta de comprobantes: acciones y modales ---- */
.zf-ico.rojo { color: #dc2626; }
.zf-ico.rojo:hover { background: #fef2f2; color: #b91c1c; }
.zf-ico.gris { color: #4b5563; }
.zf-ico.gris:hover { background: #f3f4f6; color: #111827; }
.zf-ico.verde { color: #15803d; }
.zf-ico.verde:hover { background: #f0fdf4; color: #166534; }
.zf-ico.azul { color: #0284c7; }
.zf-ico.azul:hover { background: #f0f9ff; color: #0369a1; }
.zf-fila-ico .zf-ico { position: relative; }
.zf-tabla-consulta .zf-fila-ico { gap: 3px; }
.zf-tabla-consulta .zf-fila-ico .zf-ico { width: 29px; height: 29px; font-size: 14px; }
.zf-fila-ico .zf-ico::after {
    content: attr(title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(4px);
    padding: 4px 8px;
    border-radius: 6px;
    background: #111;
    color: #fff;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 5;
}
.zf-fila-ico .zf-ico:hover::after, .zf-fila-ico .zf-ico:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.zf-consulta-rfc { color: inherit; text-decoration: none; border-bottom: 1px dashed #9ca3af; }
.zf-consulta-rfc:hover { color: #1d4ed8; border-bottom-color: #1d4ed8; }
.zf-con-dialogo { width: min(520px, calc(100% - 32px)); padding-bottom: 18px; }
.zf-aviso-ico {
    display: flex;
    width: 44px;
    height: 44px;
    margin: 2px 0 12px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 22px;
}
.zf-aviso-ico.peligro { background: #fdecec; color: #b91c1c; }
.zf-aviso-ico.aviso { background: #fff7ed; color: #c2410c; }
.zf-aviso-ico.info { background: #e7f6d4; color: #2f6b09; }
.zf-comp-xslt-dialogo {
    width: min(560px, calc(100% - 32px));
    max-height: min(90vh, 800px);
}
.zf-comp-xslt-dialogo:not([open]) { display: none !important; }
.zf-comp-xslt-dialogo[open] {
    display: flex;
    flex-direction: column;
}
.zf-comp-xslt-dialogo .zf-comp-xslt-cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 0 8px;
    overflow: auto;
    color: #374151;
    font-size: 14px;
    line-height: 1.45;
}
.zf-comp-xslt-dialogo .zf-cat-dialogo-pie {
    flex: none;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid #e9edf2;
}
.zf-comp-xslt-dialogo .zf-comp-xslt-cuerpo p { margin: 0 0 10px; }
.zf-comp-xslt-dialogo .zf-comp-xslt-cuerpo h3 {
    margin: 14px 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b7280;
}
.zf-comp-xslt-dialogo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.zf-comp-xslt-dialogo li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 8px 10px;
    border: 1px solid #e9edf2;
    border-radius: 8px;
    background: #fafafa;
    font-size: 13px;
    line-height: 1.4;
}
.zf-comp-xslt-dialogo li i { flex: none; margin-top: 1px; }
.zf-comp-xslt-dialogo li.pide i { color: #15803d; }
.zf-comp-xslt-dialogo li.opcional i { color: #9ca3af; }
.zf-aviso-ico.ok { background: #e9fbe9; color: #127a12; }
.zf-aviso-ico.error { background: #fde8e8; color: #9b2c2c; }
.zf-con-campos { display: grid; gap: 12px; margin-top: 12px; }
.zf-con-campos .input { margin: 0; }
.zf-con-campos .zf-nota { margin: 0; }
.zf-con-dialogo-ref { margin: 0 0 6px; color: #4b5563; font-size: 14px; }
.zf-con-dialogo-ref strong { color: #111; }
.zf-con-sustituye { position: relative; }
.zf-con-sustituye[hidden] { display: none; }
.zf-con-sugerencias {
    list-style: none;
    margin: -6px 0 8px;
    padding: 4px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(16, 24, 40, 0.12);
    max-height: 240px;
    overflow: auto;
}
.zf-con-sugerencias[hidden] { display: none; }
.zf-con-sugerencias button {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #111;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.zf-con-sugerencias button:hover { background: #f3f7ff; }
.zf-con-sugerencias button span { color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf-con-sugerencias button em { font-style: normal; color: #6b7280; font-size: 12px; white-space: nowrap; }
.zf-btn-peligro { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; }
.zf-btn-peligro:hover { background: #b91c1c !important; border-color: #b91c1c !important; }
.zf-con-rel-grupo { margin-bottom: 10px; }
.zf-con-rel-grupo ul { margin: 4px 0 0; padding-left: 18px; }
.zf-con-rel-grupo code { font-size: 13px; }
.zf-cancelar .input[hidden] { display: none; }

/* ---- Constancia de retenciones ---- */
.zf-ret-montos { margin-top: 8px; }
.zf-ret-impuestos { display: grid; gap: 10px; }
.zf-ret-imp {
    grid-template-columns: minmax(140px, 1.1fr) minmax(110px, 0.9fr) minmax(110px, 0.9fr) minmax(180px, 1.6fr) 40px;
    align-items: end;
}
.zf-ret-imp .zf-span-2 { grid-column: auto; }
.zf-ret-imp-quitar { display: flex; align-items: end; padding-bottom: 8px; }
.zf-retencion .zf-nacional[hidden],
.zf-retencion .zf-extranjero[hidden],
.zf-retencion #caja-descripcion[hidden] { display: none; }
@media (max-width: 900px) {
    .zf-ret-imp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zf-ret-imp-quitar { grid-column: 1 / -1; }
}
.zf-timbrar-dialogo { width: min(480px, calc(100% - 32px)); }
.zf-timbrar-dialogo [hidden] { display: none !important; }
.zf-etapas {
    list-style: none;
    margin: 14px 0 4px;
    padding: 0;
    display: grid;
    gap: 6px;
}
.zf-etapas li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 38px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #6b7280;
    background: #f8fafc;
    font-size: 14px;
}
.zf-etapas li.activa { color: #111; background: #eef6ff; }
.zf-etapas li.lista { color: #127a12; background: #e9fbe9; }
.zf-etapas li.error { color: #9b2c2c; background: #fde8e8; }
.zf-etapa-marca {
    width: 16px;
    height: 16px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    box-sizing: border-box;
}
.zf-etapas li.activa .zf-etapa-marca {
    border-color: #bfdbfe;
    border-top-color: #2563eb;
    animation: zf-giro 0.7s linear infinite;
}
.zf-etapas li.lista .zf-etapa-marca {
    border-color: #127a12;
    background: #127a12;
    box-shadow: inset 0 0 0 3px #e9fbe9;
}
.zf-etapas li.error .zf-etapa-marca {
    border-color: #9b2c2c;
    background: #9b2c2c;
    box-shadow: inset 0 0 0 3px #fde8e8;
}
@keyframes zf-giro { to { transform: rotate(360deg); } }
.zf-timbrar-msg { margin: 10px 0 0; font-size: 14px; color: #4b5563; line-height: 1.45; }
.zf-timbrar-uuid { display: inline-block; margin-top: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #111; word-break: break-all; }
.zf-timbrar-archivos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 18px 0 4px;
}
.zf-timbrar-archivos > p {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #374151;
}
.zf-timbrar-archivo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 44px;
    color: #111;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}
.zf-timbrar-archivo i { font-size: 32px; line-height: 1; }
.zf-timbrar-archivo#zf-timbrar-pdf i { color: #dc2626; }
.zf-timbrar-archivo#zf-timbrar-xml i { color: #4b5563; }
.zf-timbrar-archivo:hover { color: #111; }
.zf-timbrar-archivo#zf-timbrar-pdf:hover i { color: #b91c1c; }
.zf-timbrar-archivo#zf-timbrar-xml:hover i { color: #111827; }
.zf-timbrar-dialogo .zf-cat-dialogo-pie { flex-wrap: wrap; }
.zf-timbrar-dialogo .zf-cat-dialogo-pie.ok { justify-content: flex-end; }
.zf-emision input.zf-campo-mal,
.zf-emision select.zf-campo-mal,
.zf-emision textarea.zf-campo-mal {
    border-color: #dc2626 !important;
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
}
.zf-emision label:has(.zf-campo-mal),
.zf-emision .input:has(.zf-campo-mal) > label {
    color: #b91c1c;
}

.zf-lote-errores ul { margin: 6px 0 0; padding-left: 18px; max-height: 320px; overflow: auto; }
.zf-lote-errores li { margin: 2px 0; }
.zf-lote-avance { margin: 8px 0 16px; }
.zf-lote-avance p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.zf-lote-barra { display: flex; height: 10px; border-radius: 999px; background: #f3f4f6; overflow: hidden; }
.zf-lote-barra span { display: block; height: 100%; transition: width .3s ease; }
.zf-lote-barra .ok { background: var(--verde); }
.zf-lote-barra .no { background: #e05252; }
.zf-tabla-lote td[data-mensaje] { max-width: 420px; font-size: 13px; color: #374151; }
.zf-tabla-lote .zf-fila-ico { display: inline-flex; gap: 4px; margin-left: 6px; }

/* Pago desde la consulta de CFDI */
.zf-ico.ambar { color: #b45309; }
.zf-ico.ambar:hover { background: #fffbeb; color: #92400e; }
.zf-con-pago { width: min(640px, calc(100% - 32px)); }
.zf-con-modo { display: flex; gap: 18px; padding: 4px 0; }
.zf-con-modo label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.zf-con-modo label:has(input:disabled) { color: #9ca3af; cursor: not-allowed; }
.zf-con-pago-resumen { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 10px; padding: 10px 12px; border-radius: 8px; background: #f8fafc; font-size: 13px; color: #4b5563; }
.zf-con-pago-resumen strong { color: #111827; margin-left: 4px; }
.zf-con-pago-historial { margin: 0 0 12px; font-size: 13px; }
.zf-con-pago-historial th, .zf-con-pago-historial td { padding: 6px 8px; }
/* Emisión de complemento de pago */
.zf-ico-pago::before { content: "\ef9d"; }
.zf-ico-documentos::before { content: "\efb6"; }
.zf-pago-emision .zf-barra-acciones .zf-btn-sec { display: inline-flex; align-items: center; gap: 6px; }
.zf-pago-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.zf-pago-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border: 1px solid #d9eec4;
    border-radius: 999px;
    background: #f3f8ea;
    color: #3f6212;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.zf-pago-buscar { position: relative; }
.zf-pago-buscar .zf-con-sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; }
.zf-pago-buscar .zf-con-sugerencias button { grid-template-columns: 130px 1fr; }
.zf-pago-cliente { margin-top: 4px; padding: 14px 16px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fafcf7; }
.zf-pago-rec-forma { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #d1d5db; }
.zf-pago-rec-botones { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.zf-pago-cliente-aviso { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; border-radius: 8px; background: #fffbeb; color: #92400e; }
.zf-pago-vacio {
    padding: 26px 16px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
}
.zf-pago-vacio i { display: block; margin-bottom: 8px; font-size: 28px; color: #9ca3af; }
.zf-pago-bancos { margin-top: 8px; }
.zf-pago-cuentas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.zf-pago-cuenta { padding: 12px 14px; border: 1px solid #e6e8ec; border-radius: 12px; background: #fcfcfd; }
.zf-pago-cuenta h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #374151;
}
.zf-pago-cuenta h3 small { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.zf-pago-cuenta .zf-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zf-pago-docs td { vertical-align: middle; }
.zf-pago-docs tr.elegida td { background: #f6fbef; }
.zf-pago-docs .pago-doc-importe { width: 130px; text-align: right; font-variant-numeric: tabular-nums; }
.zf-pago-docs .pago-doc-insoluto { font-weight: 600; font-variant-numeric: tabular-nums; }
.zf-pago-docs .pago-doc-insoluto.cero { color: #15803d; }
.zf-pago-docs input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--verde); }
.zf-pago-externos { margin-top: 16px; padding-top: 14px; border-top: 1px dashed #d1d5db; }
.zf-pago-externo {
    display: grid;
    grid-template-columns: minmax(240px, 2.2fr) repeat(7, minmax(90px, 1fr));
    gap: 0 12px;
    align-items: end;
    margin-bottom: 8px;
}
@media (max-width: 1100px) {
    .zf-pago-externo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zf-pago-externo .zf-pago-uuid { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
    .zf-pago-cuentas { grid-template-columns: 1fr; }
    .zf-pago-chips { justify-content: flex-start; }
    .zf-pago-externo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zf-pago-detalle { width: min(820px, calc(100% - 32px)); }
.zf-pago-detalle-cuerpo { max-height: min(65vh, 560px); overflow: auto; }
.zf-pago-detalle-cuerpo .zf-fichas { margin-bottom: 14px; }
.zf-pago-detalle-cuerpo .zf-tabla { font-size: 13px; }
.zf-pago-detalle-cuerpo .zf-tabla small { display: block; color: var(--muted); font-size: 11px; }

/* Prefacturas por tipo de comprobante */
.zf-pref-tipos { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.zf-pref-tipos a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #e5e7eb; border-radius: 999px; color: #374151; text-decoration: none; font-size: 13px; font-weight: 600; background: #fff; }
.zf-pref-tipos a span { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; text-align: center; }
.zf-pref-tipos a:hover { border-color: #93c5fd; color: #1d4ed8; }
.zf-pref-tipos a.activo { border-color: #1d4ed8; background: #eff6ff; color: #1d4ed8; }
.zf-pref-tipos a.activo span { background: #1d4ed8; color: #fff; }