/* Generado por nexomail/tema.py desde config/INSTANCIA/tema.json. No editar a mano. */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");
:root {
  --fuente-titulares: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --fuente-cuerpo: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radio-grande: 10px;
  --r-lg: 10px;
  --radio-pequeno: 6px;
  --r-sm: 6px;
  --tema-nombre: "Despacho";
  --tema-iconos: svg;
  --color-fondo: light-dark(#F7F2E7, #14110D);
  --fondo: light-dark(#F7F2E7, #14110D);
  --color-superficie: light-dark(#FFFCF5, #1C1813);
  --fondo2: light-dark(#FFFCF5, #1C1813);
  --color-texto: light-dark(#231E14, #EFE8D8);
  --texto: light-dark(#231E14, #EFE8D8);
  --color-texto-suave: light-dark(#675C44, #A89F8A);
  --gris: light-dark(#675C44, #A89F8A);
  --color-linea: light-dark(#E3D9BF, #3A3327);
  --linea: light-dark(#E3D9BF, #3A3327);
  --color-acento: light-dark(#7A5C14, #D6B66B);
  --azul: light-dark(#7A5C14, #D6B66B);
  --color-acento-hover: light-dark(#5F4610, #E6CB8A);
  --azul-hover: light-dark(#5F4610, #E6CB8A);
  --color-acento-suave: light-dark(#EADFC0, #3B3118);
  --azul-suave: light-dark(#EADFC0, #3B3118);
  --color-acento-caja: light-dark(#F1E8CF, #2A2212);
  --azul-caja: light-dark(#F1E8CF, #2A2212);
  --color-sobre-acento: light-dark(#FFFCF5, #17120A);
  --sobre-azul: light-dark(#FFFCF5, #17120A);
  --color-boton: light-dark(#BF9B4F, #C9A55B);
  --color-sobre-boton: light-dark(#1F1807, #17120A);
}
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --color-fondo: #F7F2E7;
    --fondo: #F7F2E7;
    --color-superficie: #FFFCF5;
    --fondo2: #FFFCF5;
    --color-texto: #231E14;
    --texto: #231E14;
    --color-texto-suave: #675C44;
    --gris: #675C44;
    --color-linea: #E3D9BF;
    --linea: #E3D9BF;
    --color-acento: #7A5C14;
    --azul: #7A5C14;
    --color-acento-hover: #5F4610;
    --azul-hover: #5F4610;
    --color-acento-suave: #EADFC0;
    --azul-suave: #EADFC0;
    --color-acento-caja: #F1E8CF;
    --azul-caja: #F1E8CF;
    --color-sobre-acento: #FFFCF5;
    --sobre-azul: #FFFCF5;
    --color-boton: #BF9B4F;
    --color-sobre-boton: #1F1807;
  }
}
/* Estilo «elegante» (despacho / banca privada). Solo usa variables del tema
   (--color-*, --fuente-titulares, --radio-*) y los tokens de estilos.css:
   para otro negocio basta cambiar tema.json, no este archivo. */

:root {
  --filete: color-mix(in srgb, var(--azul) 38%, var(--linea));
  --sombra-suave: 0 1px 2px color-mix(in srgb, var(--texto) 7%, transparent),
                  0 8px 22px -14px color-mix(in srgb, var(--texto) 30%, transparent);
}

/* titulares con serif */
.cab h1, .ficha .asunto, .login h1, .hoja h3 {
  font-family: var(--fuente-titulares, var(--fuente));
  font-weight: 600; letter-spacing: .005em;
}
.cab h1 { font-size: 22px; }
.cab h1 .sub { font-family: var(--fuente); letter-spacing: 0; }
.ficha .asunto { font-size: 24px; line-height: 1.25; }

/* cabecera: filete dorado fino */
.cab { border-bottom: 1px solid var(--filete); }
.atras { background: transparent; border: 1px solid var(--filete); color: var(--azul); border-radius: var(--r-sm); }
.atras:active { background: var(--azul-caja); }

/* secciones: título en versalitas doradas con filete que se alarga */
.seccion h2 { color: var(--azul); letter-spacing: .14em; font-size: 12px; }
.seccion h2::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
.seccion h2 .cuenta, details.otros > summary .cuenta {
  background: transparent; border: 1px solid var(--filete); color: var(--azul);
  font-weight: 600; padding: 0 var(--e2);
}
details.otros > summary { color: var(--azul); letter-spacing: .14em; }

/* tarjetas y filas */
.lista { border-color: var(--filete); box-shadow: var(--sombra-suave); }
.fila { border-bottom-color: var(--linea); }
.fila:active { background: var(--azul-caja); }
.ficha .cuerpo-txt { border-color: var(--linea); box-shadow: var(--sombra-suave); }
.punto { background: var(--azul); }
.fila.lead-web, .fila.sin-resp { box-shadow: inset 2px 0 0 var(--azul); }
.fila.sin-resp:has(.etq.sin-resp.rojo) { box-shadow: inset 2px 0 0 var(--rojo); }

/* insignias: contorno fino, sin relleno */
.etq {
  background: transparent; border: 1px solid var(--linea); color: var(--gris);
  border-radius: 4px; letter-spacing: .08em; font-weight: 600;
}
.etq.tipo, .etq.origen { background: transparent; border-color: var(--filete); color: var(--azul); }
.etq[class*="neg-"] { background: transparent; border-color: color-mix(in srgb, var(--c) 40%, var(--linea)); }
.glob { background: var(--azul); color: var(--sobre-azul); }
.glob.gris { background: transparent; border: 1px solid var(--linea); color: var(--gris); }
.sin-responder-cab { border: 1px solid var(--filete); background: var(--azul-caja); }

/* chips de empresa */
.chip-neg { border-color: var(--linea); background: transparent; font-weight: 500; }
.chip-neg.on { background: var(--azul-caja); border-color: var(--azul); box-shadow: none; }

/* botones: primario dorado con texto oscuro; resto, contorno fino */
.btn { background: transparent; border: 1px solid var(--filete); color: var(--azul); border-radius: var(--r-sm); letter-spacing: .01em; }
.btn:active { background: var(--azul-caja); opacity: 1; }
.btn-pri { background: var(--color-boton); color: var(--color-sobre-boton); border-color: var(--color-boton); font-weight: 650; }
.btn-pri:active { background: var(--azul-hover); color: var(--color-sobre-boton); }
.btn-sec { background: transparent; color: var(--texto); border-color: var(--linea); }
.btn-pel { background: transparent; border-color: color-mix(in srgb, var(--rojo) 45%, transparent); }
.visor-btn { background: transparent; border: 1px solid var(--filete); color: var(--azul); }
.visor-cerrar { background: var(--color-boton); color: var(--color-sobre-boton); border-color: var(--color-boton); }

/* campos */
.buscador input, .resp input, .resp textarea, .resp select, .login-campo { border-color: var(--linea); background: var(--fondo2); }
.buscador input:focus, .resp input:focus, .resp textarea:focus, .resp select:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent);
}
.login { border-color: var(--filete); box-shadow: var(--sombra-suave); }

/* pestañas inferiores: filete dorado arriba y trazo fino en el activo */
.pestanas, .acciones { border-top: 1px solid var(--filete); }
.pestanas button { font-weight: 500; letter-spacing: .04em; }
.pestanas button.on { color: var(--azul); font-weight: 650; }
.pestanas button.on::before { height: 2px; left: 28%; right: 28%; border-radius: 0; }
.pestanas button .ic { display: flex; align-items: center; justify-content: center; height: 24px; }
.pestanas button .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pestanas button .pip { background: var(--azul); color: var(--sobre-azul); }

.spinner { border-color: var(--azul-suave); border-top-color: var(--azul); }
.aviso-flotante { background: var(--texto); color: var(--fondo); border-radius: var(--r-sm); }

/* iconos de trazo fino (los pone app.js solo con --tema-iconos: svg; con otro tema siguen los emojis) */
.ic-svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ic-svg.lleno { fill: currentColor; }
.emoji .ic-svg { width: 22px; height: 22px; margin: 0 auto; color: var(--azul); }
.fila.peligro .emoji .ic-svg { color: var(--rojo); }
.btn .ic { display: inline-flex; align-items: center; }
.btn .ic .ic-svg { width: 18px; height: 18px; }
.seccion h2 > .ic-svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sec-tipo h2 .emoji { display: inline-flex; width: auto; flex: 0 0 auto; }
.sec-tipo h2 .emoji .ic-svg, .chip-tipo .emoji .ic-svg,
details.plegado-tipo > summary .emoji .ic-svg, .sin-responder-cab .emoji .ic-svg { width: 16px; height: 16px; }
.chip-tipo .emoji, details.plegado-tipo > summary .emoji, .sin-responder-cab .emoji {
  display: inline-flex; align-items: center; width: auto; flex: 0 0 auto; }
.sec-tipo h2 .emoji .ic-svg, .chip-tipo .emoji .ic-svg, details.plegado-tipo > summary .emoji .ic-svg { color: var(--tc); }

/* Escritorio (≥ 1024 px): filetes dorados, titulares en serif y selección con el acento.
   Todo bajo la media query; el móvil no cambia. Las zonas y su layout están en estilos.css. */
@media (min-width: 1024px) {
  .lateral { border-right-color: var(--filete); }
  .cab, #act, #vista { border-right-color: var(--filete); }
  .lectura-barra { border-bottom-color: var(--filete); }
  .lat-marca { font-size: 22px; letter-spacing: .005em; }
  .lat-sec h2 { color: var(--azul); letter-spacing: .14em; }
  .lat-item.on { background: var(--azul-caja); box-shadow: inset 2px 0 0 var(--azul); }
  .lat-item { letter-spacing: .02em; font-weight: 500; }
  .lat-item.on { font-weight: 650; }
  .lat-item .ic svg { stroke-width: 1.5; }
  .lat-neg[aria-pressed="true"] { background: var(--azul-caja); box-shadow: inset 0 0 0 1px var(--filete); }
  #vista .lista .fila.sel { background: var(--azul-caja); box-shadow: inset 2px 0 0 var(--azul); }
  .lectura-cuerpo .ficha .asunto { font-size: 32px; font-weight: 600; }
  .lectura-barra .btn-pri { color: var(--color-sobre-boton); }
  .lectura-vacio .lv-tit { font-weight: 500; }
  .ayuda-caja, .visor { border-color: var(--filete); }
  kbd { border-color: var(--filete); }
}
body::before { content: var(--tema-nombre); display: block; text-align: center; padding: 10px 16px 0; font: 600 11px/1.2 var(--fuente-cuerpo, var(--fuente)); letter-spacing: .22em; text-transform: uppercase; color: var(--azul); }