.nav-group {
    margin: 1rem .75rem .35rem;
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.inline-form select,
.filters select {
    min-height: 2.35rem;
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    padding: .35rem .55rem;
    color: #0f172a;
    font: inherit;
    background: #fff;
}

.btn-secondary.compact {
    padding: .45rem .65rem;
}

.notice {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-weight: 600;
}

.form-panel {
    display: grid;
    gap: .85rem;
    align-content: start;
}

.form-panel h4 {
    margin: .4rem 0 0;
    color: #334155;
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.form-panel label {
    display: grid;
    gap: .35rem;
    min-width: 0;
    color: #334155;
    font-size: .875rem;
    font-weight: 650;
}

.form-panel input,
.form-panel select,
.form-panel textarea {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid #cbd5e1;
    border-radius: .375rem;
    padding: .45rem .65rem;
    color: #0f172a;
    font: inherit;
    background: #fff;
}

.form-panel textarea {
    min-height: 5rem;
    resize: vertical;
}

.check-row,
.check-grid label {
    display: flex !important;
    align-items: center;
    gap: .5rem;
}

.check-row input,
.check-grid input {
    width: 1rem;
    min-height: 1rem;
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem .75rem;
}

.form-grid-2,
.form-grid-3 {
    display: grid;
    gap: .75rem;
}

.offer-grid {
    display: grid;
    gap: 1rem;
}

.offer-card {
    display: grid;
    gap: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    background: #fff;
    padding: 1rem;
}

.offer-card h3 {
    margin: .15rem 0;
    font-size: 1.2rem;
}

.offer-card-main {
    min-width: 0;
}

.offer-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: .65rem;
    margin: 0;
}

.offer-meta div {
    border: 1px solid #e2e8f0;
    border-radius: .375rem;
    padding: .6rem;
}

.offer-meta dt {
    color: #64748b;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.offer-meta dd {
    margin: .2rem 0 0;
    font-weight: 650;
}

@media (min-width: 640px) {
    .form-grid-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-\[1fr_28rem\] {
        grid-template-columns: 1fr 28rem;
    }
}

/* Rejilla de campos de las fichas de alta (Eva, 06/08/2026).
   Las altas iban dentro de un contenedor de 64rem (`max-w-5xl`): en un monitor normal la
   ficha ocupaba la mitad izquierda y la otra mitad quedaba en blanco. Ahora la ficha usa
   todo el ancho del contenido y es la rejilla la que reparte: el número de columnas sale
   del ancho disponible, no de un `lg:grid-cols-4` fijo, así que en pantalla ancha caben
   más campos por fila en vez de estirarse todos.
   `auto-fill` y no `auto-fit`: con `auto-fit` las pistas vacías se colapsan y una sección
   de tres campos los estiraría a media pantalla cada uno, que es justo lo que se quería
   quitar. Misma pista que `.dt-section-grid` de app.css, para que la ficha de alta y la de
   detalle tengan el mismo ritmo de columnas. */
.dt-campos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    align-items: start;
}

.dt-campos > * {
    min-width: 0;
}

/* El ancho lo manda el dato, no la rejilla: una razón social necesita sitio y un código
   postal son cinco cifras, así que un campo ocupa una pista, dos o la fila entera según
   lo que se escriba en él. Sin esto todos los campos miden lo mismo y en una pantalla
   ancha el código postal acaba con una caja de 400px para cinco dígitos. */
@media (min-width: 640px) {
    /* Razón social, dirección, email, web, observaciones cortas: dos pistas. */
    .dt-campos > .es-largo {
        grid-column: span 2;
    }
}

/* Texto libre de varias líneas: la fila entera. */
.dt-campos > .es-total {
    grid-column: 1 / -1;
}

/* Códigos y cifras (CP, nº de empleados, fechas, NAF…): ocupan una pista, pero el control
   se queda en lo que mide el dato en vez de estirarse hasta el borde de la columna. */
.dt-campos > .es-corto input,
.dt-campos > .es-corto select {
    max-width: 10rem;
}

/* Rejilla de criterios del buscador (05 §4.11).
   Los controles se ajustan a su columna: un <select> sin ancho declarado se estira hasta el
   texto de su opción más larga —«Comercio al por mayor y al por menor; reparación de
   vehículos» medía 467px en una columna de 287px— y se monta encima del campo de al lado.
   `min-width: 0` es imprescindible: sin él, el tamaño mínimo del contenido gana igualmente. */
.dt-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--dt-space-3);
    align-items: start;
}

.dt-rejilla > * {
    min-width: 0;
}

.dt-rejilla select,
.dt-rejilla input,
.dt-rejilla textarea {
    width: 100%;
    min-width: 0;
}

/* Tri-estado Sí / No / Da igual (buscador de empresas, 05 §4.11).
   Son tres radios del mismo nombre con sus etiquetas pegadas: el estado se lee sin abrir nada
   —que era el problema de resolverlo con un desplegable— y sigue funcionando sin JavaScript,
   así que viaja en el formulario del componente de listado como cualquier otro campo.
   Los radios se ocultan visualmente pero siguen recibiendo foco, y el anillo se pinta sobre
   la etiqueta hermana. */
.dt-triestado {
    display: inline-flex;
    border: 1px solid var(--dt-color-borde-fuerte);
    border-radius: var(--dt-radius-md);
    overflow: hidden;
    background: var(--dt-color-fondo);
}

.dt-triestado input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dt-triestado label {
    padding: 3px 10px;
    border-right: 1px solid var(--dt-color-borde);
    color: var(--dt-color-texto-ayuda);
    font-size: var(--dt-text-etiqueta);
    line-height: 18px;
    font-weight: var(--dt-fw-medium);
    cursor: pointer;
    user-select: none;
}

.dt-triestado label:last-child {
    border-right: 0;
}

.dt-triestado label:hover {
    background: var(--dt-color-fondo-hover);
    color: var(--dt-color-texto);
}

.dt-triestado input:checked + label {
    background: var(--dt-neutral-100);
    color: var(--dt-color-texto);
}

.dt-triestado input:checked + label.es-si {
    background: var(--dt-green-50);
    color: var(--dt-green-600);
    box-shadow: inset 0 -2px 0 var(--dt-green-500);
}

.dt-triestado input:checked + label.es-no {
    background: var(--dt-red-50);
    color: var(--dt-red-600);
    box-shadow: inset 0 -2px 0 var(--dt-red-500);
}

.dt-triestado input:focus-visible + label {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--dt-color-borde-foco);
}

/* --------------------------------------------------------------------------
   Editor y vista previa de los avisos por email (Configuracion > Sistema > Email).
   El cuerpo se teclea en marcado acotado y se previsualiza tal y como lo vera el
   destinatario; el marcador sin resolver se resalta para que se vea que ahi ira un
   dato, no ese texto.
   -------------------------------------------------------------------------- */
.dt-marcador-pendiente {
    background: var(--dt-neutral-100);
    border-radius: 0.25rem;
    padding: 0 0.2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em;
    color: var(--dt-color-texto-suave, #64748b);
}

.dt-email-previa p {
    margin: 0 0 0.75rem;
}

.dt-email-previa ul,
.dt-email-previa ol {
    margin: 0 0 0.75rem 1.25rem;
    list-style: revert;
}

.dt-email-previa a {
    color: var(--dt-color-cabecero, #2563eb);
    text-decoration: underline;
}

/* Un enlace solo en su linea es un boton, y en el email sale como tal: aqui se imita para
   que lo que se ve al redactar sea lo que llega al buzon. */
.dt-email-previa-boton {
    margin: 1.25rem 0;
}

.dt-email-previa-boton a {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    background: var(--dt-color-cabecero, #2563eb);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* Título de un sub-bloque dentro de un formulario largo (Eva, 26/08/2026, regla documental
   de la normativa). No es la cabecera de una tarjeta —eso es `dt-section-header` de app.css,
   con su icono y su contador—: es el rótulo que agrupa unos cuantos campos dentro de un
   mismo formulario, para que once casillas seguidas se lean como cuatro grupos de tres.
   El nombre del grupo es el mismo con el que la fila del listado lee esas marcas. */
.dt-bloque-titulo {
    font-size: var(--dt-text-etiqueta, 12px);
    line-height: var(--dt-lh-etiqueta, 16px);
    font-weight: var(--dt-fw-semibold, 600);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dt-color-texto-secundario, #64748b);
    padding-bottom: var(--dt-space-1, 4px);
    margin-bottom: var(--dt-space-3, 12px);
    border-bottom: 1px solid var(--dt-color-borde-sutil, #eef2f7);
}