/* Estilos de la app con la línea gráfica Keyword 2025.
   Colores y tipografía iguales a los del sitio web (Web Keyword 2026/src/assets/css/tokens.css):
   azul #282784, naranja #FF9500, petróleo #007E98, Outfit. El azul va en bloque, el naranja
   en línea fina (los chevrones de las portadas) y el petróleo como franja. */
:root{
  --azul:#282784; --azul-950:#14133f; --azul-900:#1c1b5c; --azul-700:#3b3a9c; --azul-100:#e6e6f1; --azul-50:#f5f5fa;
  --naranja:#ff9500; --naranja-600:#d97b00; --naranja-100:#ffeacc;
  --petroleo:#007e98; --petroleo-700:#005c70; --petroleo-100:#dff1f5;

  --paper:var(--azul-50); --surface:#fff; --ink:#33333c; --titulo:var(--azul); --soft:#62626e;
  --faint:#8b8b97; --rule:#e3e3e9; --link:var(--petroleo-700);
  --lado:var(--azul); --lado-ink:#fff; --cuadro:var(--azul-50);
  --ok:#1e7b4a; --warn:#8a4d00; --bad:#b42318; --warn-soft:var(--naranja-100); --bad-soft:#fdecea;
  --sombra:0 1px 2px rgb(20 19 63 / .06),0 2px 8px rgb(20 19 63 / .04);
  --sombra-alta:0 4px 12px rgb(20 19 63 / .07),0 12px 32px rgb(20 19 63 / .07);
  --radius:8px; --side:272px;
  --fuente:"Outfit","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0f0e2e; --surface:#191845; --ink:#e6e6f1; --titulo:#fff; --soft:#a9a9cc;
    --faint:#7d7da6; --rule:#2c2b66; --link:#a6d8e2; --lado:var(--azul-900); --cuadro:#16153d;
    --ok:#5bd08e; --warn:#ffc370; --bad:#ff8a7e; --warn-soft:#3a2a0e; --bad-soft:#3a1a22;
    --petroleo-100:#0d3440; --azul-100:#2c2b66;
    --sombra:none; --sombra-alta:0 12px 32px rgb(0 0 0 / .35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f0e2e; --surface:#191845; --ink:#e6e6f1; --titulo:#fff; --soft:#a9a9cc;
  --faint:#7d7da6; --rule:#2c2b66; --link:#a6d8e2; --lado:var(--azul-900); --cuadro:#16153d;
  --ok:#5bd08e; --warn:#ffc370; --bad:#ff8a7e; --warn-soft:#3a2a0e; --bad-soft:#3a1a22;
  --petroleo-100:#0d3440; --azul-100:#2c2b66;
  --sombra:none; --sombra-alta:0 12px 32px rgb(0 0 0 / .35);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15.5px/1.55 var(--fuente);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--link)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--petroleo);margin:0;font-weight:500}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow{color:#6fc6d8}}
:root[data-theme="dark"] .eyebrow{color:#6fc6d8}
.eyebrow a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--naranja);outline-offset:2px}

/* Doble chevrón «>» de las portadas 2025: dos líneas finas naranjas en paralelo. */
.chevrones{position:absolute;pointer-events:none;background:no-repeat center/contain
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 300' fill='none' stroke='%23ff9500' stroke-width='1.6'%3E%3Cpath d='M0 10l140 140L0 290'/%3E%3Cpath d='M0 40l110 110L0 260' opacity='.55'/%3E%3C/svg%3E")}

/* ---------- controles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--rule);background:var(--surface);
  padding:9px 16px;border-radius:var(--radius);cursor:pointer;font-weight:600;font-size:14.5px;line-height:1.2;
  text-decoration:none;color:var(--titulo);transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}
.btn:hover{border-color:var(--azul-700)}
/* Naranja con texto azul: blanco sobre naranja no se lee (2:1). */
.btn.pri{background:var(--naranja);border-color:var(--naranja);color:var(--azul-950)}
.btn.pri:hover{background:#ffa220;box-shadow:0 6px 18px rgb(255 149 0 / .28);transform:translateY(-1px)}
.btn.suave{border-color:transparent;background:transparent;color:var(--soft);padding:6px 9px;font-weight:500}
.btn.suave:hover{color:var(--titulo);background:var(--azul-100)}
.btn:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.campo{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--soft);font-weight:500}
.campo input,.campo select,.campo textarea{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:10px 12px;font-size:15px;font-weight:400;color:var(--ink);width:100%;min-height:44px}
.campo input,.campo select{height:44px}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--petroleo);outline:none;box-shadow:0 0 0 3px var(--petroleo-100)}
.error{color:var(--bad);font-size:14px;margin:0;min-height:1.2em}

/* ---------- entrada ---------- */
.entrada{min-height:100%;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.entrada .portada{background:var(--azul);position:relative;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;padding:48px 52px;color:#fff}
.entrada .portada img{width:min(300px,70%);height:auto}
.entrada .portada .chevrones{width:260px;height:490px;right:48px;top:50%;transform:translateY(-50%)}
.entrada .portada p{margin:0;font-size:1.05rem;color:rgb(255 255 255 / .78);max-width:26ch;line-height:1.5;position:relative}
.entrada .portada::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:8px;background:var(--petroleo)}
.entrada .lado-form{display:grid;place-items:center;padding:32px 20px;background:var(--surface)}
.entrada form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:18px}
.entrada h1{font-size:2.2rem;font-weight:600;letter-spacing:-.035em;margin:4px 0 2px;color:var(--titulo);line-height:1.1}
.entrada .btn{padding:12px;font-size:15px}
@media (max-width:760px){
  .entrada{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .entrada .portada{padding:28px 20px 32px;gap:28px}
  .entrada .portada img{width:200px}
  .entrada .portada .chevrones{width:120px;height:230px;right:24px}
  .entrada .lado-form{place-items:start center;padding:32px 16px}
}

/* ---------- armazón ---------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100%}
.lado{background:var(--lado);color:var(--lado-ink);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow:hidden auto;isolation:isolate}
.lado .chevrones{width:150px;height:290px;right:-58px;bottom:120px;z-index:-1;opacity:.9}
.marca{padding:26px 22px 22px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.marca a{text-decoration:none;color:#fff;display:flex;flex-direction:column;gap:9px}
.marca img{width:150px;height:auto;display:block}
.marca span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--naranja)}
.lado h2{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgb(255 255 255 / .6);font-weight:500;margin:10px 22px 8px;display:flex;justify-content:space-between;align-items:center}
.lado .btn.suave{color:rgb(255 255 255 / .75)}
.lado .btn.suave:hover{color:#fff;background:rgb(255 255 255 / .1)}
.lado h2 button{font-size:20px;line-height:1;padding:2px 8px}
.clientes{list-style:none;margin:0;padding:0 12px}
.clientes a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius);
  text-decoration:none;color:rgb(255 255 255 / .86);font-weight:500;position:relative;transition:background .15s,color .15s}
.clientes a:hover{background:rgb(255 255 255 / .08);color:#fff}
.clientes a[aria-current="page"]{background:rgb(255 255 255 / .12);color:#fff;font-weight:600}
.clientes a[aria-current="page"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--naranja)}
.clientes .n{font-family:var(--mono);font-size:11px;color:rgb(255 255 255 / .5)}
.clientes .vacia{color:rgb(255 255 255 / .6);font-size:13.5px;padding:4px 12px}
.pie{margin-top:auto;padding:18px 22px 22px;border-top:1px solid rgb(255 255 255 / .12);display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(to top,var(--lado) 70%,transparent)}
.uso{font-size:12.5px;color:rgb(255 255 255 / .72)}
.barra{height:5px;background:rgb(255 255 255 / .14);border-radius:3px;overflow:hidden;margin-top:7px}
.barra i{display:block;height:100%;background:var(--naranja);width:0;transition:width .4s}
.pie .acciones{display:flex;gap:2px;flex-wrap:wrap;margin-left:-9px}

main{padding:40px 48px 88px;min-width:0;max-width:1180px;width:100%}
main:focus{outline:none}
.cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.cabeza h1{font-size:2.3rem;font-weight:600;letter-spacing:-.035em;margin:6px 0 0;line-height:1.08;color:var(--titulo)}
/* La franja petróleo de la portada de LinkedIn, en chico, bajo cada título. */
.cabeza h1::after,.titulo-wrap::after{content:"";display:block;width:44px;height:4px;background:var(--petroleo);border-radius:2px;margin-top:14px}
.vacio{border:1.5px dashed var(--rule);border-radius:12px;padding:44px 24px;text-align:center;color:var(--soft);background:var(--surface)}
.vacio p{margin:0 0 16px}

/* ---------- tarjetas y listas ---------- */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tarjeta{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--sombra);
  border-radius:12px;padding:20px 22px 18px;text-decoration:none;color:var(--ink);position:relative;overflow:hidden;
  transition:border-color .15s,transform .2s,box-shadow .2s}
.tarjeta::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--azul);transform:scaleX(.18);
  transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1),background .2s}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:transparent}
.tarjeta:hover::before{transform:scaleX(1)}
.tarjeta b{font-size:1.15rem;font-weight:600;color:var(--titulo);letter-spacing:-.01em}
.tarjeta span{font-size:13.5px;color:var(--soft)}
.docs{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sombra);overflow:hidden}
.docs li+li{border-top:1px solid var(--rule)}
.docs a{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:center;padding:16px 20px;
  text-decoration:none;color:var(--ink);transition:background .15s}
.docs a:hover{background:var(--azul-50)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .docs a:hover{background:#201f52}}
:root[data-theme="dark"] .docs a:hover{background:#201f52}
.docs .t{font-weight:600;color:var(--titulo)}
.docs .s{font-size:13px;color:var(--soft)}
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  padding:4px 10px;border-radius:20px;background:var(--azul-100);color:var(--titulo);white-space:nowrap}
.chip.revision{background:var(--warn-soft);color:var(--warn)}
.chip.aprobada{background:var(--petroleo-100);color:var(--link)}

/* Carpetas del cliente: Propuestas, Informes, Otros */
.carpeta{margin-bottom:14px}
.carpeta summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 4px;
  font-weight:600;font-size:1.05rem;color:var(--titulo);user-select:none}
.carpeta summary::-webkit-details-marker{display:none}
.carpeta summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(-45deg);margin-left:4px;transition:transform .2s}
.carpeta[open] summary::after{transform:rotate(45deg)}
.carpeta summary:hover .icono-carpeta{background:var(--naranja)}
.icono-carpeta{width:22px;height:17px;border-radius:3px;background:var(--azul);position:relative;flex:none;transition:background .15s}
.icono-carpeta::before{content:"";position:absolute;left:0;top:-4px;width:10px;height:6px;border-radius:3px 3px 0 0;background:inherit}
.carpeta[data-carpeta="informes"] .icono-carpeta{background:var(--petroleo)}
.carpeta .cuenta{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--soft);background:var(--azul-100);
  padding:2px 8px;border-radius:10px}

.panel{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:24px 26px;margin-bottom:18px;box-shadow:var(--sombra)}
.panel h2{font-size:1.1rem;font-weight:600;margin:0 0 4px;color:var(--titulo);letter-spacing:-.01em}
.panel .nota{font-size:14px;color:var(--soft);margin:0 0 16px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
form.nuevo{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;align-items:end}
form.nuevo .btn{min-height:44px}

/* ---------- documento ---------- */
.titulo-doc{font-size:2.3rem;font-weight:600;letter-spacing:-.035em;color:var(--titulo);border:1px solid transparent;background:transparent;
  border-radius:var(--radius);padding:2px 8px;margin:4px 0 0 -9px;width:100%;max-width:760px;line-height:1.15}
.titulo-doc:hover{border-color:var(--rule)}
.titulo-doc:focus{border-color:var(--petroleo);outline:none;background:var(--surface)}
.guardado{font-size:13px;color:var(--soft);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:var(--surface);border:1px solid var(--rule);padding:6px 12px;border-radius:20px}
.guardado::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.guardado[data-e="pendiente"]::before,.guardado[data-e="guardando"]::before{background:var(--naranja)}
.guardado[data-e="guardando"]::before{animation:latido 1s ease-in-out infinite}
.guardado[data-e="error"]::before{background:var(--bad)}
@keyframes latido{50%{opacity:.3}}
.aviso{border-radius:var(--radius);padding:14px 18px;margin-bottom:18px;display:flex;gap:14px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;background:var(--warn-soft);color:var(--ink);border-left:4px solid var(--naranja)}
.aviso.malo{background:var(--bad-soft);border-left-color:var(--bad)}
.aviso p{margin:0;font-size:14.5px}
.aviso div{display:flex;gap:8px;flex-wrap:wrap}
textarea.notas{min-height:150px;resize:vertical;line-height:1.6}

.soltar{display:block;border:1.5px dashed var(--azul-700);border-radius:12px;padding:30px 20px;text-align:center;color:var(--soft);
  cursor:pointer;background:var(--azul-50);transition:border-color .15s,background .15s}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .soltar{background:#141339;border-color:#4a49a8}}
:root[data-theme="dark"] .soltar{background:#141339;border-color:#4a49a8}
.soltar:hover,.soltar.encima{border-color:var(--naranja);background:var(--naranja-100)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .soltar:hover,:root:not([data-theme="light"]) .soltar.encima{background:#2a220f}}
:root[data-theme="dark"] .soltar:hover,:root[data-theme="dark"] .soltar.encima{background:#2a220f}
.soltar b{color:var(--titulo);font-weight:600}
.artes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:18px}
.arte{background:var(--surface);border:1px solid var(--rule);border-radius:10px;overflow:hidden;position:relative;margin:0}
.arte img{display:block;width:100%;aspect-ratio:1;object-fit:contain;
  background:repeating-conic-gradient(var(--cuadro) 0 25%,var(--surface) 0 50%) 0 0/16px 16px}
.arte .pie-arte{padding:8px 10px;font-size:12px;color:var(--soft);display:flex;justify-content:space-between;gap:6px;border-top:1px solid var(--rule)}
.arte .pie-arte span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:500}
.arte button{position:absolute;top:8px;right:8px;background:var(--surface);color:var(--titulo);border:1px solid var(--rule);border-radius:50%;
  width:28px;height:28px;cursor:pointer;line-height:1;font-size:16px;opacity:0;transition:opacity .15s}
.arte:hover button,.arte button:focus-visible{opacity:1}
@media (hover:none){.arte button{opacity:1}}
.arte.subiendo{opacity:.55}
.arte.subiendo .pie-arte span:last-child{color:var(--warn)}

dialog{border:0;border-radius:14px;padding:28px;background:var(--surface);color:var(--ink);
  width:min(420px,calc(100% - 32px));box-shadow:0 24px 64px rgb(20 19 63 / .3);border-top:5px solid var(--azul)}
dialog::backdrop{background:rgb(20 19 63 / .5);backdrop-filter:blur(3px)}
dialog form{display:flex;flex-direction:column;gap:16px}
dialog h2{margin:0;font-size:1.35rem;font-weight:600;color:var(--titulo);letter-spacing:-.02em}
dialog .botones{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* ---------- color de marca de cada cliente (--c) ---------- */
.punto{width:10px;height:10px;border-radius:50%;background:var(--c,var(--azul));flex:none}
/* Sobre el azul del menú, un aro claro para que el verde jade o el azul Keyword no se pierdan. */
.lado .punto{box-shadow:0 0 0 1.5px rgb(255 255 255 / .6)}
.nombre-cli,.con-punto{display:inline-flex;align-items:center;gap:10px;min-width:0}
.con-punto{gap:14px}
.tarjeta::before{background:var(--c,var(--azul));transform:none;height:5px}
.cabeza.de-cliente h1::after{background:var(--c,var(--petroleo));width:64px}
.barra-plantilla{border-left:8px solid var(--c,var(--azul))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tarjeta::before,
  :root:not([data-theme="light"]) .cabeza.de-cliente h1::after{background:color-mix(in srgb,var(--c,var(--azul)) 70%,#fff)}}
:root[data-theme="dark"] .tarjeta::before,:root[data-theme="dark"] .cabeza.de-cliente h1::after{background:color-mix(in srgb,var(--c,var(--azul)) 70%,#fff)}

/* ---------- inicio ---------- */
.bloque-inicio{margin-bottom:34px}
.bloque-inicio h2{font-size:1.15rem;font-weight:600;color:var(--titulo);margin:0 0 12px;display:flex;align-items:center;gap:10px}
.bloque-inicio .cuenta{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--soft);background:var(--azul-100);padding:2px 8px;border-radius:10px}
.nota-inicio{margin:-4px 0 12px;color:var(--soft);font-size:14px}
.nav-lado{padding:4px 12px 0}
.nav-lado a{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:var(--radius);
  color:rgb(255 255 255 / .86);text-decoration:none;font-weight:500}
.nav-lado a:hover{background:rgb(255 255 255 / .08);color:#fff}
.cuenta-pend{background:var(--naranja);color:var(--azul-950);font-family:var(--mono);font-size:11px;font-weight:600;
  min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;padding:0 6px}

/* ---------- respaldo ---------- */
.respaldo{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-left:-9px}
.respaldo-estado{font-size:11.5px;color:rgb(255 255 255 / .6);padding-left:9px;line-height:1.4}
.respaldo-estado.viejo{color:var(--naranja)}
.color-fila{display:flex;align-items:flex-end;gap:14px}
.color-fila input[type=color]{padding:4px;height:44px;cursor:pointer}

.enlace{background:none;border:0;padding:0;color:var(--link);font:inherit;font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer;margin-left:6px}
.enlace:hover{color:var(--titulo)}
#lista-plantillas fieldset{border:1px solid var(--rule);border-radius:var(--radius);padding:10px 14px 12px;margin:0 0 10px}
#lista-plantillas legend{font-size:12px;font-weight:600;color:var(--soft);padding:0 6px;text-transform:uppercase;letter-spacing:.08em}
.casilla{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:15px;cursor:pointer}
.casilla input{width:18px;height:18px;accent-color:var(--petroleo)}

.btn.peligro{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.peligro:hover{filter:brightness(1.08)}
.btn.peligro:disabled{background:var(--surface);border-color:var(--rule);color:var(--faint)}
.icono-papelera{width:18px;height:18px;flex:none;background:var(--faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6l1 2h4v2H4V5h4zM6 9h12l-1 12H7z'/%3E%3C/svg%3E") center/contain no-repeat}
.carpeta.papelera summary{color:var(--soft)}
.nota-papelera{margin:0 0 10px;font-size:13.5px;color:var(--soft)}
.fila-papelera{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 20px}
.fila-papelera .t{font-weight:600;color:var(--soft)}
.fila-papelera .s{font-size:13px;color:var(--faint)}

/* ---------- documento con plantilla: pantalla completa ---------- */
body.con-plantilla .app{grid-template-columns:1fr}
body.con-plantilla .lado{display:none}
body.con-plantilla main{padding:0;max-width:none;height:100vh;display:flex;flex-direction:column}
.barra-plantilla{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--azul);color:#fff;flex-wrap:wrap;
  border-bottom:3px solid var(--naranja)}
.barra-plantilla .volver{color:#fff;font-weight:600;white-space:nowrap}
.barra-plantilla .volver:hover{background:rgb(255 255 255 / .12);color:#fff}
.barra-plantilla input,.barra-plantilla select{background:rgb(255 255 255 / .1);border:1px solid rgb(255 255 255 / .22);color:#fff;
  border-radius:var(--radius);padding:6px 10px;height:36px;font-size:14px}
.barra-plantilla input:focus,.barra-plantilla select:focus{outline:none;border-color:var(--naranja);background:rgb(255 255 255 / .16)}
.barra-plantilla select option{color:#141a2b}
.barra-plantilla .titulo-mini{flex:1;min-width:180px;font-weight:600;font-size:15px}
.barra-plantilla .mes-mini{width:170px;color-scheme:dark}
.barra-plantilla .guardado{background:rgb(255 255 255 / .1);border-color:rgb(255 255 255 / .2);color:#fff}
.barra-plantilla .btn:not(.suave){background:transparent;border-color:rgb(255 255 255 / .35);color:#fff;height:36px;padding:0 14px}
.barra-plantilla .btn:not(.suave):hover{border-color:var(--naranja);background:rgb(255 149 0 / .15)}
.barra-plantilla .borrar-mini{color:rgb(255 255 255 / .7);height:36px}
.barra-plantilla .borrar-mini:hover{color:#fff;background:rgb(180 35 24 / .55)}
body.con-plantilla #avisos .aviso{margin:0;border-radius:0}
#marco{flex:1;width:100%;border:0;display:block;background:#fff}

.menu-movil{display:none}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .lado{position:static;height:auto}
  .lado .chevrones{display:none}
  .lado.cerrado .clientes,.lado.cerrado h2,.lado.cerrado .pie{display:none}
  .marca{padding:16px}
  .marca img{width:120px}
  .menu-movil{display:inline-flex}
  main{padding:26px 16px 64px}
  .cabeza h1,.titulo-doc{font-size:1.7rem}
  .panel{padding:20px 18px}
  .docs a{grid-template-columns:1fr auto;gap:10px;padding:14px 16px}
  .docs a .s:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* En oscuro, el azul de marca se pierde contra el fondo: la carpeta usa un azul más claro. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .carpeta[data-carpeta="propuestas"] .icono-carpeta{background:#6d6cd6}}
:root[data-theme="dark"] .carpeta[data-carpeta="propuestas"] .icono-carpeta{background:#6d6cd6}