/* Área de clientes (panel-documentos). Con la línea de duvalydiego.es (assets/css/styles.css de la web, 20-10-2026):
   monocromo negro y blanco con grises cálidos, la tipografía del sistema, botones en mayúsculas con las letras espaciadas
   y sin esquinas redondeadas, cabecera negra con el logo blanco y pie oscuro con el eslogan. Móvil primero; nada de
   fuera; en modo oscuro, los mismos tonos invertidos (como las secciones oscuras de la web). */
:root {
  --negro: #0a0a0a; --negro-suave: #161616; --blanco: #ffffff;
  --gris-100: #f5f5f4; --gris-200: #e7e7e4; --gris-300: #d2d2ce; --gris-500: #8b8b87; --gris-600: #5f5f5c;
  --fondo: var(--blanco); --panel: var(--blanco); --tx: var(--negro); --tx2: var(--gris-600); --tx3: var(--gris-500);
  --linea: var(--gris-200); --linea-fuerte: var(--gris-300); --campo: var(--gris-100);
  --prim: var(--negro); --prim-tx: var(--blanco);
  --ok: #2e6b47; --mal: #a3261e; --aviso: #7a5200;
  --tipo: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --transicion: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: var(--negro); --panel: var(--negro-suave); --tx: var(--blanco); --tx2: var(--gris-300); --tx3: var(--gris-500);
    --linea: rgba(255, 255, 255, 0.16); --linea-fuerte: rgba(255, 255, 255, 0.32); --campo: #1f1f1e;
    --prim: var(--blanco); --prim-tx: var(--negro);
    --ok: #7fc99a; --mal: #f0867d; --aviso: #e0b35a;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tx); font-family: var(--tipo); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
p { margin: 0 0 10px; }
a { color: inherit; }
main { max-width: 760px; margin: 0 auto; padding: 8px 20px 48px; }

/* ── cabecera: negra, con el logo blanco y el nombre en mayúsculas, como la de la web ── */
.cabecera { background: var(--negro); color: var(--blanco); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.cabecera__fila { max-width: 760px; margin: 0 auto; padding: 0 20px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.marca { display: inline-flex; align-items: center; gap: 12px; padding: 14px 0; color: var(--blanco); text-decoration: none; }
.marca__logo { width: 30px; height: 31px; flex: none; }
.marca__textos { display: flex; flex-direction: column; gap: 2px; }
.marca__nombre { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2; }
.marca__area { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gris-300); line-height: 1.2; }
.menu { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 0 0 12px; width: 100%; }
.menu a, .menu button.enlace { color: var(--blanco); text-decoration: none; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color var(--transicion), color var(--transicion); }
.menu a:hover, .menu button.enlace:hover { color: var(--gris-300); }
.menu a.on { border-bottom-color: var(--blanco); }
/* «Volver a la web» (21-10-2026): en el móvil, a la derecha de la marca (el menú, cuando hay sesión, baja a su propia fila);
   en pantallas anchas, al final de la fila, después del menú */
.volver { order: 1; flex: none; color: var(--gris-300); text-decoration: none; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 0; white-space: nowrap; }
.volver:hover { color: var(--blanco); }
.menu { order: 2; }
@media (min-width: 640px) {
  .cabecera__fila { min-height: 78px; flex-wrap: nowrap; }
  .marca { flex: none; }
  .marca__logo { width: 36px; height: 38px; }
  .marca__nombre { font-size: 1rem; }
  .menu { width: auto; padding: 0; gap: 20px; order: 1; flex-wrap: nowrap; }
  .volver { order: 2; }
}

/* ── títulos: ligeros y grandes, como los de las secciones de la web ── */
h1.titulo { font-size: clamp(1.9rem, 7vw, 2.6rem); font-weight: 300; letter-spacing: -0.03em; line-height: 1.15; margin: 28px 0 18px; text-wrap: balance; }
h2 { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 12px; }
h3 { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); margin: 24px 0 8px; }
.paso { display: none; }
.paso.on { display: block; }
.caja { background: var(--panel); border: 1px solid var(--linea); padding: 24px 20px; margin: 0 0 16px; }
.caja.ok { border-color: var(--ok); }
.caja.peligro { border-color: var(--mal); }
.caja.aviso, .aviso { border-color: var(--aviso); }
.caja.dentro { border-color: var(--tx); border-width: 2px; }
/* el vídeo de ayuda «¿Primera vez? Mira cómo funciona» (20-10-2026): el mismo molde que en la página de firma, sin esquinas */
.caja.ayuda { padding: 12px 16px; }
.caja.ayuda button.sec { width: 100%; }
.caja.ayuda video { display: block; width: 100%; max-height: 70vh; margin-top: 12px; background: #000; }
.tenue { color: var(--tx2); }
.pequeno { font-size: 0.88rem; }
.msj { min-height: 1.4em; margin: 10px 0 0; font-size: 0.92rem; }
.msj.mal { color: var(--mal); }
.msj.ok { color: var(--ok); }
.volver { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--tx2); }
.volver:hover { color: var(--tx); }

/* ── botones: los de la web (mayúsculas, letras espaciadas, borde fino, sin esquinas) ── */
.botones { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px;
  border: 1px solid currentColor; border-radius: 0; background: transparent; color: var(--tx);
  font-family: var(--tipo); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
button:hover, .boton:hover { background: var(--tx); color: var(--fondo); }
button.prim, .boton.prim { background: var(--prim); border-color: var(--prim); color: var(--prim-tx); }
button.prim:hover, .boton.prim:hover { background: transparent; color: var(--tx); border-color: var(--tx); }
button.sec { color: var(--tx2); border-color: var(--linea-fuerte); }
button.sec:hover { background: transparent; color: var(--tx); border-color: var(--tx); }
button.mal { color: var(--mal); border-color: var(--mal); }
button.mal:hover { background: var(--mal); color: #fff; }
button.enlace { background: none; border: 0; padding: 0; min-height: 0; color: var(--tx); font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
button.enlace:hover { background: none; color: var(--tx2); }
button.grande { width: 100%; min-height: 54px; margin-top: 4px; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button:focus-visible, .boton:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--tx); outline-offset: 3px; }

/* ── campos ── */
.campo { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; font-size: 0.92rem; color: var(--tx2); }
input, select, textarea { font-family: var(--tipo); font-size: 17px; line-height: 1.3; padding: 12px 14px; min-height: 50px; border: 1px solid var(--linea-fuerte); border-radius: 0; background: var(--campo); color: var(--tx); width: 100%; transition: border-color var(--transicion); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--tx); }
input::placeholder, textarea::placeholder { color: var(--tx3); }
#codigo { font-family: var(--mono); font-size: 28px; font-weight: 600; letter-spacing: 0.35em; text-align: center; max-width: 280px; }
.casilla { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; font-size: 0.95rem; }
.casilla input { width: 22px; min-height: 22px; height: 22px; flex: none; margin-top: 3px; accent-color: var(--tx); }
.huella { font-size: 0.8rem; color: var(--tx2); word-break: break-all; margin-bottom: 8px; }
.huella code, code { font-family: var(--mono); font-size: 0.78rem; line-height: 1.5; }

/* ── las listas: separadas por líneas finas, como los servicios de la web ── */
ul.docs, ul.lista, ul.quien { list-style: none; margin: 0; padding: 0; }
ul.docs li { padding: 18px 0; border-top: 1px solid var(--linea); }
ul.docs li:first-child { border-top: 0; padding-top: 4px; }
ul.docs li:last-child { padding-bottom: 4px; }
ul.docs .doc-tit { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
ul.docs .doc-tit a { text-decoration: none; color: inherit; }
ul.docs .doc-tit a:hover { text-decoration: underline; text-underline-offset: 3px; }
ul.docs .doc-sub { font-size: 0.9rem; color: var(--tx2); margin-top: 4px; }
ul.docs .botones { margin-top: 12px; }
ul.lista li, ul.quien li { padding: 12px 0; border-top: 1px solid var(--linea); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.95rem; }
ul.lista li:first-child, ul.quien li:first-child { border-top: 0; }
ul.lista li .crece, ul.quien li .crece { flex: 1 1 200px; }
ul.lista button { min-height: 38px; padding: 8px 14px; font-size: 0.7rem; }
.estado { display: inline-block; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--linea-fuerte); color: var(--tx2); margin-left: 8px; vertical-align: middle; line-height: 1.3; }
.estado.ok { background: var(--tx); border-color: var(--tx); color: var(--fondo); }
.estado.pend { border-color: var(--tx); color: var(--tx); }
.estado.mal { border-color: var(--mal); color: var(--mal); }

/* ── el pie: oscuro, con el logo, el nombre y el eslogan, como el de la web ── */
.pie { margin-top: 32px; background: var(--negro-suave); color: var(--blanco); border-top: 1px solid rgba(255, 255, 255, 0.16); }
.pie__fila { max-width: 760px; margin: 0 auto; padding: 36px 20px 30px; display: grid; gap: 16px; }
.pie__marca { display: flex; align-items: center; gap: 14px; }
.pie__logo { width: 34px; height: 36px; flex: none; object-fit: contain; }
.pie__nombre { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.pie__eslogan { font-size: 0.9rem; font-weight: 300; color: var(--gris-300); margin: 0; }
.pie__legal { font-size: 0.78rem; line-height: 1.6; color: var(--gris-500); margin: 0; }
.pie__legal a { color: var(--gris-300); text-underline-offset: 3px; }
.pie__legal a:hover { color: var(--blanco); }

/* ── «o entra con» (fases 2 y 3): una línea fina con el texto en medio, como los separadores de la web ── */
.separador { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }

/* ── Logotipos en los botones de proveedor (21-10-2026): símbolo + texto, nunca el símbolo solo (las guías de Google, Apple y
   Microsoft piden logo con texto, y «Llave de acceso» sin palabra no se entiende). Los dibujos viven en el sprite <svg class="sprite">
   del final de la página y cada botón los usa con <use>. Apple y la llave van en currentColor (negro aquí, blanco en modo oscuro y al
   pasar por encima); la «G» de Google y los cuadros de Microsoft llevan sus colores oficiales, y la «G» siempre sobre un cuadrado
   blanco, que es como Google la pide también en botones oscuros. ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo { width: 20px; height: 20px; flex: none; }
.logo--google { box-sizing: border-box; padding: 2px; background: #fff; border-radius: 2px; }
ul.lista li .tipo { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); margin-right: 6px; }
/* «hidden» tiene que ganar a los display de botones y enlaces (lección de la firma, 16-10-2026) */
[hidden] { display: none !important; }
#dentro-enlace { width: 100%; box-sizing: border-box; font: 14px/1.3 var(--mono); padding: 10px; border: 1px solid var(--linea-fuerte); margin: 8px 0 0; background: var(--campo); color: var(--tx); }
.privacidad p { margin: 0 0 10px; }

/* ── Facturas y Contabilidad (contabilidad, fase 2, 28-10-2026): filas compactas que se parten en el móvil, con el importe a la
   derecha; el estado de cobro en color (verde, cobrada; ámbar, pendiente; la rectificada, tenue) y los botones pequeños ── */
.fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fila .crece { flex: 1 1 12em; min-width: 0; }
.fila.acciones { align-items: center; margin-top: 6px; }
.fila.acciones > .boton:last-child { margin-left: auto; }
.acciones .casilla { padding: 6px 0; }
.importe { white-space: nowrap; font-variant-numeric: tabular-nums; }
.verde { color: var(--ok); }
.ambar { color: var(--aviso); }
.estado.verde { border-color: var(--ok); color: var(--ok); }
.estado.ambar { border-color: var(--aviso); color: var(--aviso); }
.boton.chico, button.chico { min-height: 38px; padding: 8px 14px; font-size: 0.7rem; }
.texto { white-space: pre-wrap; margin: 8px 0 0; }
.respuesta { margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--ok); }
details.plegable summary { cursor: pointer; margin: 18px 0 6px; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tx3); }
textarea { min-height: 96px; resize: vertical; }
select option { background: var(--panel); color: var(--tx); }
input[type=file] { padding: 10px 12px; font-size: 0.9rem; }
input[type=file]::file-selector-button { margin-right: 12px; padding: 8px 14px; border: 1px solid var(--linea-fuerte); border-radius: 0; background: transparent; color: var(--tx); font: 600 0.7rem/1.2 var(--tipo); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
/* con «Facturas» o «Contabilidad», el menú ya no cabe al lado de la marca: también en pantallas anchas baja a su propia fila */
@media (min-width: 640px) {
  .cabecera.menu-largo .cabecera__fila { flex-wrap: wrap; }
  .cabecera.menu-largo .menu { width: 100%; padding: 0 0 12px; order: 2; flex-wrap: wrap; }
  .cabecera.menu-largo .volver { order: 1; }
}
/* dos ficheros de una factura (fase 6b: el RIDE en PDF y su XML, en Tito Muebles): juntos, a la derecha, como el botón solo de siempre */
.fila.acciones > .par { margin-left: auto; display: inline-flex; gap: 8px; }

/* ── Tito Muebles (fase 6b, 30-10-2026): la línea de titomuebles.com, con la paleta de «estilo» en negocios.json (las variables
   --color-* de su CSS): cabecera verde con su marca (la T verde en el cuadrado crema, como en el pie de su web), pie carbón con el
   eslogan en ámbar, el botón principal verde y las líneas y fondos cálidos; lo demás de la página, igual. Lo pone el servidor con
   data-marca="tm" en <html> (portal.mjs, paginaDe) antes de que cargue nada. En modo oscuro, los oscuros de siempre en cálido, con el
   botón principal en crema. ── */
:root[data-marca="tm"] {
  --tm-verde: #1e4d3b; --tm-crema: #f6f1e7; --tm-ambar: #c98a3e; --tm-carbon: #26221c; --tm-tinta: #6e675b; --tm-tinta-tenue: #8a8272; --tm-borde: #e3dccb;
  --fondo: var(--tm-crema); --panel: #ffffff; --tx: var(--tm-carbon); --tx2: var(--tm-tinta); --tx3: var(--tm-tinta-tenue);
  --linea: var(--tm-borde); --linea-fuerte: #d3c9b4; --campo: #fbf8f2;
  --prim: var(--tm-verde); --prim-tx: var(--tm-crema);
}
@media (prefers-color-scheme: dark) {
  :root[data-marca="tm"] {
    --fondo: #1b1915; --panel: #24211c; --tx: var(--tm-crema); --tx2: #cfc6b4; --tx3: #9c9384;
    --linea: rgba(246, 241, 231, 0.16); --linea-fuerte: rgba(246, 241, 231, 0.32); --campo: #2b2722;
    --prim: var(--tm-crema); --prim-tx: var(--tm-verde);
  }
}
[data-marca="tm"] .cabecera { background: var(--tm-verde); }
[data-marca="tm"] .cabecera .volver { color: rgba(246, 241, 231, 0.78); }
[data-marca="tm"] .cabecera .volver:hover { color: var(--tm-crema); }
[data-marca="tm"] .marca__logo, [data-marca="tm"] .pie__logo { object-fit: contain; }
[data-marca="tm"] .pie { background: var(--tm-carbon); }
[data-marca="tm"] .pie__eslogan { color: var(--tm-ambar); }

/* ── Diego Llanos (04-11-2026, A.6 de reports/esdiegollanos-y-csv-2026-11-04.md; decisión 4 del operador: «la "d." del favicon y los
   colores de su web»): la línea de esdiegollanos.com con la paleta de «estilo» en negocios.json: cabecera y pie navy con su monograma
   (cuadrado marfil, «d» navy y punto oro: clientes-logo-dl.svg), un filete oro entre la cabecera y la página (el oro, solo en filetes,
   puntos y el lema), el lema del pie en oro, el botón principal navy y los fondos marfil; lo demás de la página, igual. Sin letras
   propias (la CSP del portal no tiene font-src): la tipografía del sistema, como Tito Muebles. Contrastes (WCAG, sobre blanco / marfil):
   navy 15,82 / 14,80; pizarra 5,82 / 5,45; pizarra tenue 4,90 / 4,59; sobre el navy, el oro del lema 6,72 y los datos legales del pie
   7,61 (el gris de siempre se quedaba en 4,62). En modo oscuro, el navy de fondo con los textos en marfil (14,80), los secundarios en
   10,26 y 6,15, y el botón principal en marfil. El foco de lo que hay en la cabecera y el pie, en oro (en navy no se vería). Lo pone el
   servidor con data-marca="dl" en <html> (portal.mjs, paginaDe) antes de que cargue nada. ── */
:root[data-marca="dl"] {
  --dl-navy: #0f2437; --dl-marfil: #faf7f2; --dl-oro: #c8a45d; --dl-pizarra: #55677a; --dl-pizarra-tenue: #61728a; --dl-borde: #dededc;
  --fondo: var(--dl-marfil); --panel: #ffffff; --tx: var(--dl-navy); --tx2: var(--dl-pizarra); --tx3: var(--dl-pizarra-tenue);
  --linea: var(--dl-borde); --linea-fuerte: #c3cad3; --campo: #fcfbf8;
  --prim: var(--dl-navy); --prim-tx: var(--dl-marfil);
}
@media (prefers-color-scheme: dark) {
  :root[data-marca="dl"] {
    --fondo: #0a1724; --panel: var(--dl-navy); --tx: var(--dl-marfil); --tx2: #c9d1db; --tx3: #94a3b5;
    --linea: rgba(250, 247, 242, 0.16); --linea-fuerte: rgba(250, 247, 242, 0.32); --campo: #15304a;
    --prim: var(--dl-marfil); --prim-tx: var(--dl-navy);
  }
}
[data-marca="dl"] .cabecera { background: var(--dl-navy); border-bottom-color: rgba(200, 164, 93, 0.5); }
[data-marca="dl"] .cabecera .volver { color: rgba(250, 247, 242, 0.78); }
[data-marca="dl"] .cabecera .volver:hover { color: var(--dl-marfil); }
[data-marca="dl"] .marca__logo, [data-marca="dl"] .pie__logo { object-fit: contain; }
[data-marca="dl"] .pie { background: var(--dl-navy); border-top-color: rgba(200, 164, 93, 0.5); }
[data-marca="dl"] .pie__eslogan { color: var(--dl-oro); }
[data-marca="dl"] .pie__legal { color: #aab5c3; }
[data-marca="dl"] .cabecera a:focus-visible, [data-marca="dl"] .cabecera button:focus-visible, [data-marca="dl"] .pie a:focus-visible { outline-color: var(--dl-oro); }
@media print { .cabecera, .pie, .menu, .botones { display: none; } body { background: #fff; color: #000; } }