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

/* El resumen de validación no pinta su caja cuando no hay nada que decir.

   `asp-validation-summary` deja el `<div>` en el HTML siempre —con la clase
   `validation-summary-valid` mientras no haya errores, y `validation-summary-errors` en cuanto
   los hay—, así que un formulario recién abierto salía con una franja roja vacía encima de los
   campos. Se veía en las treinta y pico pantallas que le ponen `dt-alert dt-alert-error`, que es
   el uso normal; la más reciente, el alta de un origen de integración.

   Se arregla aquí y no en cada vista porque el problema es de las dos clases juntas: `dt-alert`
   es `display: flex` con relleno y fondo, o sea que se ve aunque esté vacío. Envolver cada
   `<div>` en un `@if` sería el mismo arreglo copiado treinta veces, y la treinta y una se
   olvidaría.

   Va aquí, en una hoja servida tal cual, y no en `app.css`: aquélla es fuente de `app.min.css`
   y su regla no llegaría al navegador hasta que alguien reconstruyera el CSS. */
.dt-alert.validation-summary-valid {
    display: none;
}

/* ---- El formulario de incorporación, con la piel del portal ------------------------------
   Eva, 01/09/2026, sobre la captura del portal actual.

   LA PARTIAL DE CAMPOS ES UNA Y LA COMPARTEN TRES PANTALLAS —backoffice, portal de la empresa y
   enlace público con token— y eso NO se toca: es lo que hace que las tres pidan lo mismo
   (07 §4.12). Así que la piel no se cambia en la partial, que se la llevaría también el
   backoffice y allí desentonaría: se cambia aquí, acotada a `.dt-portal-incorporacion`, que es la
   clase que llevan las cuatro pantallas del portal —individual y de grupo, con sesión y por
   enlace—.

   Los campos ya venían bien: `.dt-portal-main` los viste sin caja, con el rótulo encima y una
   línea debajo, que es justo lo que hace el portal actual. Lo que faltaba era el marco.

   Y VIVE EN ESTA HOJA, NO EN `app.css`, que es lo primero que se intentó. `app.css` se compila
   dentro de `@layer components`, y en la cascada una capa pierde contra el CSS sin capa —esta
   hoja— y contra las utilidades de Tailwind, por mucha especificidad que se le eche encima. Con
   el bloque allí, la rejilla seguía saliendo de `.dt-campos` de más arriba y los rótulos seguían
   en 14 px: las reglas llegaban al navegador y no ganaban ninguna. */
.dt-portal-incorporacion .dt-section-card {
    /* SIN TARJETA. La partial agrupa cada bloque en una `.dt-section-card` —borde, radio y
       sombra— porque en el backoffice una ficha se lee como una pila de tarjetas. Aquí no: el
       formulario del portal es una hoja corrida con sus rótulos, y los recuadros lo parten en
       cajas que compiten con los campos que llevan dentro. */
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.dt-portal-incorporacion .dt-campos {
    /* TRES COLUMNAS, y regulares. `.dt-campos` reparte con `auto-fill minmax(220px, 1fr)`, que en
       el ancho del portal deja filas de tres, de dos o de cuatro según lo que traiga cada bloque:
       los rótulos dejan de alinearse de una sección a la siguiente y el formulario se lee
       escalonado. El portal actual los pone a tres y las columnas cantan. `es-largo` y `es-total`
       siguen valiendo: quien pedía dos pistas las sigue pidiendo. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 24px;
}

@media (max-width: 900px) {
    .dt-portal-incorporacion .dt-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    /* En estrecho manda el campo: una columna, y lo que pedía dos pistas deja de pedirlas —si no,
       `es-largo` se sale de la rejilla y desborda a lo ancho—. */
    .dt-portal-incorporacion .dt-campos { grid-template-columns: minmax(0, 1fr); }
    .dt-portal-incorporacion .dt-campos > .es-largo { grid-column: auto; }
}

/* Los rótulos de bloque —«Datos de la práctica», «Lugar de realización», «Personas»— con la
   presencia que tienen en el portal actual: se leen como el título de lo que viene debajo y no
   como una etiqueta más entre los campos. La partial los emite como `<h2>` con clases de
   utilidad, así que se visten por posición y no por clase propia. */
.dt-portal-incorporacion h2 {
    margin: 26px 0 14px;
    font-size: 17px;
    font-weight: 700;
    color: #2B2B2B;
}

.dt-portal-incorporacion h2:first-child {
    margin-top: 0;
}

/* La acción, al pie y centrada, como el «Guardar» del portal actual. Venía alineada a la derecha
   con utilidades sueltas. */
.dt-portal-incorporacion-pie {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 30px;
}

/* Y los bloques, sin recuadro. La partial los envuelve en una caja blanca con borde y radio, que
   en el backoffice es la forma de una ficha; en el portal parten la hoja en cajas y compiten con
   los campos que llevan dentro —el portal actual no tiene ninguna—.

   `.dt-form-bloque` es solo un gancho: NO lleva estilo propio, así que en el backoffice esos
   bloques se siguen viendo exactamente igual que antes. Existe para poder nombrarlos desde aquí
   sin depender de la lista de clases de utilidad que llevan al lado, que cambia sola en cuanto
   alguien retoca el marcado. */
.dt-portal-incorporacion .dt-form-bloque {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

/* La frase de cabecera del formulario de incorporación, en negrita como la del portal actual: es
   la instrucción de la pantalla —qué hay que hacer y a dónde lleva—, no un pie de página. Iba en
   gris pequeño y se leía como una nota al margen. */
.dt-portal-incorporacion-intro {
    margin: 0 0 24px;
    font-size: 15px;
    font-weight: 700;
    color: #2B2B2B;
}