/* =====================================================================================================
Sistema de diseño Deltavantia (dv) · https://deltavantia.com
Fuente única: /opt/apps/git/deltavantia-diseno.git. Cada app lleva una COPIA de esta carpeta: no se edita
allí, se cambia aquí y se copia con herramientas/copiar_a.py.
- Todo va dentro de @layer: el CSS antiguo de cada app (sin capa) gana siempre, así conviven durante la migración.
- Clases con prefijo dv- y modificadores que empiezan por guion: .dv-boton.-principal
- Tema: ; sin atributo se sigue al sistema.
===================================================================================================== */
@layer dv.base, dv.componentes, dv.utilidades;
/* ---------- Fuentes (autoalojadas, OFL-1.1; la versión va en el nombre: se pueden cachear para siempre) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
src: url(fuentes/ibm-plex-sans-latin-400-5.3.0.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
src: url(fuentes/ibm-plex-sans-latin-500-5.3.0.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600 700; font-display: swap;
src: url(fuentes/ibm-plex-sans-latin-600-5.3.0.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
src: url(fuentes/ibm-plex-mono-latin-400-5.3.0.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500 700; font-display: swap;
src: url(fuentes/ibm-plex-mono-latin-500-5.3.0.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque Variable"; font-style: normal; font-weight: 200 800; font-display: swap;
src: url(fuentes/bricolage-grotesque-latin-var-5.3.0.woff2) format("woff2-variations"); }
@layer dv.base {
/* ---------- Tokens · tema claro (por defecto) ---------- */
:root {
color-scheme: light;
--dv-fondo: #F4F6F9;
--dv-superficie: #FFFFFF;
--dv-superficie-2: #EEF2F7;
--dv-superficie-3: #E3E9F1;
--dv-texto: #0B1626;
--dv-texto-2: #3D4B5E;
--dv-texto-suave: #5A6778;
--dv-borde: #D5DCE5; /* decorativo */
--dv-borde-campo: #7D8A9C; /* contorno de controles (3:1, WCAG 1.4.11) */
--dv-acento: #F5B301; /* ámbar de la marca: acción principal, apartado activo, «hoy», agente de voz */
--dv-acento-hover: #E0A200;
--dv-sobre-acento: #0B1626;
--dv-acento-borde: #B07F00; /* el ámbar sobre blanco no llega a 3:1: el botón lleva borde */
--dv-acento-tinta: #8A5A00; /* ámbar como texto */
--dv-acento-suave: #FFF4D1;
--dv-foco: #3A7BF0; /* el #4C8DFF de la web no llega a 3:1 sobre el fondo claro; en oscuro sí se usa */
--dv-enlace: #1D5BD6;
--dv-ok: #137A3F; --dv-ok-fondo: #E6F4EC;
--dv-aviso: #B54708; --dv-aviso-fondo: #FEF0E6; /* naranja tostado: nunca el ámbar de la marca */
--dv-error: #C0262D; --dv-error-fondo: #FDECEC;
--dv-info: #1D5BD6; --dv-info-fondo: #E8F0FE;
--dv-inactivo: #5F6A78;
--dv-peligro: #C0262D; --dv-sobre-peligro: #FFFFFF;
/* Barra lateral: azul marino en los dos temas */
--dv-barra-fondo: #0B1626;
--dv-barra-activo: #172A45;
--dv-barra-borde: #223757;
--dv-barra-texto: #F1F4F8;
--dv-barra-suave: #9AA8BC;
--dv-barra-indicador: #FFC63A;
/* Tipografía */
--dv-fuente: "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
--dv-fuente-titulos: "Bricolage Grotesque Variable", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
--dv-fuente-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--dv-t-xs: 0.75rem; /* 12 */
--dv-t-s: 0.8125rem; /* 13 */
--dv-t-m: 0.9375rem; /* 15: texto normal */
--dv-t-l: 1.0625rem; /* 17 */
--dv-t-xl: 1.25rem; /* 20 */
--dv-t-2xl: 1.5rem; /* 24 */
--dv-t-3xl: 1.875rem; /* 30 */
/* Espaciado (base 4 px) */
--dv-e-1: 0.25rem; --dv-e-2: 0.5rem; --dv-e-3: 0.75rem; --dv-e-4: 1rem;
--dv-e-5: 1.25rem; --dv-e-6: 1.5rem; --dv-e-7: 2rem; --dv-e-8: 3rem;
/* Formas */
--dv-radio-s: 4px; --dv-radio-m: 8px; --dv-radio-l: 14px;
--dv-sombra-1: 0 1px 2px rgba(11, 22, 38, .06), 0 1px 3px rgba(11, 22, 38, .08);
--dv-sombra-2: 0 4px 12px -2px rgba(11, 22, 38, .12);
--dv-sombra-3: 0 20px 50px -20px rgba(11, 22, 38, .35);
--dv-duracion: 120ms;
--dv-control-alto: 2.25rem; /* 36 px */
--dv-ancho-barra: 15rem;
--dv-ancho-barra-plegada: 4rem;
}
/* ---------- Tokens · tema oscuro (derivado de la web) ---------- */
@media (prefers-color-scheme: dark) {
:root:not([data-tema="claro"]) {
color-scheme: dark;
--dv-fondo: #0B1626; --dv-superficie: #122238; --dv-superficie-2: #182C46; --dv-superficie-3: #1F3656;
--dv-texto: #F1F4F8; --dv-texto-2: #C5CDD8; --dv-texto-suave: #9AA8BC;
--dv-borde: #243854; --dv-borde-campo: #5B7598;
--dv-acento: #FFC63A; --dv-acento-hover: #F5B301; --dv-sobre-acento: #0B1626; --dv-acento-borde: #FFC63A;
--dv-acento-tinta: #FFC63A; --dv-acento-suave: rgba(255, 198, 58, .14);
--dv-enlace: #7FB0FF; --dv-foco: #4C8DFF;
--dv-ok: #4ADE80; --dv-ok-fondo: rgba(74, 222, 128, .12);
--dv-aviso: #FF9F43; --dv-aviso-fondo: rgba(255, 159, 67, .12);
--dv-error: #FF7A7A; --dv-error-fondo: rgba(255, 122, 122, .12);
--dv-info: #7FB0FF; --dv-info-fondo: rgba(127, 176, 255, .12);
--dv-inactivo: #9AA8BC;
--dv-peligro: #FF7A7A; --dv-sobre-peligro: #0B1626;
--dv-barra-fondo: #060D18;
--dv-sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
--dv-sombra-2: 0 6px 16px -4px rgba(0, 0, 0, .5);
--dv-sombra-3: 0 20px 50px -20px rgba(0, 0, 0, .7);
}
}
:root[data-tema="oscuro"] {
color-scheme: dark;
--dv-fondo: #0B1626; --dv-superficie: #122238; --dv-superficie-2: #182C46; --dv-superficie-3: #1F3656;
--dv-texto: #F1F4F8; --dv-texto-2: #C5CDD8; --dv-texto-suave: #9AA8BC;
--dv-borde: #243854; --dv-borde-campo: #5B7598;
--dv-acento: #FFC63A; --dv-acento-hover: #F5B301; --dv-sobre-acento: #0B1626; --dv-acento-borde: #FFC63A;
--dv-acento-tinta: #FFC63A; --dv-acento-suave: rgba(255, 198, 58, .14);
--dv-enlace: #7FB0FF; --dv-foco: #4C8DFF;
--dv-ok: #4ADE80; --dv-ok-fondo: rgba(74, 222, 128, .12);
--dv-aviso: #FF9F43; --dv-aviso-fondo: rgba(255, 159, 67, .12);
--dv-error: #FF7A7A; --dv-error-fondo: rgba(255, 122, 122, .12);
--dv-info: #7FB0FF; --dv-info-fondo: rgba(127, 176, 255, .12);
--dv-inactivo: #9AA8BC;
--dv-peligro: #FF7A7A; --dv-sobre-peligro: #0B1626;
--dv-barra-fondo: #060D18;
--dv-sombra-1: 0 1px 2px rgba(0, 0, 0, .4);
--dv-sombra-2: 0 6px 16px -4px rgba(0, 0, 0, .5);
--dv-sombra-3: 0 20px 50px -20px rgba(0, 0, 0, .7);
}
@media (prefers-reduced-motion: reduce) { :root { --dv-duracion: 0ms; } }
@media (pointer: coarse) { :root { --dv-control-alto: 2.75rem; } }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--dv-fondo); color: var(--dv-texto);
font-family: var(--dv-fuente); font-size: var(--dv-t-m); line-height: 1.45;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2 { font-family: var(--dv-fuente-titulos); font-optical-sizing: auto; letter-spacing: -0.015em; margin: 0 0 var(--dv-e-3); }
h1 { font-size: var(--dv-t-2xl); font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: var(--dv-t-m); font-weight: 600; margin: 0 0 var(--dv-e-2); }
p { margin: 0 0 var(--dv-e-3); }
a { color: var(--dv-enlace); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, kbd, samp, pre { font-family: var(--dv-fuente-mono); font-size: 0.92em; }
hr { border: 0; border-top: 1px solid var(--dv-borde); margin: var(--dv-e-5) 0; }
::selection { background: var(--dv-acento-suave); color: var(--dv-texto); }
:focus-visible { outline: 2px solid var(--dv-foco); outline-offset: 2px; }
[hidden] { display: none !important; }
img, svg { vertical-align: middle; }
}
@layer dv.componentes {
/* ---------- Icono (sprite: ) ---------- */
.dv-icono {
width: 1.125em; height: 1.125em; flex: none;
fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.dv-icono.-s { width: 1em; height: 1em; }
.dv-icono.-l { width: 1.5em; height: 1.5em; }
.dv-girar { animation: dv-girar 0.9s linear infinite; }
@keyframes dv-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dv-girar { animation: none; } }
/* ---------- Estructura de la aplicación ---------- */
.dv-saltar {
position: absolute; left: var(--dv-e-3); top: -3rem; z-index: 100; padding: var(--dv-e-2) var(--dv-e-3);
background: var(--dv-acento); color: var(--dv-sobre-acento); border-radius: var(--dv-radio-m); font-weight: 600;
}
.dv-saltar:focus { top: var(--dv-e-3); }
.dv-app { display: grid; grid-template-columns: var(--dv-ancho-barra) minmax(0, 1fr); min-height: 100dvh; }
:root[data-barra="plegada"] .dv-app { grid-template-columns: var(--dv-ancho-barra-plegada) minmax(0, 1fr); }
.dv-contenido { min-width: 0; padding: var(--dv-e-6) var(--dv-e-7) var(--dv-e-8); }
/* Barra lateral */
.dv-barra {
position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column;
background: var(--dv-barra-fondo); color: var(--dv-barra-texto); border-right: 1px solid var(--dv-barra-borde);
padding: var(--dv-e-4) var(--dv-e-3);
}
.dv-barra a, .dv-barra button { color: inherit; }
.dv-barra-nav { display: flex; flex-direction: column; gap: 2px; margin-top: var(--dv-e-5); }
.dv-barra-titulo {
margin: var(--dv-e-4) var(--dv-e-2) var(--dv-e-1); font-size: var(--dv-t-xs); font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--dv-barra-suave);
}
.dv-barra-enlace {
position: relative; display: flex; align-items: center; gap: var(--dv-e-3);
min-height: var(--dv-control-alto); padding: var(--dv-e-2) var(--dv-e-3); border-radius: var(--dv-radio-m);
color: var(--dv-barra-suave) !important; text-decoration: none; font-weight: 500; white-space: nowrap;
background: none; border: 0; font: inherit; cursor: pointer; width: 100%; text-align: left;
transition: background var(--dv-duracion), color var(--dv-duracion);
}
.dv-barra-enlace:hover { background: var(--dv-barra-activo); color: var(--dv-barra-texto) !important; }
.dv-barra-enlace[aria-current="page"] { background: var(--dv-barra-activo); color: var(--dv-barra-texto) !important; }
.dv-barra-enlace[aria-current="page"]::before {
content: ""; position: absolute; left: calc(-1 * var(--dv-e-3)); top: 6px; bottom: 6px; width: 3px;
border-radius: 0 3px 3px 0; background: var(--dv-barra-indicador);
}
.dv-barra-enlace .dv-icono { width: 1.25rem; height: 1.25rem; }
.dv-barra-pie { margin-top: auto; padding-top: var(--dv-e-4); border-top: 1px solid var(--dv-barra-borde); display: flex; flex-direction: column; gap: 2px; }
.dv-barra-usuario { padding: var(--dv-e-2) var(--dv-e-3); font-size: var(--dv-t-s); color: var(--dv-barra-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-barra-usuario strong { display: block; color: var(--dv-barra-texto); font-weight: 600; }
.dv-barra .dv-barra-menu { display: none; } /* más específico que .dv-boton: solo se ve en pantallas estrechas */
:root[data-barra="plegada"] .dv-barra .dv-texto-barra,
:root[data-barra="plegada"] .dv-barra-titulo,
:root[data-barra="plegada"] .dv-barra-usuario { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-barra="plegada"] .dv-barra-enlace { justify-content: center; padding-inline: 0; }
:root[data-barra="plegada"] .dv-marca { justify-content: center; }
/* Marca: triángulo «delta» + Deltavantia + producto */
.dv-marca {
display: flex; align-items: center; gap: var(--dv-e-3); padding: 0 var(--dv-e-2); color: var(--dv-barra-texto) !important;
text-decoration: none; font-family: var(--dv-fuente-titulos); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em;
}
.dv-marca svg { width: 2rem; height: 2rem; flex: none; }
.dv-marca em { font-style: normal; color: var(--dv-barra-indicador); }
.dv-marca small {
display: block; font-family: var(--dv-fuente); font-weight: 500; font-size: var(--dv-t-xs); letter-spacing: .04em;
text-transform: uppercase; color: var(--dv-barra-suave);
}
@media (max-width: 760px) {
.dv-app, :root[data-barra="plegada"] .dv-app { grid-template-columns: minmax(0, 1fr); }
.dv-barra { position: sticky; top: 0; z-index: 30; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--dv-e-2) var(--dv-e-3); }
.dv-barra .dv-barra-menu { display: inline-flex; margin-left: auto; color: var(--dv-barra-texto); }
.dv-barra-nav, .dv-barra-pie { display: none; flex-basis: 100%; }
.dv-barra[data-abierta] .dv-barra-nav, .dv-barra[data-abierta] .dv-barra-pie { display: flex; }
.dv-barra [data-dv-plegar] { display: none; }
.dv-contenido { padding: var(--dv-e-4) var(--dv-e-4) var(--dv-e-7); }
}
/* ---------- Pantallas públicas (acceso, error sin sesión) ---------- */
.dv-publico {
min-height: 100dvh; display: grid; place-items: center; padding: var(--dv-e-5);
background: radial-gradient(60rem 30rem at 85% -10%, rgba(255, 198, 58, .10), transparent 60%), var(--dv-barra-fondo);
}
.dv-acceso {
width: min(25rem, 100%); background: var(--dv-superficie); color: var(--dv-texto); border-radius: var(--dv-radio-l);
padding: var(--dv-e-7); box-shadow: var(--dv-sombra-3);
}
.dv-acceso .dv-marca { color: var(--dv-texto) !important; padding: 0; margin-bottom: var(--dv-e-6); }
.dv-acceso .dv-marca em { color: var(--dv-acento-tinta); }
.dv-acceso .dv-marca small { color: var(--dv-texto-suave); }
.dv-acceso h1 { font-size: var(--dv-t-xl); }
.dv-acceso .dv-boton { width: 100%; margin-top: var(--dv-e-2); }
/* ---------- Cabecera de página ---------- */
.dv-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-e-3) var(--dv-e-4); margin-bottom: var(--dv-e-5); }
.dv-cabecera h1 { margin: 0; display: flex; align-items: center; gap: var(--dv-e-3); }
.dv-cabecera h1 .dv-icono { color: var(--dv-texto-suave); }
.dv-cabecera-sub { flex-basis: 100%; margin: calc(-1 * var(--dv-e-2)) 0 0; color: var(--dv-texto-suave); }
.dv-cabecera-acciones { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--dv-e-2); }
/* ---------- Botones ---------- */
.dv-boton {
display: inline-flex; align-items: center; justify-content: center; gap: var(--dv-e-2);
min-height: var(--dv-control-alto); padding: 0 var(--dv-e-4); border-radius: var(--dv-radio-m);
font: inherit; font-weight: 500; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
border: 1px solid var(--dv-borde-campo); background: var(--dv-superficie); color: var(--dv-texto);
transition: background var(--dv-duracion), border-color var(--dv-duracion), color var(--dv-duracion);
}
.dv-boton:hover { background: var(--dv-superficie-2); }
.dv-boton.-principal { background: var(--dv-acento); border-color: var(--dv-acento-borde); color: var(--dv-sobre-acento); font-weight: 600; }
.dv-boton.-principal:hover { background: var(--dv-acento-hover); }
.dv-boton.-fantasma { background: transparent; border-color: transparent; }
.dv-boton.-fantasma:hover { background: var(--dv-superficie-2); }
.dv-boton.-peligro { background: var(--dv-peligro); border-color: var(--dv-peligro); color: var(--dv-sobre-peligro); }
.dv-boton.-peligro:hover { filter: brightness(.94); }
.dv-boton.-pequeno { min-height: 1.875rem; padding: 0 var(--dv-e-3); font-size: var(--dv-t-s); }
.dv-boton.-icono { padding: 0; width: var(--dv-control-alto); }
.dv-boton.-icono.-pequeno { width: 1.875rem; }
.dv-boton:disabled, .dv-boton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.dv-boton[aria-busy="true"] { cursor: progress; }
.dv-boton[aria-pressed="true"], .dv-boton[aria-current="true"], .dv-boton[aria-current="page"] {
background: var(--dv-superficie-3); border-color: var(--dv-texto-2); font-weight: 600;
}
/* ---------- Formularios ---------- */
.dv-campo { display: flex; flex-direction: column; gap: var(--dv-e-1); margin-bottom: var(--dv-e-4); min-width: 0; }
.dv-campo > label, .dv-etiqueta { font-weight: 500; font-size: var(--dv-t-s); color: var(--dv-texto-2); }
.dv-campo .dv-requerido { color: var(--dv-error); }
.dv-control {
width: 100%; min-height: var(--dv-control-alto); padding: var(--dv-e-2) var(--dv-e-3);
border: 1px solid var(--dv-borde-campo); border-radius: var(--dv-radio-m);
background: var(--dv-superficie); color: var(--dv-texto); font: inherit; line-height: 1.3;
transition: border-color var(--dv-duracion), box-shadow var(--dv-duracion);
}
textarea.dv-control { min-height: 5rem; resize: vertical; }
select.dv-control { padding-right: var(--dv-e-6); }
.dv-control::placeholder { color: var(--dv-texto-suave); }
.dv-control:focus { outline: none; border-color: var(--dv-foco); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dv-foco) 30%, transparent); }
.dv-control:disabled { background: var(--dv-superficie-2); color: var(--dv-texto-suave); }
.dv-control[aria-invalid="true"], .dv-control.-error { border-color: var(--dv-error); }
.dv-ayuda { margin: 0; font-size: var(--dv-t-s); color: var(--dv-texto-suave); }
.dv-error-campo { margin: 0; font-size: var(--dv-t-s); color: var(--dv-error); display: flex; gap: var(--dv-e-1); align-items: center; }
.dv-casilla { display: inline-flex; align-items: center; gap: var(--dv-e-2); cursor: pointer; }
.dv-casilla input { width: 1.05rem; height: 1.05rem; accent-color: var(--dv-acento-borde); margin: 0; }
.dv-rejilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--dv-e-4); }
/* ---------- Tabla ---------- */
.dv-tabla-contenedor { overflow-x: auto; border: 1px solid var(--dv-borde); border-radius: var(--dv-radio-m); background: var(--dv-superficie); }
.dv-tabla { width: 100%; border-collapse: collapse; font-size: var(--dv-t-m); }
.dv-tabla caption { text-align: left; padding: var(--dv-e-3) var(--dv-e-4); font-weight: 600; }
.dv-tabla th, .dv-tabla td { padding: var(--dv-e-3) var(--dv-e-4); text-align: left; border-bottom: 1px solid var(--dv-borde); vertical-align: middle; }
.dv-tabla thead th {
position: sticky; top: 0; background: var(--dv-superficie-2); font-size: var(--dv-t-s); font-weight: 600; color: var(--dv-texto-2); white-space: nowrap;
}
.dv-tabla tbody tr:last-child td { border-bottom: 0; }
.dv-tabla tbody tr:hover { background: color-mix(in srgb, var(--dv-superficie-2) 60%, transparent); }
.dv-tabla tr[aria-selected="true"] { background: var(--dv-acento-suave); }
.dv-tabla.-densa th, .dv-tabla.-densa td { padding: var(--dv-e-2) var(--dv-e-3); font-size: var(--dv-t-s); }
.dv-tabla .-num, .dv-tabla td.-num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- Insignia (estado: siempre icono + texto) ---------- */
.dv-insignia {
display: inline-flex; align-items: center; gap: var(--dv-e-1); padding: 1px var(--dv-e-2);
border-radius: 999px; font-size: var(--dv-t-xs); font-weight: 600; line-height: 1.5; white-space: nowrap;
background: var(--dv-superficie-2); color: var(--dv-texto-2); border: 1px solid transparent;
}
.dv-insignia .dv-icono { width: 0.95rem; height: 0.95rem; }
.dv-insignia.-info { background: var(--dv-info-fondo); color: var(--dv-info); }
.dv-insignia.-ok { background: var(--dv-ok-fondo); color: var(--dv-ok); }
.dv-insignia.-aviso { background: var(--dv-aviso-fondo); color: var(--dv-aviso); }
.dv-insignia.-error { background: var(--dv-error-fondo); color: var(--dv-error); }
.dv-insignia.-inactivo { background: var(--dv-superficie-2); color: var(--dv-inactivo); }
.dv-insignia.-marca { background: var(--dv-acento-suave); color: var(--dv-acento-tinta); border-color: color-mix(in srgb, var(--dv-acento) 45%, transparent); }
/* ---------- Tarjeta ---------- */
.dv-tarjeta {
background: var(--dv-superficie); border: 1px solid var(--dv-borde); border-radius: var(--dv-radio-l);
padding: var(--dv-e-5); box-shadow: var(--dv-sombra-1); margin-bottom: var(--dv-e-4);
}
.dv-tarjeta > h2:first-child, .dv-tarjeta > h3:first-child { margin-top: 0; }
.dv-tarjeta.-ok { border-left: 4px solid var(--dv-ok); }
.dv-tarjeta.-aviso { border-left: 4px solid var(--dv-aviso); }
.dv-tarjeta.-error { border-left: 4px solid var(--dv-error); }
.dv-tarjeta.-info { border-left: 4px solid var(--dv-info); }
/* ---------- Avisos ---------- */
.dv-aviso {
display: flex; align-items: flex-start; gap: var(--dv-e-3); padding: var(--dv-e-3) var(--dv-e-4);
border-radius: var(--dv-radio-m); border: 1px solid; margin-bottom: var(--dv-e-3);
background: var(--dv-superficie); box-shadow: var(--dv-sombra-2);
}
.dv-aviso > .dv-icono { margin-top: 2px; }
.dv-aviso-texto { flex: 1; min-width: 0; }
.dv-aviso.-ok { border-color: var(--dv-ok); background: var(--dv-ok-fondo); }
.dv-aviso.-ok > .dv-icono { color: var(--dv-ok); }
.dv-aviso.-aviso { border-color: var(--dv-aviso); background: var(--dv-aviso-fondo); }
.dv-aviso.-aviso > .dv-icono { color: var(--dv-aviso); }
.dv-aviso.-error { border-color: var(--dv-error); background: var(--dv-error-fondo); }
.dv-aviso.-error > .dv-icono { color: var(--dv-error); }
.dv-aviso.-info { border-color: var(--dv-info); background: var(--dv-info-fondo); }
.dv-aviso.-info > .dv-icono { color: var(--dv-info); }
.dv-avisos {
position: fixed; right: var(--dv-e-5); bottom: var(--dv-e-5); z-index: 60; width: min(26rem, calc(100vw - 2rem));
display: flex; flex-direction: column-reverse;
}
.dv-avisos:empty { display: none; }
.dv-avisos .dv-aviso { background-color: var(--dv-superficie); background-image: linear-gradient(var(--dv-ok-fondo), var(--dv-ok-fondo)); }
.dv-avisos .dv-aviso.-aviso { background-image: linear-gradient(var(--dv-aviso-fondo), var(--dv-aviso-fondo)); }
.dv-avisos .dv-aviso.-error { background-image: linear-gradient(var(--dv-error-fondo), var(--dv-error-fondo)); }
.dv-avisos .dv-aviso.-info { background-image: linear-gradient(var(--dv-info-fondo), var(--dv-info-fondo)); }
/* ---------- Diálogo (