/* Formularios de un registro (pestañas de detalle): secciones con rejilla de 12 columnas, resumen en tarjetas y barra de acciones.
   Genérico (prefijo fr-): lo usa cualquier pantalla de detalle. Solo usa los tokens --easy-*, así sigue el tema elegido.
   La rejilla responde al ancho del contenedor (panel, modal, página o fila), no al de la ventana.
   Esquinas: ningún radio fijo, todo sale de --easy-radio-base (escala base / lg). */

/* Ojo: no usar container-type, contain ni transform en .fr ni en sus ancestros directos: crearían un bloque contenedor para los popups
   position: fixed de EasyCombo y los dejarían mal ubicados. La rejilla se adapta sola con flex-wrap. */
.fr {
    min-width: 0;
}

/* ---------- Formulario por secciones ---------- */
.fr-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 2px 8px;
}

.fr-sec {
    padding: 14px 16px 16px;
    border: 1px solid var(--easy-color-borde, #e5e7eb);
    border-radius: calc(var(--easy-radio-base, 8px) * 1.25);
    background: var(--easy-color-superficie, #fff);
}

.fr-tit {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--easy-color-primario, #940404);
}

/* Rejilla de 12 columnas con flex-wrap: cada campo ocupa N/12 del ancho y baja de renglón cuando ya no cabe con su ancho mínimo,
   así responde al ancho del panel, la fila o el modal sin usar contenedores. */
.fr-grid {
    --fr-gap: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px var(--fr-gap);
    align-items: flex-start;
}
.fr-grid > * { box-sizing: border-box; min-width: 0; }

.fr-c1 { flex: 1 1 calc(100% / 12 * 1 - var(--fr-gap)); min-width: 96px; }
.fr-c2 { flex: 1 1 calc(100% / 12 * 2 - var(--fr-gap)); min-width: 120px; }
.fr-c3 { flex: 1 1 calc(100% / 12 * 3 - var(--fr-gap)); min-width: 160px; }
.fr-c4 { flex: 1 1 calc(100% / 12 * 4 - var(--fr-gap)); min-width: 200px; }
.fr-c5 { flex: 1 1 calc(100% / 12 * 5 - var(--fr-gap)); min-width: 220px; }
.fr-c6 { flex: 1 1 calc(100% / 12 * 6 - var(--fr-gap)); min-width: 240px; }
.fr-c8 { flex: 1 1 calc(100% / 12 * 8 - var(--fr-gap)); min-width: 280px; }
.fr-c12 { flex: 1 1 100%; }

/* Interruptor con etiqueta arriba y centrado en la altura de un campo de texto (36 px), igual que sus vecinos.
   Va dentro de un .easy-campo (fr-centro) para heredar la misma tipografía y color de etiqueta que los demás campos; etiqueta e interruptor se centran en su columna. */
.fr-sw { display: flex; align-items: center; height: 36px; }
.fr-centro { text-align: center; }
.fr-centro .fr-sw { justify-content: center; }

.fr-nota { margin: -4px 0 0; font-size: 12px; color: var(--easy-color-texto-tenue, #6b7280); }

/* ---------- Barra de acciones (Guardar / Cancelar) ----------
   Dentro de DetalleRegistro los botones van en el encabezado de la tarjeta; esta barra es solo el respaldo cuando el formulario se usa suelto. */
.fr-acciones {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 2px;
}
.fr-acciones-arriba { border-bottom: 1px solid var(--easy-color-borde, #e5e7eb); }

/* ---------- Resumen en tarjetas ---------- */
.fr-resumen { display: flex; flex-direction: column; gap: 14px; padding: 14px 2px 8px; }
.fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--easy-color-primario, #940404);
    background: var(--easy-color-primario-suave, #fbeaea);
    border-radius: calc(var(--easy-radio-base, 8px) * 2);
}

/* Ficha: bloques sin caja, con el título subrayado y filas etiqueta / valor separadas por una línea fina. Las columnas se acomodan solas. */
.fr-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px 44px; }
.fr-bloque { min-width: 0; }
.fr-bloque h4 {
    margin: 0 0 4px;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--easy-color-primario, #940404);
    border-bottom: 2px solid var(--easy-color-primario, #940404);
}
.fr-filas { margin: 0; }
.fr-fila {
    display: grid;
    grid-template-columns: minmax(110px, 36%) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline;
    padding: 9px 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--easy-color-borde, #e5e7eb) 75%, transparent);
}
.fr-fila dt { margin: 0; font-size: 13px; font-weight: 600; color: var(--easy-color-texto-tenue, #6b7280); }
.fr-fila dd { margin: 0; overflow-wrap: anywhere; color: var(--easy-color-texto, #1f2430); }
.fr-fila dd.vacio { color: var(--easy-color-texto-tenue, #6b7280); opacity: .6; }

/* ---------- Lista pequeña dentro de un diálogo (p. ej. departamentos de una oficina) ---------- */
.fr-mini { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--easy-color-borde, #e5e7eb); border-radius: var(--easy-radio-base, 8px); }
.fr-mini li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 4px 3px 12px; border-bottom: 1px solid var(--easy-color-borde, #e5e7eb); }
.fr-mini li:last-child { border-bottom: 0; }
.fr-mini-vacio { margin: 10px 0 0; color: var(--easy-color-texto-tenue, #6b7280); }
/* Botón al lado de un campo: baja hasta la altura del input (la etiqueta del campo ocupa la parte de arriba) */
.fr-boton-campo { align-self: end; }
/* Input de archivo oculto (el botón de importar lo dispara) */
.fileHidden { display: none; }