/* ============================================================================
   MOD-303 · GARANTÍAS — pestaña del proyecto
   ----------------------------------------------------------------------------
   Lenguaje de la casa: bordes de 1 px, jerarquía por tamaño y color, espacio
   generoso, sin sombras ni degradados. Lo que se ve aquí es un ENSAYO de lo que
   va a salir impreso, así que los términos se leen como texto corrido y las
   partidas como una tabla delgada.
   ========================================================================== */

.gar-wrap { padding: 4px 2px 24px; }

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.gar-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.gar-h1 { font-size: 15px; font-weight: 700; letter-spacing: .3px; }
.gar-sub { font-size: 12px; color: var(--dim); text-transform: none; margin-top: 2px; }

/* ── Avisos ───────────────────────────────────────────────────────────────
   Ámbar es «esto sale raro en el papel»; gris es «para que lo sepas». Un aviso
   que no se distingue del otro deja de leerse. */
.gar-aviso {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 10px 13px; margin-bottom: 9px;
    border: 1px solid var(--border); border-radius: 8px;
    font-size: 12.5px; line-height: 1.45; text-transform: none;
}
.gar-aviso i { margin-top: 2px; flex: none; }
.gar-aviso.warn {
    color: var(--amber, #b45309);
    border-color: color-mix(in srgb, var(--amber, #b45309) 35%, var(--border));
    background: color-mix(in srgb, var(--amber, #b45309) 7%, transparent);
}
.gar-aviso.info { color: var(--dim); }

/* ── Un bloque de garantía ────────────────────────────────────────────── */
.gar-bloque {
    border: 1px solid var(--border); border-radius: 10px;
    padding: 15px 17px; margin-bottom: 12px;
}
/* El cubo de «sin asignar» se marca en ámbar: es lo que hay que ir a arreglar
   a PRODEX, no una garantía más. */
.gar-bloque.sinasignar {
    border-color: color-mix(in srgb, var(--amber, #b45309) 40%, var(--border));
}
.gar-etq {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; font-weight: 700; letter-spacing: .3px;
    padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.gar-etq i { color: var(--dim); font-size: 12px; }
.gar-n {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--dim);
    border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px;
}
/* Los términos son el texto legal que se imprime tal cual: se leen como
   párrafo, no como dato de formulario. */
.gar-term {
    font-size: 12.5px; line-height: 1.6; color: var(--dim);
    text-transform: none; padding: 12px 0 4px; white-space: normal;
}
.gar-term em { opacity: .75; }

/* ── Las partidas que ampara ──────────────────────────────────────────── */
.gar-tbl { width: 100%; border-collapse: collapse; margin-top: 8px; }
.gar-tbl td {
    padding: 7px 8px; border-top: 1px solid var(--border);
    font-size: 12.5px; text-transform: none; vertical-align: top;
}
.gar-sku {
    width: 118px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; color: var(--dim); white-space: nowrap;
}
.gar-cant { width: 90px; text-align: right; color: var(--dim); white-space: nowrap; }
.gar-marca { display: block; font-size: 11px; color: var(--dim); margin-top: 1px; }

/* ── El documento generado ────────────────────────────────────────────── */
.gar-doc { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.gar-doc iframe { width: 100%; height: 62vh; border: 0; display: block; background: #fff; }
.gar-doc-acc {
    display: flex; gap: 8px; justify-content: flex-end;
    padding: 10px 12px; border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
    .gar-sku, .gar-cant { width: auto; }
    .gar-doc iframe { height: 52vh; }
}