.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;
}