/* ═══════════════════════════════════════════════════════════════════════════
   EXTRANET NetOffice (DOC 186) — estilos del host.

   Va DESPUÉS de app.css del RCL (aspecto NetOffice Web) y del diseño corporativo
   del cliente (/diseno/estilo.css). Los colores salen de las variables que define
   ese diseño, SIEMPRE con el estándar NetOffice como respaldo — este fichero no
   define las variables, sólo las consume, para que el diseño mande:

     --ext-primario        azul de botones y títulos        (#1f4a87)
     --ext-acento          azul claro / degradados          (#2f6ec1)
     --ext-cabecera        fondo de la cabecera             (degradado NetOffice)
     --ext-fondo           fondo del tapiz                  (#eef1f6)
     --ext-texto-cabecera  texto sobre la cabecera          (#ffffff, §2.43)
     --ext-radio           radio de esquinas                (8px)
     --ext-fuente          tipografía                       (Segoe UI)

   El pie «NetOffice · LASO S.L.» es FIJO y no se puede ocultar (DOC 186 §3).
   ═══════════════════════════════════════════════════════════════════════════ */

.ext-body {
    font-family: var(--ext-fuente, "Segoe UI", system-ui, -apple-system, Arial, sans-serif);
    background: var(--ext-fondo, #eef1f6);
}

/* ═══ Pie fijo ═══ */
.ext-pie {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 30px;
    background: #fff;
    border-top: 1px solid #d4dbe6;
    color: #6c7787; font-size: 12px; letter-spacing: .2px;
    position: relative; z-index: 5;
}
.ext-pie-logo { width: 16px; height: 16px; border-radius: 3px; }

/* ═══ Marco (usuario dentro) ═══ */
.ext-marco { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.ext-cabecera {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 18px;
    min-height: 56px; padding: 6px 18px;
    background: var(--ext-cabecera, linear-gradient(180deg, #2f6ec1 0%, #1f4a87 100%));
    color: var(--ext-texto-cabecera, #fff);
    border-bottom: 1px solid rgba(0, 0, 0, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px rgba(15, 30, 55, .12);
    position: relative; z-index: 10;
}
.ext-marca { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; min-width: 0; }
.ext-marca-logo {
    height: 40px; width: auto; max-width: 140px; object-fit: contain;
    background: #fff; border-radius: 6px; padding: 3px;
}
.ext-marca-textos { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ext-marca-empresa { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.ext-marca-modulo { font-size: 11.5px; opacity: .8; white-space: nowrap; }

.ext-menu { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.ext-menu-item {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: var(--ext-radio, 8px);
    color: inherit; text-decoration: none; white-space: nowrap;
    font-size: 13.5px; font-weight: 600; opacity: .88;
}
.ext-menu-item:hover { background: rgba(255, 255, 255, .14); opacity: 1; color: inherit; }
.ext-menu-item.active { background: rgba(255, 255, 255, .22); opacity: 1; box-shadow: inset 0 -2px 0 currentColor; }

.ext-usuario { display: flex; align-items: center; gap: 8px; margin-left: auto; }
/* Ventana estrecha (el iframe del Diseñador web, una tablet): el menú baja a una segunda
   fila de la cabecera en vez de desbordar o esconder pastillas tras un scroll horizontal. */
@media (max-width: 1100px) {
    .ext-cabecera { flex-wrap: wrap; row-gap: 4px; }
    .ext-menu { order: 10; flex: 1 1 100%; flex-wrap: wrap; overflow-x: visible; }
}
.ext-usuario-textos { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; min-width: 0; }
.ext-usuario-tercero { font-size: 13px; font-weight: 700; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-usuario-nombre { font-size: 11.5px; opacity: .8; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ext-usuario-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px; border-radius: 6px;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .30);
    color: inherit; text-decoration: none; font-size: 13px; font-weight: 600;
}
.ext-usuario-btn:hover { background: rgba(255, 255, 255, .22); color: inherit; }

/* Tapiz: el cuerpo a pantalla completa, con su propio scroll. */
.ext-tapiz {
    flex: 1 1 auto; min-height: 0; overflow: auto;
    background: var(--ext-fondo, #eef1f6);
    padding: 14px 18px;
    display: flex; flex-direction: column; gap: 12px;
}

/* Banda de título de un apartado (CabeceraApartado). */
.ext-apartado-titulo {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; border-radius: var(--ext-radio, 8px);
    background: linear-gradient(180deg, var(--ext-acento, #2f6ec1) 0%, var(--ext-primario, #1f4a87) 100%);
    color: var(--ext-texto-cabecera, #fff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 3px rgba(31, 74, 135, .18);
}
.ext-apartado-titulo > i { font-size: 18px; opacity: .9; }
.ext-apartado-titulo h1 { margin: 0; font-size: 16px; font-weight: 700; }
.ext-apartado-sub { font-size: 12.5px; opacity: .85; }
.ext-apartado-spacer { flex: 1; }

/* Papel enmarcado (§2.20) para el contenido de un apartado. */
.ext-panel {
    background: #fff; border: 1px solid #c3ccd8; border-radius: var(--ext-radio, 8px);
    box-shadow: 0 1px 3px rgba(31, 74, 135, .10);
    padding: 16px 18px;
}
.ext-panel-estrecho { max-width: 460px; }
.ext-hint { font-size: 12px; color: #6b7785; margin: 10px 0 0; }

.ext-preparacion {
    margin: 30px auto; max-width: 520px; text-align: center;
    background: #fff; border: 1px dashed #b8c4d4; border-radius: var(--ext-radio, 8px);
    padding: 34px 24px; color: #4a5566;
}
.ext-preparacion > i { font-size: 36px; color: var(--ext-primario, #1f4a87); }
.ext-preparacion h2 { font-size: 18px; margin: 10px 0 6px; color: var(--ext-primario, #1f4a87); font-weight: 700; }
.ext-preparacion p { margin: 0; font-size: 13.5px; }
.ext-no-disponible > i { color: #9a5b00; }


.ext-cargando { padding: 30px; color: #6c7787; }
.ext-error-ui {
    display: none; position: fixed; bottom: 34px; left: 0; right: 0; z-index: 1000;
    background: #fff3d6; border-top: 1px solid #e8c877; padding: 8px 18px; color: #6b4e00; font-size: 13px;
}
.ext-error-ui .reload { margin-left: 10px; }
.ext-error-ui .dismiss { float: right; cursor: pointer; }

/* ═══ Acceso (mismo esquema que el login del shell) ═══ */
.ext-acceso {
    height: calc(100vh - 30px); overflow: auto;
    display: grid; grid-template-columns: 1fr 1fr;
    background: var(--ext-fondo, #eef1f6);
}
.ext-acceso-hero {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    padding: 48px 56px; overflow: hidden;
    color: var(--ext-texto-cabecera, #fff);
    /* Foto de fondo propia (Diseñador web → «Foto de la pantalla de acceso», DOC 186b, JJ 08/11):
       --ext-acceso-foto = url(...) y, encima, un velo del color primario para que el texto se lea
       sobre cualquier foto. Sin foto, las dos capas son transparentes y queda el degradado de siempre. */
    --ext-acceso-velo-foto: linear-gradient(135deg,
        color-mix(in srgb, var(--ext-primario, #1f4a87) 86%, transparent) 0%,
        color-mix(in srgb, var(--ext-primario, #1f4a87) 52%, transparent) 58%,
        rgba(0, 0, 0, .42) 100%);
    background:
        var(--ext-acceso-velo, linear-gradient(transparent, transparent)),
        var(--ext-acceso-foto, linear-gradient(transparent, transparent)) center / cover no-repeat,
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .18) 0%, transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, .25) 0%, transparent 60%),
        linear-gradient(135deg, var(--ext-acento, #3b78c0) 0%, var(--ext-primario, #1f4a87) 60%, #143562 100%);
}
.ext-acceso-hero.con-foto::before { display: none; }
/* Modo diseño: pieza «Foto de fondo» que abre sus opciones en el diseñador. */
.ext-dw-previa .ext-dw-foto { display: none; }
.ext-dw-foto {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, .16); border: 1px dashed rgba(255, 255, 255, .55);
    color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ext-acceso-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 22px 22px;
}
.ext-acceso-hero-contenido { position: relative; display: flex; flex-direction: column; gap: 18px; max-width: 480px; }
.ext-acceso-logo {
    width: auto; height: 96px; max-width: 240px; object-fit: contain;
    background: #fff; border-radius: 12px; padding: 8px; align-self: flex-start;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .30);
}
.ext-acceso-titulo { margin: 6px 0 0; font-size: 44px; font-weight: 800; line-height: 1.05; color: inherit; text-shadow: 0 4px 14px rgba(0, 0, 0, .30); }
.ext-acceso-lema { margin: 0; font-size: 17px; line-height: 1.45; opacity: .92; }
.ext-acceso-ventajas { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ext-acceso-ventajas li { display: flex; align-items: center; gap: 12px; font-size: 14px; opacity: .92; }
.ext-acceso-ventajas li i {
    width: 28px; height: 28px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .30); border-radius: 50%; font-size: 14px;
}
.ext-acceso-main {
    display: flex; align-items: center; justify-content: center; padding: 24px;
    background:
        radial-gradient(circle at 100% 100%, rgba(95, 140, 200, .10) 0%, transparent 55%),
        linear-gradient(135deg, #f6f9fd 0%, #dbe5f1 100%);
    box-shadow: inset 14px 0 18px -14px rgba(15, 30, 55, .18), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.ext-acceso-tarjeta {
    width: 100%; max-width: 400px;
    background: #fff; border: 1px solid #d4dbe6; border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 30, 55, .18), 0 1px 2px rgba(15, 30, 55, .06);
    padding: 30px 32px 24px;
}
.ext-acceso-tarjeta-cab { margin-bottom: 14px; }
.ext-acceso-tarjeta-cab h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ext-primario, #1b3a6c); }
.ext-acceso-tarjeta-cab p { margin: 4px 0 0; font-size: 13px; color: #6c7787; }

/* Formularios de acceso / cuenta */
.ext-form { display: flex; flex-direction: column; }
.ext-lbl {
    font-size: 12px; color: #4a5566; margin: 12px 0 4px;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
}
.ext-lbl i { color: var(--ext-primario, #1f4a87); font-size: 13px; }
.ext-inp {
    height: 36px; padding: 6px 10px; border: 1px solid #c5cdda; border-radius: 6px;
    font-size: 14px; font-family: inherit; background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.ext-inp:hover { border-color: #9aa6b8; }
.ext-inp:focus { outline: none; border-color: var(--ext-acento, #3874cb); box-shadow: 0 0 0 3px rgba(56, 116, 203, .20); }
.ext-inp-ro { background: #f3f6fa; color: #4a5566; margin-top: 6px; }
.ext-btn {
    margin-top: 20px; height: 42px; border: 0; border-radius: 8px;
    background: linear-gradient(var(--ext-acento, #3b78c0), var(--ext-primario, #1f4a87));
    color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 4px 12px rgba(31, 74, 135, .30);
    transition: filter .12s ease, transform .08s ease;
}
.ext-btn:hover { filter: brightness(1.06); }
.ext-btn:active { transform: translateY(1px); filter: brightness(.96); }
.ext-btn:disabled { opacity: .6; cursor: default; }
.ext-form-pie { margin-top: 16px; text-align: center; font-size: 13px; }
.ext-form-pie a, .ext-acceso-tarjeta a { color: var(--ext-primario, #1f4a87); font-weight: 600; text-decoration: none; }
.ext-form-pie a:hover { text-decoration: underline; }
.ext-saludo { margin: 0 0 4px; font-size: 14.5px; color: #2b3640; font-weight: 600; }
.ext-reglas { list-style: none; padding: 0; margin: 12px 0 0; font-size: 12.5px; color: #6c7787; display: grid; gap: 3px; }
.ext-reglas li { display: flex; align-items: center; gap: 6px; }
.ext-reglas li.ext-regla-ok { color: #1d6f42; }

.ext-aviso {
    margin-top: 12px; padding: 10px 12px; border-radius: 6px; font-size: 12.5px;
    display: flex; align-items: flex-start; gap: 8px; line-height: 1.4;
}
.ext-aviso i { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.ext-aviso-error { background: #fde8e8; border: 1px solid #f5b1b1; border-left: 4px solid #c62828; color: #991b1b; }
.ext-aviso-ok { background: #e2f5e7; border: 1px solid #b7e0c5; border-left: 4px solid #1d6f42; color: #1d6f42; }
.ext-aviso-info { background: #eef4fc; border: 1px solid #c7d8ef; border-left: 4px solid var(--ext-acento, #2f6ec1); color: #1f4a87; }
.ext-aviso[hidden], .ext-form[hidden] { display: none; }

/* Portada con los dos accesos */
.ext-portada { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.ext-portada-btn {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; border-radius: 10px; border: 1px solid #c3ccd8;
    background: #f7f9fc; text-decoration: none; color: var(--ext-primario, #1f4a87);
}
.ext-portada-btn:hover { background: #e7f1ff; border-color: #7ba4d6; }
.ext-portada-btn i { font-size: 26px; }
.ext-portada-btn span { display: flex; flex-direction: column; }
.ext-portada-btn b { font-size: 15px; }
.ext-portada-btn small { color: #5b6677; font-size: 12px; font-weight: 400; }

/* ═══ Tonos de los apartados (ExtranetTonos, DOC 186 §4.1) ═══════════════════
   Cada apartado tiene su tono FIJO (--tono / --tono-suave / --tono-oscuro, que la
   pieza recibe en su atributo style desde C#: fuente única). El mismo tono pinta el
   botón de la cabecera, el tarjetón del Inicio y la banda de título de su pantalla.
   §2.43: el botón es una pastilla CLARA (fondo blanco, borde y texto en el tono) y
   así se lee sobre cualquier color de cabecera que elija el cliente; el activo va
   relleno del tono con texto blanco y un aro blanco que lo despega de la cabecera. */
.ext-menu { gap: 6px; padding: 3px 2px; }
.ext-menu-item {
    padding: 5px 12px 5px 10px; border-radius: 999px;
    background: #fff; color: var(--tono, #475569); border: 1px solid var(--tono, #475569);
    box-shadow: 0 1px 2px rgba(15, 30, 55, .18); opacity: 1; font-size: 13px;
    transition: background .12s ease, box-shadow .12s ease, transform .08s ease;
}
.ext-menu-item i { color: var(--tono, #475569); font-size: 14px; }
.ext-menu-item:hover {
    background: var(--tono-suave, #f1f5f9); color: var(--tono, #475569);
    box-shadow: 0 3px 8px rgba(15, 30, 55, .22); transform: translateY(-1px);
}
.ext-menu-item.active,
.ext-menu-item.active:hover {
    background: var(--tono, #475569); color: #fff; border-color: var(--tono, #475569);
    box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(15, 30, 55, .30); transform: none;
}
.ext-menu-item.active i { color: #fff; }

/* Banda de título con el tono del apartado (CabeceraApartado). */
.ext-apartado-tono {
    background: linear-gradient(180deg, var(--tono) 0%, var(--tono-oscuro) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 3px rgba(15, 30, 55, .20);
}

/* ═══ Inicio en tarjetones (DOC 186 §4.1) ═══════════════════════════════════
   Rejilla 2×2 que ocupa el alto del tapiz (sin scroll de página a 1920×1000); el
   tarjetón reparte su alto entre cabecera, KPI + gráfica y la lista, que es lo único
   que se recorta / desplaza si no cabe. Estrecho (§2.13): una columna y scroll. */
.ext-inicio { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ini-hola { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #475569; min-width: 0; }
.ini-hola > i { color: var(--ext-primario, #1f4a87); }
.ini-hola b { color: var(--ext-primario, #1f4a87); }
.ini-hola-tercero { margin-left: auto; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.ini-bienvenida { flex: 0 0 auto;
    font-size: 12.5px; color: #475569; padding: 6px 12px; border-radius: var(--ext-radio, 8px);
    background: rgba(255, 255, 255, .7); border: 1px solid #d4dbe6; border-left: 3px solid var(--ext-acento, #2f6ec1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ini-error { color: #8a1c1c; background: #fdecec; border: 1px solid #f5c2c2; border-radius: 6px; padding: 8px 12px; font-size: 13px; }

.ini-rejilla {
    flex: 1 1 auto; min-height: 0;
    display: grid; gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(280px, 1fr);
}
.ini-n1 { grid-template-columns: minmax(0, 1fr); }
.ini-n3 > :last-child { grid-column: 1 / -1; }

.ini-tarjeton {
    position: relative; min-height: 0; overflow: hidden; cursor: pointer;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, var(--tono-suave, #f1f5f9) 0, #fff 120px);
    border: 1px solid #c9d2de; border-top: 4px solid var(--tono, #475569);
    border-radius: calc(var(--ext-radio, 8px) + 4px);
    box-shadow: 0 1px 3px rgba(15, 30, 55, .10), 0 6px 18px -10px rgba(15, 30, 55, .25);
    transition: box-shadow .15s ease, transform .1s ease, border-color .15s ease;
}
.ini-tarjeton:hover { box-shadow: 0 2px 4px rgba(15, 30, 55, .10), 0 14px 30px -12px rgba(15, 30, 55, .35); transform: translateY(-2px); }
.ini-tarjeton:focus-visible { outline: 3px solid var(--tono, #475569); outline-offset: 2px; }
.ini-tarjeton::after {   /* marca de agua del tono en la esquina */
    content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, var(--tono-suave, #f1f5f9) 0%, transparent 70%); pointer-events: none;
}

.ini-cab { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.ini-ico {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tono, #475569); color: #fff; font-size: 17px;
    box-shadow: 0 4px 10px -4px var(--tono, #475569);
}
.ini-cab h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--tono-oscuro, #1e293b); }
.ini-ver { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tono, #475569); white-space: nowrap; opacity: .85; }
.ini-tarjeton:hover .ini-ver { opacity: 1; }
.ini-ver i { transition: transform .12s ease; display: inline-block; }
.ini-tarjeton:hover .ini-ver i { transform: translateX(3px); }

.ini-cuerpo {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: stretch;
    padding: 2px 14px 8px;
}
.ini-kpis { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ini-kpi { display: flex; flex-direction: column; line-height: 1.15; }
.ini-kpi > span, .ini-kpi-mini > span { font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.ini-kpi > b { font-size: 26px; font-weight: 800; color: var(--tono-oscuro, #1e293b); letter-spacing: -.3px; white-space: nowrap; }
.ini-kpi > small, .ini-kpi-mini > small { font-size: 11.5px; color: #64748b; }
.ini-kpi-fila { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.ini-kpi-mini {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; line-height: 1.2;
    padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0;
}
.ini-kpi-mini > b { font-size: 15px; font-weight: 800; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-kpi-mini > small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-kpi-mini.ini-grande > b { font-size: 26px; }
.ini-destacado { background: var(--tono-suave, #f1f5f9); border-color: transparent; border-left: 3px solid var(--tono, #475569); }
.ini-alerta { background: #fef2f2; border-color: #fecaca; }
.ini-alerta > b { color: #b91c1c; }
.ini-aviso { background: #fffbeb; border-color: #fde68a; }
.ini-aviso > b { color: #b45309; }
.ini-nota { font-size: 11.5px; color: #64748b; }
.ini-boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center;
    padding: 7px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap;
    background: var(--tono, #475569); color: #fff; font-size: 13px; font-weight: 700;
    box-shadow: 0 4px 12px -4px var(--tono, #475569);
}
.ini-boton:hover { color: #fff; filter: brightness(1.08); }
.ini-boton-mini { padding: 2px 10px; font-size: 11.5px; box-shadow: none; }
.ini-icono-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px;
    color: var(--tono, #475569); background: var(--tono-suave, #f1f5f9); text-decoration: none; font-size: 14px;
}
.ini-icono-btn:hover { background: var(--tono, #475569); color: #fff; }

.ini-grafica { min-width: 0; display: flex; }
.ini-mini { margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.ini-mini figcaption { font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.ini-mini > svg { width: 100%; height: 118px; display: block; }
.ini-eje { stroke: #cbd5e1; stroke-width: 1; }
.ini-barra { fill: var(--tono, #475569); opacity: .45; }
.ini-barra-actual { opacity: 1; }
.ini-mini g:hover .ini-barra { opacity: .85; }
.ini-valor { font-size: 9.5px; fill: #334155; text-anchor: middle; font-weight: 600; }
.ini-mes { font-size: 10px; fill: #64748b; text-anchor: middle; text-transform: capitalize; }
.ini-donut-caja { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ini-donut-caja > svg { width: 112px; height: 112px; flex: 0 0 auto; }
.ini-donut-fondo { fill: none; stroke: #eef2f7; stroke-width: 6; }
.ini-donut-total { font-size: 9px; font-weight: 800; fill: #1e293b; text-anchor: middle; }
.ini-donut-pie { font-size: 3.6px; fill: #64748b; text-anchor: middle; text-transform: uppercase; letter-spacing: .2px; }
.ini-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; color: #334155; min-width: 0; }
.ini-leyenda li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ini-leyenda b { margin-left: auto; padding-left: 8px; }
.ini-punto { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.ini-lista {
    position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow: auto;
    margin: 0 10px 10px; border-top: 1px solid #e2e8f0;
}
.ini-lista table { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.ini-lista td { padding: 5px 4px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ini-lista tr:last-child td { border-bottom: 0; }
.ini-lista tr:hover td { background: var(--tono-suave, #f8fafc); }
.ini-lista small { color: #64748b; }
.ini-lista .num { text-align: right; width: 108px; font-variant-numeric: tabular-nums; }
.ini-fecha { width: 82px; color: #475569; font-variant-numeric: tabular-nums; }
.ini-txt { width: auto; }
.ini-est { width: 104px; text-align: right; }
.ini-vacio { font-size: 12.5px; color: #6b7785; padding: 10px 4px; }
.ini-lista .ext-pill { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.ini-lista .est-pendiente { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.ini-lista .est-planificado { background: #eaf2fd; color: #1f4a87; border-color: #bcd3f1; }
.ini-lista .est-encurso { background: #fff7e6; color: #9a5b00; border-color: #f3d19c; }
.ini-lista .est-entregado { background: #e8f6ec; color: #1f7a34; border-color: #b7e0c2; }
.ini-lista .est-facturado { background: #f1ecfb; color: #5b3aa0; border-color: #d4c6f0; }
.ini-lista .est-anulado { background: #fdecec; color: #8a1c1c; border-color: #f5c2c2; }

/* Pantallas bajas (1366×768): gráfica y KPI más compactos para dejar sitio a la lista. */
@media (max-height: 820px) {
    .ini-mini > svg { height: 92px; }
    .ini-donut-caja > svg { width: 92px; height: 92px; }
    .ini-kpi > b, .ini-kpi-mini.ini-grande > b { font-size: 22px; }
    .ini-cab { padding: 8px 12px 4px; }
}

@media (max-width: 1100px) {
    .ini-rejilla { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; flex: 0 0 auto; }
    .ini-n3 > :last-child { grid-column: auto; }
    .ini-lista { overflow: visible; }
}
@media (max-width: 560px) {
    .ini-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .ini-hola-tercero { display: none; }
    .ini-fecha { width: 80px; }
    .ini-lista .num { width: 86px; }
    .ini-est { width: 84px; }
}

/* ═══ Responsive (móvil / ventana estrecha) ═══ */
@media (max-width: 900px) {
    .ext-acceso { grid-template-columns: 1fr; }
    .ext-acceso-hero { display: none; }
    .ext-cabecera { flex-wrap: wrap; gap: 8px; padding: 6px 10px; }
    .ext-menu { order: 3; flex-basis: 100%; }
    .ext-usuario-textos { display: none; }
    .ext-tapiz { padding: 10px; }
}

/* Selector de idioma (DOC 186 §3.7 / 186b). El marcado y la hoja son los COMUNES de todos los
   portales web (DisenoWebSelectorIdioma, inyectada en App.razor): aquí sólo dónde se coloca.
   En el acceso, pequeño en la esquina superior derecha de la tarjeta. */
.ext-idioma { display: inline-flex; }
.ext-acceso-tarjeta { position: relative; }
.ext-idioma--acceso { position: absolute; top: 12px; right: 12px; }

/* ═══ Barra inferior de los grids con color (encargo JJ 07/11) ══════════════════
   Cada botón (.bbtn del RCL) lleva un fondo suave y el icono en su color según el
   icono que pinta, así sirve en TODAS las pantallas de la extranet sin que ninguna
   tenga que marcar nada: Ver ficha azul, Excel verde, PDF rojo, Ver violeta,
   documentos ámbar, descargar azul petróleo, subir carmín. */
.ext-body .grid-bottom-bar { background: #f4f7fb; border-top: 1px solid #d6dfea; gap: 10px; }
.ext-body .grid-bottom-bar .bbtn {
    --bb: #2563eb; --bb-suave: #eef4ff; --bb-borde: #c9dafb;
    flex-direction: row; gap: 7px; min-width: 0; height: 34px; padding: 0 13px;
    background: var(--bb-suave); border: 1px solid var(--bb-borde); border-radius: 8px;
    font-size: 12.5px; font-weight: 600; color: #1e293b; text-decoration: none;
    box-shadow: 0 1px 2px rgba(15, 30, 55, .06); transition: background .12s, box-shadow .12s, transform .12s;
}
.ext-body .grid-bottom-bar .bbtn i { font-size: 17px; margin: 0; color: var(--bb); }
.ext-body .grid-bottom-bar .bbtn:hover:not(:disabled) {
    background: #fff; border-color: var(--bb); box-shadow: 0 2px 6px rgba(15, 30, 55, .14); transform: translateY(-1px);
}
.ext-body .grid-bottom-bar .bbtn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.ext-body .grid-bottom-bar .bbtn:has(.bi-file-earmark-excel),
.ext-body .grid-bottom-bar .bbtn:has(.bi-file-earmark-excel-fill) { --bb: #15803d; --bb-suave: #ecfdf3; --bb-borde: #b7e4c7; }
.ext-body .grid-bottom-bar .bbtn:has(.bi-file-earmark-pdf),
.ext-body .grid-bottom-bar .bbtn:has(.bi-file-earmark-pdf-fill) { --bb: #c2410c; --bb-suave: #fff3ec; --bb-borde: #f7cbb1; }
.ext-body .grid-bottom-bar .bbtn:has(.bi-box-arrow-up-right),
.ext-body .grid-bottom-bar .bbtn:has(.bi-eye),
.ext-body .grid-bottom-bar .bbtn:has(.bi-eye-fill) { --bb: #7c3aed; --bb-suave: #f5f0ff; --bb-borde: #dccbfb; }
.ext-body .grid-bottom-bar .bbtn:has(.bi-paperclip),
.ext-body .grid-bottom-bar .bbtn:has(.bi-folder2-open),
.ext-body .grid-bottom-bar .bbtn:has(.bi-file-earmark-text) { --bb: #b45309; --bb-suave: #fff7ed; --bb-borde: #f6d4a8; }
.ext-body .grid-bottom-bar .bbtn:has(.bi-download),
.ext-body .grid-bottom-bar .bbtn:has(.bi-file-earmark-zip) { --bb: #0e7490; --bb-suave: #ecfeff; --bb-borde: #b3e5ee; }
.ext-body .grid-bottom-bar .bbtn:has(.bi-upload),
.ext-body .grid-bottom-bar .bbtn:has(.bi-cloud-upload) { --bb: #be123c; --bb-suave: #fff1f2; --bb-borde: #f8c6d0; }

/* ═══ Documentos: iconos por tipo (ExtranetDocs.Css) ════════════════════════════ */
.doc-t-pdf    { --doc: #d92d20; --doc-suave: #fef1f0; }
.doc-t-imagen { --doc: #7c3aed; --doc-suave: #f5f0ff; }
.doc-t-xml    { --doc: #0e7490; --doc-suave: #ecfeff; }
.doc-t-zip    { --doc: #b45309; --doc-suave: #fff7ed; }
.doc-t-otro   { --doc: #475569; --doc-suave: #f1f5f9; }
.doc-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 9px; background: var(--doc-suave); color: var(--doc);
    font-size: 18px; border: 1px solid color-mix(in srgb, var(--doc) 22%, transparent);
}
.doc-accion {
    display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; flex: 0 0 auto;
    border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.doc-accion i { font-size: 14px; }
.doc-accion:disabled { opacity: .55; cursor: default; }
.doc-ver { background: #f5f0ff; color: #6d28d9; border-color: #dccbfb; }
.doc-ver:hover:not(:disabled) { background: #ede4ff; }
.doc-bajar { background: #ecfeff; color: #0e7490; border-color: #b3e5ee; }
.doc-bajar:hover:not(:disabled) { background: #dcf7fb; }

/* Celda «Doc.» de los grids (ExtranetDocs.Celda): clip con contador, pinchable. */
.ext-doc-btn {
    display: inline-flex; align-items: center; gap: 3px; height: 24px; padding: 0 8px;
    border-radius: 999px; border: 1px solid #f6d4a8; background: #fff7ed; color: #b45309;
    font-size: 12px; font-weight: 700; cursor: pointer; line-height: 1;
}
.ext-doc-btn i { font-size: 14px; }
.ext-doc-btn:hover { background: #b45309; border-color: #b45309; color: #fff; }
.ext-doc-num { min-width: 8px; }

/* Lista de documentos de una fila (DocumentosFila). */
.dfi-fondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 18px; }
.dfi-panel {
    width: min(620px, 100%); max-height: min(640px, 100%); display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #c3ccd8; border-radius: var(--ext-radio, 8px); box-shadow: 0 14px 44px rgba(15, 30, 55, .32);
}
.dfi-cab {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    background: linear-gradient(180deg, var(--ext-acento, #2f6ec1) 0%, var(--ext-primario, #1f4a87) 100%);
    color: var(--ext-texto-cabecera, #fff);
}
.dfi-cab > i { font-size: 17px; }
.dfi-titulo { font-size: 15px; font-weight: 700; }
.dfi-spacer { flex: 1 1 auto; }
.dfi-cerrar { background: transparent; border: 0; color: inherit; font-size: 18px; cursor: pointer; padding: 0 4px; }
.dfi-cuerpo { padding: 10px 14px; overflow: auto; background: #f7f9fc; display: flex; flex-direction: column; gap: 6px; }
.dfi-aviso { padding: 18px 6px; text-align: center; color: #64748b; font-size: 13.5px; }
.dfi-error { color: #8a1c1c; }
.dfi-fila {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 9px;
}
.dfi-textos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
.dfi-nombre { font-size: 13px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dfi-meta { font-size: 11.5px; color: #64748b; }

/* ═══ Visor de documentos (VisorDocumento) ═════════════════════════════════════ */
.vd-fondo { position: fixed; inset: 0; background: rgba(15, 23, 42, .6); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 14px; }
.vd-panel {
    width: min(1280px, 100%); height: 100%; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 10px; box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.vd-cab {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px;
    background: linear-gradient(180deg, var(--ext-acento, #2f6ec1) 0%, var(--ext-primario, #1f4a87) 100%);
    color: var(--ext-texto-cabecera, #fff);
}
.vd-icono { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: #fff; color: var(--doc); font-size: 18px; flex: 0 0 auto; }
.vd-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.vd-titulo { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.vd-sub { font-size: 12px; opacity: .85; }
.vd-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; background: rgba(255, 255, 255, .14); border-radius: 8px; padding: 2px; }
.vd-nav-btn { width: 30px; height: 28px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.vd-nav-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.vd-nav-btn:disabled { opacity: .4; cursor: default; }
.vd-pos { font-size: 12.5px; font-weight: 600; padding: 0 4px; white-space: nowrap; }
.vd-spacer { flex: 1 1 auto; }
.vd-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px;
    border-radius: 8px; border: 1px solid transparent; font-size: 13px; font-weight: 700; cursor: pointer;
}
.vd-btn i { font-size: 15px; }
.vd-btn:disabled { opacity: .5; cursor: default; }
.vd-imprimir { background: #fff; color: #1f4a87; border-color: #fff; }
.vd-imprimir:hover:not(:disabled) { background: #eef4ff; }
.vd-descargar { background: #0e9f6e; color: #fff; border-color: #0b8a5f; }
.vd-descargar:hover:not(:disabled) { background: #0b8a5f; }
.vd-cerrar { background: transparent; border: 0; color: inherit; font-size: 20px; cursor: pointer; padding: 0 4px 0 6px; }
.vd-cuerpo { flex: 1 1 auto; min-height: 0; background: #525659; display: flex; }
.vd-iframe { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #fff; }
.vd-imagen { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 12px; }
.vd-imagen img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.vd-aviso { margin: auto; color: #f1f5f9; font-size: 14px; }
.vd-error { color: #fecaca; }
.vd-sin-vista { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; color: #f1f5f9; font-size: 14px; }
.vd-sin-icono { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 16px; background: #fff; color: var(--doc); font-size: 40px; }
@media (max-width: 700px) {
    .vd-btn span { display: none; }
    .vd-titulo { max-width: 40vw; }
}

/* ═══ Ficha de factura a pantalla completa (clientes y proveedores, prefijo fxf-) ══
   Encargo JJ 07/11: cabecera arriba, «Descargar todo» en otro tono, franja de
   documentos de la factura y el LISTADO de pedidos / viajes con buscador y, a la
   derecha, los documentos de la fila elegida. Global porque la usan las dos fichas
   (FacturaFichaDialog de clientes y la de proveedores). */
.fxf-cargando { padding: 30px; color: #64748b; text-align: center; }
.fxf-zip {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; margin-right: 6px;
    border-radius: 8px; border: 1px solid #d97706; background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    color: #422006; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.fxf-zip i { font-size: 16px; }
.fxf-zip:hover:not(:disabled) { background: linear-gradient(180deg, #fcd34d 0%, #fbbf24 100%); }
.fxf-zip:disabled { opacity: .65; cursor: default; }

.fxf-cab {
    display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto;
    padding: 10px 12px; background: #fff; border: 1px solid #d4dbe6; border-radius: var(--ext-radio, 8px);
    border-top: 4px solid var(--ext-primario, #1f4a87);
}
.fxf-dato {
    display: flex; flex-direction: column; justify-content: center; min-width: 120px; flex: 1 1 120px;
    padding: 4px 12px; border-left: 3px solid #e2e8f0; line-height: 1.25;
}
.fxf-dato span { font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.fxf-dato b { font-size: 16px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxf-dato small { font-size: 12px; color: #64748b; }
.fxf-dato-num b { font-size: 18px; color: var(--ext-primario, #1f4a87); }
.fxf-dato-parte { flex: 2 1 200px; min-width: 180px; }
.fxf-dato-parte b { font-size: 14.5px; }
.fxf-dato-total { background: #f0f6ff; border-left-color: var(--ext-primario, #1f4a87); border-radius: 0 8px 8px 0; }
.fxf-dato-total b { font-size: 19px; color: var(--ext-primario, #1f4a87); }

.fxf-franja {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-top: 10px;
    padding: 8px 12px; background: #fff; border: 1px solid #d4dbe6; border-radius: var(--ext-radio, 8px);
}
.fxf-franja-titulo { flex: 0 0 auto; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ext-primario, #1f4a87); }
.fxf-vacio { font-size: 13px; color: #6b7785; }
.fxf-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; min-width: 0; }
.fxf-chip {
    display: inline-flex; align-items: stretch; flex: 0 0 auto; max-width: 280px;
    border: 1px solid color-mix(in srgb, var(--doc) 30%, #e2e8f0); border-radius: 10px; background: var(--doc-suave); overflow: hidden;
}
.fxf-chip-abrir {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px 5px 6px;
    border: 0; background: transparent; cursor: pointer; text-align: left;
}
.fxf-chip-abrir:hover { background: color-mix(in srgb, var(--doc) 10%, #fff); }
.fxf-chip .doc-ico { width: 30px; height: 30px; font-size: 16px; background: #fff; }
.fxf-chip-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.fxf-chip-clase { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--doc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxf-chip-nombre { font-size: 12.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxf-chip-bajar {
    flex: 0 0 auto; width: 34px; border: 0; border-left: 1px solid color-mix(in srgb, var(--doc) 25%, #e2e8f0);
    background: #fff; color: #0e7490; cursor: pointer; font-size: 15px;
}
.fxf-chip-bajar:hover { background: #ecfeff; }

.fxf-pedidos {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin-top: 10px;
    background: #fff; border: 1px solid #d4dbe6; border-radius: var(--ext-radio, 8px); overflow: hidden;
}
.fxf-ped-cab { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.fxf-ped-titulo { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ext-primario, #1f4a87); white-space: nowrap; }
.fxf-buscar { position: relative; flex: 1 1 auto; max-width: 620px; }
.fxf-buscar i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #64748b; font-size: 14px; }
.fxf-buscar input { width: 100%; height: 32px; padding-left: 32px; border-radius: 8px; }
.fxf-ped-cuenta { margin-left: auto; font-size: 12.5px; font-weight: 600; color: #475569; white-space: nowrap; }
.fxf-ped-cuerpo { display: flex; flex: 1 1 auto; min-height: 0; }
.fxf-ped-grid { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; }
.fxf-ped-grid .grid-panel { flex: 1 1 auto; height: 100%; min-height: 0; }
.fxf-ped-docs {
    flex: 0 0 360px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; overflow: auto;
    border-left: 1px solid #e2e8f0; background: #f7f9fc;
}
.fxf-ped-docs-titulo { display: flex; flex-direction: column; line-height: 1.25; padding-bottom: 6px; border-bottom: 1px solid #e2e8f0; margin-bottom: 2px; }
.fxf-ped-docs-titulo span { font-size: 13.5px; color: #1e293b; }
.fxf-ped-docs-titulo small { font-size: 12px; color: #64748b; }
.fxf-ped-docs-vacio { padding: 20px 6px; text-align: center; color: #64748b; font-size: 13px; }
.fxf-doc { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; }
.fxf-doc-textos { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
.fxf-doc-nombre { font-size: 12.5px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxf-doc-meta { font-size: 11px; color: #64748b; }
.fxf-error { margin-top: 8px; color: #8a1c1c; background: #fdecec; border: 1px solid #f5c2c2; border-radius: 6px; padding: 6px 10px; font-size: 13px; flex: 0 0 auto; }
@media (max-width: 1100px) {
    .fxf-ped-docs { flex-basis: 280px; }
}
@media (max-width: 800px) {
    .fxf-ped-cuerpo { flex-direction: column; }
    .fxf-ped-docs { flex: 0 0 auto; max-height: 40%; border-left: 0; border-top: 1px solid #e2e8f0; }
}

/* ═══ KPIs de las pantallas de facturas (clientes y proveedores) ═════════════════ */
.fac-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fac-tarjeta {
    display: flex; flex-direction: column; gap: 2px; padding: 9px 14px;
    background: #fff; border: 1px solid #c3ccd8; border-left: 4px solid var(--tono, var(--ext-primario, #1f4a87));
    border-radius: var(--ext-radio, 8px); box-shadow: 0 1px 3px rgba(31, 74, 135, .10);
}
.fac-tarjeta span { font-size: 11.5px; color: #64748b; text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.fac-tarjeta b { font-size: 18px; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fac-tarjeta small { font-size: 12px; color: #64748b; }
.fac-tarjeta.fac-principal { background: var(--tono-suave, #f0f6ff); }
.fac-tarjeta.fac-principal b { color: var(--tono-oscuro, #1f4a87); font-size: 20px; }
/* PDF pintado con PDF.js (extranetVisorPdf): páginas centradas con sombra. */
.vd-cuerpo { position: relative; }
.vd-pdf { flex: 1 1 auto; min-width: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px; }
.vd-pdf:empty::before { content: "Preparando las páginas…"; margin: auto; color: #f1f5f9; font-size: 14px; }
.vd-pagina { flex: 0 0 auto; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
.vd-iframe-oculto { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

/* ── Modo diseño (Diseñador web del ERP, DOC 186 §3.7.1) ─────────────────────────────
   Sólo con body.ext-dw: la página real en el iframe del diseñador, con datos de ejemplo.
   Lo oculto en el borrador sigue a la vista, atenuado y tachado, para poder enseñarlo. */
.dw-grid { display: contents; }
.ext-dw .dw-off { opacity: .45; }
.ext-dw .ext-menu-item.dw-off > span { text-decoration: line-through; }
.ext-dw .ini-tarjeton.dw-off { filter: grayscale(.6); }
.ext-dw .dw-ojo { font-size: 12px; margin-left: 2px; }
.ext-dw-pie {
    flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 6px 18px; font-size: 12.5px; color: #475569;
    background: #fff; border-top: 1px solid #dde3ec;
}
.ext-dw-pie-sep { flex: 1 1 auto; }
/* Pie propio y contacto del diseño PUBLICADO (extranet real, DOC 186b). */
.ext-pie-empresa a { color: inherit; text-decoration: none; }
.ext-pie-empresa a:hover { text-decoration: underline; }
.ext-dw-pie [data-dw="contacto"] { display: inline-flex; gap: 14px; }