/*
 * Capa móvil transversal.
 *
 * En pantallas pequeñas la interfaz usa un lienzo continuo. Los marcos se
 * reservan para controles, estados, opciones seleccionables, avisos, métricas
 * y contenido visual. Escritorio conserva las superficies de cada módulo.
 */

@media (max-width: 700px) {
    body:has(.shell:not(.shell--public)),
    .shell:not(.shell--public),
    .shell:not(.shell--public) .contenido {
        background: var(--paper-000);
    }

    /* Formularios compartidos */

    .shell:not(.shell--public) .app-form-page {
        width: 100%;
    }

    .shell:not(.shell--public) .app-form-layout {
        gap: 0;
    }

    .shell:not(.shell--public) .app-form-nav {
        position: static;
        padding: 0 0 var(--space-3);
        overflow-x: auto;
        border: 0;
        border-bottom: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .shell:not(.shell--public) .app-form {
        gap: 0;
    }

    .shell:not(.shell--public) .app-form-section {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .app-form-section + .app-form-section {
        border-top: 1px solid var(--line-200);
    }

    .shell:not(.shell--public) .app-form-section__head {
        padding: 18px 0 14px;
        border-bottom: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .app-form-grid {
        padding: 0 0 var(--space-6);
    }

    .shell:not(.shell--public) .app-form-actions,
    .shell:not(.shell--public) .nota-editor-acciones,
    .shell:not(.shell--public) .preferencias-acciones {
        position: static;
        z-index: auto;
        margin-top: 0;
        padding: var(--space-4) 0 max(var(--space-4), env(safe-area-inset-bottom));
        border: 0;
        border-top: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .shell:not(.shell--public) .app-form-table-card,
    .shell:not(.shell--public) .tabla-tarjeta {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .app-form-table-card > header {
        padding-inline: 0;
    }

    /* Formularios y perfiles específicos */

    .shell:not(.shell--public) .campana-formulario {
        gap: 0;
    }

    .shell:not(.shell--public) .campana-formulario__seccion,
    .shell:not(.shell--public) .multimedia-formulario__seccion,
    .shell:not(.shell--public) .newsletter-form > section,
    .shell:not(.shell--public) .nota-configuracion__tarjeta,
    .shell:not(.shell--public) .nota-panel,
    .shell:not(.shell--public) .perfil-hero,
    .shell:not(.shell--public) .perfil-tarjeta,
    .shell:not(.shell--public) .medio-perfil__hero,
    .shell:not(.shell--public) .design-editor,
    .shell:not(.shell--public) .plantilla-datos,
    .shell:not(.shell--public) .plantilla-documento {
        padding: var(--space-4) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .campana-formulario__seccion + .campana-formulario__seccion,
    .shell:not(.shell--public) .multimedia-formulario__seccion + .multimedia-formulario__seccion,
    .shell:not(.shell--public) .newsletter-form > section + section,
    .shell:not(.shell--public) .nota-configuracion__tarjeta + .nota-configuracion__tarjeta,
    .shell:not(.shell--public) .nota-panel + .nota-panel,
    .shell:not(.shell--public) .perfil-tarjeta + .perfil-tarjeta {
        border-top: 1px solid var(--line-200);
    }

    .shell:not(.shell--public) .newsletter-form {
        gap: 0;
    }

    .shell:not(.shell--public) .newsletter-form > .newsletter-form__status {
        margin: var(--space-4) 0;
        padding: var(--space-4);
        border-radius: 12px;
        background: var(--paper-100);
    }

    .shell:not(.shell--public) .multimedia-formulario__seccion > header,
    .shell:not(.shell--public) .design-editor > header,
    .shell:not(.shell--public) .plantilla-documento__cabecera {
        padding: 0 0 var(--space-4);
        background: transparent;
    }

    .shell:not(.shell--public) .multimedia-formulario__grid,
    .shell:not(.shell--public) .tipos-coleccion,
    .shell:not(.shell--public) .design-editor form {
        padding-inline: 0;
    }

    /* Inicio y onboarding */

    .shell:not(.shell--public) .dashboard-panel,
    .shell:not(.shell--public) .onboarding-recorrido {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .dashboard-panel__cabecera,
    .shell:not(.shell--public) .onboarding-recorrido__cabecera,
    .shell:not(.shell--public) .onboarding-recorrido__pie {
        padding-inline: 0;
    }

    .shell:not(.shell--public) .dashboard-metrica,
    .shell:not(.shell--public) .onboarding-resumen,
    .shell:not(.shell--public) .recurso-card {
        border: 0;
        background: var(--paper-100);
        box-shadow: none;
    }

    .shell:not(.shell--public) .onboarding-resumen {
        background: linear-gradient(135deg, var(--paper-100), var(--blue-signal-soft));
    }

    /* Listados editoriales */

    .shell:not(.shell--public) .contenido-tipos {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .notas-tarjetas,
    .shell:not(.shell--public) .campanas-lista,
    .shell:not(.shell--public) .newsletter-grid,
    .shell:not(.shell--public) .eventos-lista,
    .shell:not(.shell--public) .viajes-lista,
    .shell:not(.shell--public) .listas-grid {
        gap: 0;
    }

    .shell:not(.shell--public) .nota-tarjeta,
    .shell:not(.shell--public) .campana-fila,
    .shell:not(.shell--public) .newsletter-card,
    .shell:not(.shell--public) .evento-card,
    .shell:not(.shell--public) .viaje-card,
    .shell:not(.shell--public) .lista-card {
        min-height: 0;
        margin: 0;
        padding: 18px 0;
        border: 0;
        border-bottom: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
    }

    .shell:not(.shell--public) .newsletter-card__body {
        padding: 0;
    }

    .shell:not(.shell--public) .newsletter-card__icon {
        margin: 20px 0 14px;
    }

    .shell:not(.shell--public) .newsletter-card p {
        min-height: 0;
    }

    .shell:not(.shell--public) .newsletter-card footer {
        padding: var(--space-3) 0 0;
        background: transparent;
    }

    .shell:not(.shell--public) .listas-grid {
        padding: 0;
    }

    /* Paneles de detalle, tablas y seguimientos */

    .shell:not(.shell--public) .dashboard-panel,
    .shell:not(.shell--public) .campana-panel,
    .shell:not(.shell--public) .campana-resumen,
    .shell:not(.shell--public) .evento-panel,
    .shell:not(.shell--public) .viaje-panel,
    .shell:not(.shell--public) .contactos-section,
    .shell:not(.shell--public) .newsletter-editions,
    .shell:not(.shell--public) .subscriber-panel,
    .shell:not(.shell--public) .import-history,
    .shell:not(.shell--public) .nota-tabla-contenedor,
    .shell:not(.shell--public) .notas-tabla-contenedor,
    .shell:not(.shell--public) .movimientos__tabla,
    .shell:not(.shell--public) .directorio-tabla {
        overflow: visible;
        padding: var(--space-4) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .app-form-table-card,
    .shell:not(.shell--public) .nota-tabla-contenedor,
    .shell:not(.shell--public) .notas-tabla-contenedor,
    .shell:not(.shell--public) .movimientos__tabla,
    .shell:not(.shell--public) .directorio-tabla {
        overflow-x: auto;
    }

    .shell:not(.shell--public) .campana-panel + .campana-panel,
    .shell:not(.shell--public) .viaje-panel + .viaje-panel {
        border-top: 1px solid var(--line-200);
    }

    .shell:not(.shell--public) .campana-panel__cabecera,
    .shell:not(.shell--public) .evento-panel__cabecera,
    .shell:not(.shell--public) .viaje-panel > header,
    .shell:not(.shell--public) .contactos-section > header,
    .shell:not(.shell--public) .subscriber-panel > header,
    .shell:not(.shell--public) .import-history > header {
        padding-inline: 0;
    }

    .shell:not(.shell--public) .evento-panel--configuracion {
        padding-inline: 0;
    }

    .shell:not(.shell--public) .campana-resumen section {
        border-radius: 14px;
    }

    .shell:not(.shell--public) .newsletter-summary {
        gap: var(--space-2);
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .newsletter-summary article,
    .shell:not(.shell--public) .subscriber-kpis a,
    .shell:not(.shell--public) .evento-kpis article,
    .shell:not(.shell--public) .evento-progreso,
    .shell:not(.shell--public) .viaje-metricas article,
    .shell:not(.shell--public) .contactos-kpis article {
        border: 0;
        border-radius: 12px;
        background: var(--paper-100);
        box-shadow: none;
    }

    .shell:not(.shell--public) .newsletter-summary article {
        border: 0 !important;
    }

    .shell:not(.shell--public) .evento-flujo {
        border: 0;
        border-top: 1px solid var(--line-200);
        border-bottom: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .evento-registro-panel {
        padding: 18px;
        border: 0;
        border-radius: 14px;
        background: #f3f8f6;
        box-shadow: none;
    }

    .shell:not(.shell--public) .evento-registro-config {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .contactos-panel {
        padding: var(--space-4) 0;
    }

    .shell:not(.shell--public) .contact-add {
        border: 0;
        background: var(--paper-100);
        box-shadow: none;
    }

    /* Constructor de itinerarios: fondo para distinguir navegación e inspector. */

    .shell:not(.shell--public) .itinerario-editor__layout {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .itinerario-lienzo {
        background: transparent;
    }

    .shell:not(.shell--public) .itinerario-navegacion,
    .shell:not(.shell--public) .itinerario-inspector {
        background: var(--paper-100);
    }

    /* Directorio */

    .shell:not(.shell--public) .contactos-lista,
    .shell:not(.shell--public) .medios-lista {
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .contacto-fila,
    .shell:not(.shell--public) .medio-fila {
        margin: 0;
        padding: 18px 0;
        border: 0;
        border-bottom: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .contacto-fila:last-child,
    .shell:not(.shell--public) .medio-fila:last-child {
        border-bottom: 1px solid var(--line-200);
    }

    /*
     * Los listados del directorio necesitan una composición propia en móvil.
     * Apilar cada columna de escritorio convertía cada registro en una ficha
     * demasiado alta. Aquí agrupamos identidad, contexto y estado en tres
     * líneas compactas, manteniendo el detalle completo dentro de la ficha.
     */

    .shell:not(.shell--public) .contacto-fila {
        grid-template-areas:
            "identidad abrir"
            "medio medio"
            "relacion relacion";
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 7px;
        padding-block: 16px;
    }

    .shell:not(.shell--public) .contacto-fila__identidad {
        grid-area: identidad;
        gap: 10px;
        min-width: 0;
    }

    .shell:not(.shell--public) .contacto-fila__identidad > div {
        min-width: 0;
    }

    .shell:not(.shell--public) .contacto-fila__identidad > div > span {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shell:not(.shell--public) .contacto-fila__badges {
        margin-top: 3px;
    }

    .shell:not(.shell--public) .contacto-fila__medio {
        grid-area: medio;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 6px;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .shell:not(.shell--public) .contacto-fila__medio strong,
    .shell:not(.shell--public) .contacto-fila__medio span,
    .shell:not(.shell--public) .contacto-fila__medio small {
        display: inline;
        margin: 0;
        line-height: 1.35;
    }

    .shell:not(.shell--public) .contacto-fila__medio strong {
        font-size: 13px;
    }

    .shell:not(.shell--public) .contacto-fila__medio span,
    .shell:not(.shell--public) .contacto-fila__medio small {
        font-size: 11px;
    }

    .shell:not(.shell--public) .contacto-fila__medio small {
        margin-left: auto;
    }

    .shell:not(.shell--public) .contacto-fila__relacion {
        grid-area: relacion;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
        padding: 1px 0 0;
        border: 0;
    }

    .shell:not(.shell--public) .contacto-fila__relacion small {
        overflow: hidden;
        margin-left: auto;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shell:not(.shell--public) .contacto-fila__abrir {
        grid-area: abrir;
        align-self: start;
    }

    .shell:not(.shell--public) .medio-fila {
        grid-template-areas:
            "identidad abrir"
            "enfoque enfoque"
            "redaccion estado";
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        row-gap: 8px;
        padding-block: 16px;
    }

    .shell:not(.shell--public) .medio-fila__identidad {
        grid-area: identidad;
        min-width: 0;
    }

    .shell:not(.shell--public) .medio-fila__identidad > div {
        min-width: 0;
    }

    .shell:not(.shell--public) .medio-fila__identidad > div > span {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shell:not(.shell--public) .medio-fila__badges {
        margin-top: 3px;
    }

    .shell:not(.shell--public) .medio-fila__enfoque {
        grid-area: enfoque;
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 2px 6px;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .shell:not(.shell--public) .medio-fila__enfoque strong,
    .shell:not(.shell--public) .medio-fila__enfoque span {
        display: inline;
        margin: 0;
        line-height: 1.35;
    }

    .shell:not(.shell--public) .medio-fila__enfoque strong {
        font-size: 13px;
    }

    .shell:not(.shell--public) .medio-fila__enfoque span {
        font-size: 11px;
    }

    .shell:not(.shell--public) .medio-fila__redaccion {
        grid-area: redaccion;
        display: flex;
        align-items: baseline;
        gap: 4px;
        min-width: 0;
        padding: 0;
        border: 0;
    }

    .shell:not(.shell--public) .medio-fila__redaccion strong {
        font-size: 15px;
        line-height: 1;
    }

    .shell:not(.shell--public) .medio-fila__redaccion span {
        margin: 0;
        font-size: 10px;
        white-space: nowrap;
    }

    .shell:not(.shell--public) .medio-fila__redaccion small {
        display: none;
    }

    .shell:not(.shell--public) .medio-fila__estado {
        grid-area: estado;
        display: flex;
        align-items: center;
        justify-self: end;
        gap: 7px;
        padding: 0;
        border: 0;
    }

    .shell:not(.shell--public) .medio-fila__estado .directorio-estado {
        padding: 4px 7px;
        font-size: 9px;
    }

    .shell:not(.shell--public) .medio-fila__estado .contacto-fila__calidad {
        grid-template-columns: 32px auto;
        gap: 5px;
    }

    .shell:not(.shell--public) .medio-fila__estado .contacto-fila__calidad small {
        font-size: 10px;
        white-space: nowrap;
    }

    .shell:not(.shell--public) .medio-fila__abrir {
        grid-area: abrir;
        align-self: start;
    }

    /* Multimedia: las miniaturas y galerías conservan sus superficies. */

    .shell:not(.shell--public) .multimedia-resumen {
        gap: var(--space-2);
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .multimedia-resumen > div {
        padding: 14px 16px;
        border: 0;
        border-radius: 12px;
        background: var(--paper-100);
    }

    .shell:not(.shell--public) .coleccion-hero {
        padding: 0 0 var(--space-4);
        border: 0;
        border-bottom: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
    }

    .shell:not(.shell--public) .coleccion-principal .multimedia-seccion,
    .shell:not(.shell--public) .coleccion-panel,
    .shell:not(.shell--public) .activo-detalle__panel {
        overflow: visible;
        padding: var(--space-4) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .shell:not(.shell--public) .coleccion-principal .multimedia-seccion__cabecera,
    .shell:not(.shell--public) .activo-detalle__cabecera,
    .shell:not(.shell--public) .activo-detalle__acciones,
    .shell:not(.shell--public) .activo-metadatos,
    .shell:not(.shell--public) .activo-detalle__datos {
        padding-inline: 0;
    }

    .shell:not(.shell--public) .coleccion-panel--publicar {
        padding: var(--space-4);
        border-radius: 12px;
        background: color-mix(in srgb, var(--blue-signal-soft) 32%, var(--paper-000));
    }

    /* Vacíos: fondo suave para separar el estado sin dibujar otra tarjeta. */

    .shell:not(.shell--public) .notas-vacio,
    .shell:not(.shell--public) .campanas-vacio,
    .shell:not(.shell--public) .eventos-vacio,
    .shell:not(.shell--public) .viajes-vacio,
    .shell:not(.shell--public) .multimedia-vacio,
    .shell:not(.shell--public) .directorio-vacio,
    .shell:not(.shell--public) .newsletters-empty,
    .shell:not(.shell--public) .campana-panel__vacio,
    .shell:not(.shell--public) .viaje-panel__vacio {
        border: 0;
        border-radius: 14px;
        background: var(--paper-100);
        box-shadow: none;
    }

    /* Portales profesionales autenticados */

    .pp-body,
    .pm-body {
        background: var(--paper-000);
    }

    .pp-contenido .pp-hero,
    .pp-contenido .pp-tarjeta,
    .pm-contenido:not(.pm-contenido--acceso) .pm-hero,
    .pm-contenido:not(.pm-contenido--acceso) .pm-tarjeta {
        padding: var(--space-4) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .pp-columna,
    .pm-grid {
        gap: 0;
    }

    .pp-columna > .pp-tarjeta + .pp-tarjeta,
    .pm-grid .pm-tarjeta + .pm-tarjeta {
        border-top: 1px solid var(--line-200);
    }

    .pp-publicaciones,
    .pp-fuentes,
    .pp-muestras {
        gap: 0;
    }

    .pp-publicacion,
    .pp-fuente,
    .pp-muestra,
    .pm-colaboracion {
        padding: var(--space-4) 0;
        border: 0;
        border-bottom: 1px solid var(--line-200);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .pm-metricas > a {
        border: 0;
        background: var(--paper-100);
        box-shadow: none;
    }

    /* Centro de control independiente */

    .control-shell .control-main {
        background: var(--paper-000);
    }

    .control-shell .control-welcome {
        box-shadow: none;
    }

    .control-shell .control-ops-card,
    .control-shell .control-action-panel,
    .control-shell .control-security-card,
    .control-shell .control-sessions,
    .control-shell .control-template-fields,
    .control-shell .control-template-design {
        padding: var(--space-4) 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .control-shell .control-ops-card + .control-ops-card,
    .control-shell .control-security-card + .control-security-card {
        border-top: 1px solid var(--line-200);
    }

    .control-shell .control-grid article,
    .control-shell .control-ops-metrics article {
        border: 0;
        background: var(--paper-100);
        box-shadow: none;
    }
}