/* ═══════════════════════════════════════════════════════════════════════════
   GALERÍA · el panel del equipo
   Las colecciones se ven como lo que son: fotos. Cada carpeta es una portada; adentro, su
   foto grande arriba, sus subgalerías como tarjetas y sus archivos en mosaico. La lógica de
   carpeta y subcarpeta está, pero no se ve como un explorador de archivos.
   Tres temas de PRISMA (oscuro, teal, claro). Lo que va sobre una foto no cambia con el tema.
   Sin negrita: el peso lo dan el tamaño y Marcellus.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --serif:Marcellus, 'PP Fragment Glare', Georgia, serif;
  --sans:Figtree, 'PP Fragment Sans', Inter, system-ui, sans-serif;
  --tinta-marca:#1A2633; --deep:#005565; --teal:#006D82; --salvia:#7D9B5B; --crema:#EADFCE; --rojo:#B3261E; --ocre:#8A6A2F;
  --sombra:0 30px 70px -18px rgba(26,38,51,.62);
  --curva:cubic-bezier(.2,.8,.2,1);
}
/* OSCURO · la tinta del ecosistema */
html[data-tema="oscuro"]{
  --suelo:#141D27; --hoja:#1A2633; --hoja-2:#212F3E; --tinta:#EADFCE; --tinta-2:rgba(234,223,206,.66); --tinta-3:rgba(234,223,206,.44);
  --linea:rgba(234,223,206,.13); --linea-2:rgba(234,223,206,.24); --acento:#2A93A8; --relleno:#005565; --relleno-tinta:#FFFFFF;
  --campo:rgba(234,223,206,.05); --vacio:rgba(234,223,206,.04);
}
/* TEAL · suelo #046477, hojas deep, tinta crema */
html[data-tema="teal"]{
  --suelo:#046477; --hoja:#005565; --hoja-2:#0A5B6A; --tinta:#EADFCE; --tinta-2:rgba(255,255,255,.76); --tinta-3:rgba(255,255,255,.52);
  --linea:rgba(234,223,206,.18); --linea-2:rgba(234,223,206,.32); --acento:#9CCFD9; --relleno:#1A2633; --relleno-tinta:#EADFCE;
  --campo:rgba(255,255,255,.07); --vacio:rgba(255,255,255,.05);
}
/* CLARO · papel crema y hojas blancas */
html[data-tema="claro"]{
  --suelo:#F6F3ED; --hoja:#FFFFFF; --hoja-2:#EFE9DF; --tinta:#1A2633; --tinta-2:#4A5663; --tinta-3:#7A8590;
  --linea:#E2D9CA; --linea-2:#CFC3AF; --acento:#006D82; --relleno:#005565; --relleno-tinta:#FFFFFF;
  --campo:#FBF9F5; --vacio:#EFE9DF;
}
*{ box-sizing:border-box; }
html, body, *{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar{ width:0 !important; height:0 !important; background:transparent; }
html{ background:var(--suelo); }
body{ margin:0; background:var(--suelo); color:var(--tinta); font-family:var(--sans); font-weight:400; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; }
button, input, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }
.material-icons-outlined{ font-size:20px; line-height:1; vertical-align:middle; }
[hidden]{ display:none !important; }
.num{ font-variant-numeric:tabular-nums; }

/* ── login (sobre la foto: igual en los tres temas) ── */
.ingreso{ background:#141D27 url('fotos/1727373896197-233ff39fcce8.webp') no-repeat center 40% / cover fixed; display:flex; }
.ingreso::before{ content:''; position:fixed; inset:0; background:linear-gradient(180deg, rgba(20,29,39,.18), rgba(20,29,39,.5)); pointer-events:none; }

/* ── la barra de arriba ── */
.barra{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:30; display:flex; align-items:center; gap:18px;
  padding:12px clamp(16px, 3vw, 36px); background:color-mix(in srgb, var(--suelo) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--linea); }
.sello{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:none; }
.sello img{ width:30px; height:30px; object-fit:contain; }
html[data-tema="claro"] .sello img{ filter:brightness(.25) sepia(.3) hue-rotate(160deg); }
.sello b{ display:block; font-family:var(--serif); font-weight:400; font-size:19px; letter-spacing:.2em; line-height:1; }
.sello em{ display:block; font-style:normal; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--tinta-2); margin-top:5px; }
.pestanas{ display:flex; gap:4px; margin-left:12px; }
.pestana{ border:0; background:transparent; padding:8px 14px; border-radius:999px; color:var(--tinta-2); font-size:13px; letter-spacing:.04em; text-decoration:none; }
.pestana:hover{ color:var(--tinta); background:var(--vacio); }
.pestana[aria-current="page"]{ background:var(--relleno); color:var(--relleno-tinta); }
.buscador{ flex:1; max-width:420px; margin-left:auto; position:relative; }
.buscador input{ width:100%; border:1px solid var(--linea); background:var(--campo); border-radius:999px; padding:9px 14px 9px 38px; outline:none; }
.buscador input:focus{ border-color:var(--linea-2); }
.buscador .material-icons-outlined{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--tinta-3); font-size:18px; }
.resultados{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--hoja); border:1px solid var(--linea); border-radius:14px;
  box-shadow:var(--sombra); padding:8px; max-height:60vh; overflow:auto; }
.resultados h4{ margin:8px 10px 4px; font-weight:400; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--tinta-3); }
.resultado{ display:flex; gap:10px; align-items:center; width:100%; text-align:left; border:0; background:transparent; padding:8px 10px; border-radius:10px; }
.resultado:hover{ background:var(--vacio); }
.resultado i{ width:38px; height:38px; border-radius:8px; background:var(--hoja-2) center/cover; flex:none; display:grid; place-items:center; font-style:normal; color:var(--tinta-3); }
.resultado small{ display:block; color:var(--tinta-2); font-size:12px; }
.usuario{ display:flex; align-items:center; gap:8px; flex:none; }
.usuario > span{ font-size:13px; color:var(--tinta-2); }
.redondo{ width:36px; height:36px; border-radius:50%; border:1px solid var(--linea); background:var(--campo); display:grid; place-items:center; color:var(--tinta-2); padding:0; }
.redondo:hover{ color:var(--tinta); border-color:var(--linea-2); }

/* ── botones ── */
.boton{ display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:999px; padding:10px 18px; font-size:13.5px;
  letter-spacing:.03em; background:var(--relleno); color:var(--relleno-tinta); text-decoration:none; white-space:nowrap; transition:background .2s, border-color .2s; }
.boton:hover{ background:color-mix(in srgb, var(--relleno) 82%, #000); }
.boton--suave{ background:transparent; color:var(--tinta); border-color:var(--linea-2); }
.boton--suave:hover{ background:var(--vacio); }
.boton--peligro{ background:var(--rojo); color:#fff; }
.boton--peligro:hover{ background:#8f1e18; }
.boton:disabled{ opacity:.5; cursor:default; }
.boton .material-icons-outlined{ font-size:18px; }
/* Sobre la foto: botones de vidrio, iguales en los tres temas. */
.sobre-foto .boton{ background:rgba(255,255,255,.94); color:#1A2633; }
.sobre-foto .boton:hover{ background:#fff; }
.sobre-foto .boton--suave{ background:rgba(20,29,39,.35); color:#fff; border-color:rgba(255,255,255,.34); backdrop-filter:blur(10px); }
.sobre-foto .boton--suave:hover{ background:rgba(20,29,39,.55); }

/* ── página ── */
.pagina{ padding:clamp(20px, 3vw, 40px) clamp(16px, 3vw, 36px) 120px; max-width:1500px; margin:0 auto; }
.encabezado{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.encabezado h1{ font-family:var(--serif); font-weight:400; font-size:clamp(30px, 4vw, 44px); line-height:1.05; margin:0; letter-spacing:.01em; }
.encabezado p{ margin:8px 0 0; color:var(--tinta-2); max-width:62ch; }
.etiqueta{ font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--tinta-3); }
.filtros{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; align-items:center; }
.chip{ border:1px solid var(--linea); background:transparent; color:var(--tinta-2); border-radius:999px; padding:6px 14px; font-size:12.5px; }
.chip:hover{ color:var(--tinta); border-color:var(--linea-2); }
.chip[aria-pressed="true"]{ background:var(--relleno); border-color:var(--relleno); color:var(--relleno-tinta); }
.chip b{ font-weight:400; opacity:.7; margin-left:4px; }

/* ── tarjetas de colección (el foco: la de encima cobra vida, las demás se apagan) ── */
.tarjetas{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px; }
.tarjetas--chicas{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.tarjeta{ position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--hoja-2); color:#fff; text-decoration:none; display:block;
  isolation:isolate; transition:filter .6s var(--curva); filter:brightness(.92) saturate(.9); }
.tarjetas--chicas .tarjeta{ aspect-ratio:3/2; border-radius:12px; }
.tarjeta .foto{ position:absolute; inset:0; background:center/cover no-repeat; transform:scale(1.001); transition:transform 2.5s var(--curva); z-index:-2; }
.tarjeta::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,29,39,0) 35%, rgba(20,29,39,.82) 100%); transition:opacity .6s; }
.tarjeta .sin-foto{ position:absolute; inset:0; display:grid; place-items:center; z-index:-2;
  background:radial-gradient(120% 90% at 20% 0%, #24384a 0%, #141D27 70%); }
.tarjeta .sin-foto img{ width:46px; opacity:.32; }
.tarjeta .texto{ position:absolute; left:18px; right:18px; bottom:16px; }
.tarjeta strong{ display:block; font-family:var(--serif); font-weight:400; font-size:23px; line-height:1.12; text-wrap:balance; }
.tarjetas--chicas .tarjeta strong{ font-size:18px; }
.tarjeta small{ display:block; margin-top:6px; font-size:11.5px; color:rgba(255,255,255,.82); letter-spacing:.02em; }
.tarjeta .prov{ position:absolute; top:14px; left:14px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; padding:5px 10px; border-radius:999px;
  background:rgba(20,29,39,.42); backdrop-filter:blur(8px); color:#fff; max-width:calc(100% - 28px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tarjetas:hover .tarjeta{ filter:brightness(.58) saturate(.55); }
.tarjetas .tarjeta:hover, .tarjetas .tarjeta:focus-visible{ filter:none; }
.tarjeta:hover .foto, .tarjeta:focus-visible .foto{ transform:scale(1.06); }
.tarjeta:hover::after{ opacity:.85; }
.tarjeta--nueva{ display:grid; place-items:center; text-align:center; color:var(--tinta-2); background:var(--vacio); border:1px dashed var(--linea-2); filter:none !important; }
.tarjeta--nueva::after{ display:none; }
.tarjeta--nueva:hover{ color:var(--tinta); border-color:var(--acento); }
.tarjeta--nueva .material-icons-outlined{ font-size:28px; display:block; margin:0 auto 8px; }
@media (prefers-reduced-motion:reduce){ .tarjeta .foto{ transition:none; } .tarjeta:hover .foto{ transform:none; } }

.vacio{ text-align:center; padding:70px 20px; border:1px dashed var(--linea-2); border-radius:18px; color:var(--tinta-2); }
.vacio h2{ font-family:var(--serif); font-weight:400; font-size:26px; color:var(--tinta); margin:14px 0 6px; }
.vacio p{ margin:0 auto 20px; max-width:46ch; }
.vacio img{ width:44px; opacity:.5; }
html[data-tema="claro"] .vacio img{ filter:brightness(.3); }

/* ── la carpeta: su foto arriba ── */
.portada{ position:relative; min-height:clamp(300px, 46vh, 520px); display:flex; align-items:flex-end; color:#fff; overflow:hidden;
  background:#141D27; margin:0 0 30px; }
.portada .foto{ position:absolute; inset:0; background:center/cover no-repeat; }
.portada::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,29,39,.30) 0%, rgba(20,29,39,.10) 38%, rgba(20,29,39,.86) 100%); }
.portada--sin{ background:radial-gradient(120% 120% at 15% 0%, #24384a 0%, #141D27 65%); }
.portada .dentro{ position:relative; z-index:1; width:100%; max-width:1500px; margin:0 auto; padding:30px clamp(16px, 3vw, 36px) 30px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.migas{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; letter-spacing:.06em; color:rgba(255,255,255,.8); margin-bottom:14px; }
.migas a{ color:inherit; text-decoration:none; }
.migas a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.migas .material-icons-outlined{ font-size:15px; opacity:.6; }
.portada h1{ font-family:var(--serif); font-weight:400; font-size:clamp(34px, 5.4vw, 64px); line-height:1.02; margin:0; text-wrap:balance; max-width:18ch; }
.portada .datos{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:14px; font-size:13px; color:rgba(255,255,255,.86); align-items:center; }
.portada .datos .pastilla{ border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:4px 12px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.portada .desc{ margin:12px 0 0; max-width:60ch; color:rgba(255,255,255,.86); }
.acciones{ display:flex; flex-wrap:wrap; gap:10px; }

.seccion{ margin:0 0 36px; }
.seccion > header{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.seccion h2{ font-family:var(--serif); font-weight:400; font-size:24px; margin:0; }

/* ── el mosaico de archivos ── */
.mosaico{ columns:4 240px; column-gap:12px; }
.pieza{ position:relative; break-inside:avoid; margin:0 0 12px; border-radius:10px; overflow:hidden; background:var(--hoja-2); display:block; width:100%;
  border:0; padding:0; text-align:left; cursor:zoom-in; color:#fff; }
.pieza img{ display:block; width:100%; height:auto; transition:transform 1.8s var(--curva), filter .5s; }
.mosaico:hover .pieza img{ filter:brightness(.74) saturate(.8); }
.mosaico .pieza:hover img{ filter:none; transform:scale(1.03); }
.pieza .marca-video{ position:absolute; left:10px; bottom:10px; display:flex; gap:6px; align-items:center; font-size:12px; padding:4px 10px 4px 6px; border-radius:999px;
  background:rgba(20,29,39,.55); backdrop-filter:blur(6px); }
.pieza .marca-video .material-icons-outlined{ font-size:18px; }
.pieza .elegir{ position:absolute; top:10px; left:10px; width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.9); background:rgba(20,29,39,.28);
  display:grid; place-items:center; opacity:0; transition:opacity .2s; color:#fff; padding:0; }
.pieza .elegir .material-icons-outlined{ font-size:16px; opacity:0; }
.pieza:hover .elegir, .pieza:focus-within .elegir, .eligiendo .pieza .elegir{ opacity:1; }
.pieza.elegida .elegir{ background:var(--deep); border-color:var(--deep); }
.pieza.elegida .elegir .material-icons-outlined{ opacity:1; }
.pieza.elegida{ outline:2px solid var(--acento); outline-offset:2px; }
.pieza .es-portada{ position:absolute; top:10px; right:10px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:rgba(20,29,39,.55); backdrop-filter:blur(6px); }
.pieza .sin-mini{ aspect-ratio:4/3; display:grid; place-items:center; color:var(--tinta-3); }
/* Un documento: una hoja con su extensión. */
.pieza--doc{ cursor:pointer; background:var(--hoja); border:1px solid var(--linea); color:var(--tinta); padding:18px 16px 16px; }
.pieza--doc .ext{ font-family:var(--serif); font-size:30px; letter-spacing:.08em; color:var(--acento); line-height:1; }
.pieza--doc .nom{ display:block; margin-top:22px; font-size:13.5px; word-break:break-word; }
.pieza--doc small{ display:block; margin-top:4px; color:var(--tinta-3); font-size:12px; }
.pieza--doc .elegir{ border-color:var(--linea-2); background:var(--campo); color:var(--tinta); left:auto; right:10px; }

/* ── la bandeja de lo elegido ── */
.bandeja{ position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:40; display:flex; gap:6px; align-items:center;
  background:var(--hoja); border:1px solid var(--linea-2); border-radius:999px; padding:6px 6px 6px 18px; box-shadow:var(--sombra); max-width:calc(100% - 32px); flex-wrap:wrap; }
.bandeja > span{ font-size:13px; color:var(--tinta-2); margin-right:6px; }
.bandeja .boton{ padding:8px 14px; }

/* ── soltar archivos ── */
.soltar{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(0,85,101,.62); backdrop-filter:blur(4px); pointer-events:none;
  color:#fff; text-align:center; }
.soltar div{ border:2px dashed rgba(255,255,255,.7); border-radius:24px; padding:48px 60px; }
.soltar strong{ display:block; font-family:var(--serif); font-weight:400; font-size:32px; }

/* ── subidas en curso ── */
.subidas{ position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:45; width:340px; max-width:calc(100% - 32px); background:var(--hoja);
  border:1px solid var(--linea-2); border-radius:16px; box-shadow:var(--sombra); overflow:hidden; }
.subidas header{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px 10px 16px; font-size:13px; border-bottom:1px solid var(--linea); }
.subidas ul{ list-style:none; margin:0; padding:6px 0; max-height:260px; overflow:auto; }
.subidas li{ padding:8px 16px; font-size:12.5px; }
.subidas li .fila{ display:flex; justify-content:space-between; gap:10px; }
.subidas li .fila span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.subidas li .fila span:last-child{ color:var(--tinta-3); flex:none; }
.subidas .barrita{ height:3px; border-radius:2px; background:var(--vacio); margin-top:6px; overflow:hidden; }
.subidas .barrita i{ display:block; height:100%; width:100%; background:var(--acento); transform:scaleX(0); transform-origin:left center; transition:transform .3s; }
.subidas li.error .fila span:last-child{ color:var(--rojo); }
html[data-tema="oscuro"] .subidas li.error .fila span:last-child, html[data-tema="teal"] .subidas li.error .fila span:last-child{ color:#E2766F; }

/* ── ventanas ── */
.velo{ position:fixed; inset:0; z-index:70; background:rgba(10,16,22,.62); backdrop-filter:blur(6px); display:grid; place-items:center; padding:16px; animation:aparecer .25s; }
@keyframes aparecer{ from{ opacity:0; } }
.ventana{ width:min(560px, 100%); max-height:calc(100vh - 32px); overflow:auto; background:var(--hoja); color:var(--tinta); border:1px solid var(--linea);
  border-radius:20px; box-shadow:var(--sombra); padding:26px; animation:subir .35s var(--curva); }
.ventana--ancha{ width:min(1040px, 100%); }
@keyframes subir{ from{ opacity:0; transform:translateY(12px); } }
.ventana h2{ font-family:var(--serif); font-weight:400; font-size:26px; margin:0 0 6px; }
.ventana > p{ margin:0 0 18px; color:var(--tinta-2); }
.campos{ display:flex; flex-direction:column; gap:14px; }
.campo label{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:6px; }
.campo input[type=text], .campo input[type=date], .campo textarea, .campo select{ width:100%; border:1px solid var(--linea); background:var(--campo); border-radius:12px; padding:10px 12px; outline:none; }
.campo input:focus, .campo textarea:focus{ border-color:var(--acento); }
.campo textarea{ min-height:86px; resize:vertical; }
.campo .ayuda{ margin:6px 0 0; font-size:12px; color:var(--tinta-3); }
.campo .ayuda.mal{ color:var(--rojo); }
html[data-tema="oscuro"] .campo .ayuda.mal, html[data-tema="teal"] .campo .ayuda.mal{ color:#E2766F; }
.pie-ventana{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; flex-wrap:wrap; }
.pie-ventana .izq{ margin-right:auto; }
.dos{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .dos{ grid-template-columns:1fr; } }
.interruptor{ display:flex; align-items:center; gap:10px; font-size:13.5px; cursor:pointer; }
/* Dentro de un campo, las casillas son texto normal, no un título de campo. */
.campo label.interruptor, .campo label.rama{ display:flex; margin:0; font-size:14px; letter-spacing:normal; text-transform:none; color:var(--tinta); }
.campo label.rama.incluida{ color:var(--tinta-2); }
.interruptor input{ width:18px; height:18px; accent-color:var(--deep); }

/* El proveedor de CIMA */
.proveedor-elegido{ display:flex; align-items:center; gap:12px; border:1px solid var(--linea); border-radius:12px; padding:10px 12px; background:var(--campo); }
.proveedor-elegido div{ flex:1; min-width:0; }
.proveedor-elegido small{ display:block; color:var(--tinta-3); font-size:12px; }
.lista-prov{ margin-top:8px; border:1px solid var(--linea); border-radius:12px; max-height:220px; overflow:auto; }
.lista-prov button{ display:block; width:100%; text-align:left; border:0; background:transparent; padding:9px 12px; border-bottom:1px solid var(--linea); }
.lista-prov button:last-child{ border-bottom:0; }
.lista-prov button:hover{ background:var(--vacio); }
.lista-prov small{ color:var(--tinta-3); font-size:12px; margin-left:6px; }

/* El árbol para elegir */
.arbol{ border:1px solid var(--linea); border-radius:14px; padding:6px; max-height:52vh; overflow:auto; background:var(--campo); }
.rama{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:10px; cursor:pointer; font-size:14px; }
.rama:hover{ background:var(--vacio); }
.rama input{ width:17px; height:17px; accent-color:var(--deep); flex:none; }
.rama .n{ margin-left:auto; color:var(--tinta-3); font-size:12px; }
.rama small{ color:var(--tinta-3); font-size:12px; }
.rama.incluida{ color:var(--tinta-2); }
.rama.apagada{ opacity:.4; pointer-events:none; }

/* ── el visor ── */
.visor{ position:fixed; inset:0; z-index:80; background:#0D141B; color:#EADFCE; display:grid; grid-template-columns:1fr 340px; animation:aparecer .25s; }
.visor .escena{ position:relative; display:grid; place-items:center; min-width:0; min-height:0; padding:24px 64px; }
.visor .escena img, .visor .escena video{ max-width:100%; max-height:calc(100vh - 48px); object-fit:contain; border-radius:4px; }
.visor .escena iframe{ width:100%; height:calc(100vh - 48px); border:0; background:#fff; border-radius:4px; }
.visor .flecha{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; border:1px solid rgba(234,223,206,.24);
  background:rgba(20,29,39,.5); color:#EADFCE; display:grid; place-items:center; }
.visor .flecha:hover{ background:rgba(20,29,39,.85); }
.visor .flecha.ant{ left:12px; } .visor .flecha.sig{ right:12px; }
.visor aside{ background:#141D27; border-left:1px solid rgba(234,223,206,.1); padding:22px; overflow:auto; display:flex; flex-direction:column; gap:16px; }
.visor aside .cerrar{ align-self:flex-end; }
.visor aside h3{ font-family:var(--serif); font-weight:400; font-size:22px; margin:0; word-break:break-word; }
.visor aside dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; }
.visor aside dt{ color:rgba(234,223,206,.5); }
.visor aside dd{ margin:0; }
.visor aside .campo input, .visor aside .campo textarea{ background:rgba(234,223,206,.05); border-color:rgba(234,223,206,.14); color:#EADFCE; }
.visor aside .campo label{ color:rgba(234,223,206,.5); }
.visor aside .boton{ justify-content:center; }
.visor aside .boton--suave{ color:#EADFCE; border-color:rgba(234,223,206,.24); }
.visor aside .redondo{ border-color:rgba(234,223,206,.2); color:#EADFCE; background:transparent; }
.visor .contador{ position:absolute; top:18px; left:24px; font-size:12px; letter-spacing:.14em; color:rgba(234,223,206,.6); }
@media (max-width:860px){
  .visor{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .visor .escena{ padding:56px 12px 12px; }
  .visor .escena img, .visor .escena video{ max-height:62vh; }
  .visor aside{ max-height:38vh; border-left:0; border-top:1px solid rgba(234,223,206,.1); }
  .visor aside .cerrar{ position:fixed; top:12px; right:12px; }
}

/* ── enlaces para clientes ── */
.enlaces{ display:flex; flex-direction:column; gap:12px; }
.enlace{ display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:18px; align-items:center; background:var(--hoja); border:1px solid var(--linea); border-radius:16px; padding:12px 16px 12px 12px; }
.enlace .mini{ width:96px; height:72px; border-radius:10px; background:var(--hoja-2) center/cover; }
.enlace h3{ font-family:var(--serif); font-weight:400; font-size:20px; margin:0; }
.enlace .linea{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12.5px; color:var(--tinta-2); margin-top:4px; align-items:center; }
.enlace code{ font-family:var(--sans); font-size:12.5px; color:var(--acento); word-break:break-all; }
.enlace .acciones{ justify-content:flex-end; }
.estado{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; border-radius:999px; padding:3px 9px; border:1px solid currentColor; }
.estado--activo{ color:var(--salvia); } .estado--pausa{ color:var(--tinta-3); } .estado--vencido{ color:var(--ocre); }
html[data-tema="oscuro"] .estado--vencido, html[data-tema="teal"] .estado--vencido{ color:#C9A566; }
html[data-tema="teal"] .estado--activo{ color:#B6D39A; }
@media (max-width:760px){ .enlace{ grid-template-columns:72px minmax(0,1fr); } .enlace .mini{ width:72px; height:56px; } .enlace .acciones{ grid-column:1 / -1; justify-content:flex-start; } }
.listo-enlace{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; border:1px solid var(--linea); background:var(--campo); border-radius:12px; padding:12px 14px; margin-top:14px; }
.listo-enlace code{ flex:1; min-width:0; word-break:break-all; color:var(--acento); font-family:var(--sans); }
.editor-enlace{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:26px; }
@media (max-width:820px){ .editor-enlace{ grid-template-columns:1fr; } }
.prefijo{ display:flex; align-items:center; border:1px solid var(--linea); border-radius:12px; background:var(--campo); overflow:hidden; }
.prefijo span{ padding:10px 0 10px 12px; color:var(--tinta-3); font-size:13px; white-space:nowrap; }
.prefijo input{ border:0 !important; background:transparent !important; padding-left:2px !important; border-radius:0 !important; }

.aviso{ position:fixed; left:50%; top:calc(76px + env(safe-area-inset-top, 0px)); transform:translateX(-50%); z-index:90; background:var(--relleno); color:var(--relleno-tinta);
  padding:10px 18px; border-radius:999px; font-size:13px; box-shadow:var(--sombra); animation:subir .3s var(--curva); max-width:calc(100% - 32px); }
.aviso.mal{ background:var(--rojo); color:#fff; }
.cargando{ display:grid; place-items:center; min-height:50vh; color:var(--tinta-3); }
.cargando img{ width:44px; animation:girar 6s linear infinite; opacity:.7; }
html[data-tema="claro"] .cargando img{ filter:brightness(.3); }
@keyframes girar{ to{ transform:rotate(360deg); } }
.r2-aviso{ border:1px solid var(--ocre); color:var(--tinta); background:color-mix(in srgb, var(--ocre) 12%, transparent); border-radius:14px; padding:12px 16px; margin:0 0 22px; font-size:13.5px; display:flex; gap:10px; align-items:flex-start; }

@media (max-width:820px){
  .barra{ flex-wrap:wrap; gap:10px 12px; }
  .pestanas{ order:3; margin-left:0; }
  .buscador{ order:4; flex-basis:100%; max-width:none; }
  .usuario > span{ display:none; }
  .tarjetas{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:12px; }
  .tarjeta strong{ font-size:19px; }
  .mosaico{ columns:2 150px; column-gap:8px; }
  .pieza{ margin-bottom:8px; }
}

/* ── el editor de enlaces: el formulario a la izquierda y la vista previa en vivo a la derecha ── */
.ventana--editor{ width:min(1480px, 100%); height:calc(100vh - 32px); height:calc(100dvh - 32px); max-height:none; padding:0; overflow:hidden; }
.editor{ display:grid; grid-template-columns:minmax(360px, 460px) minmax(0, 1fr); height:100%; }
.editor-form{ overflow:auto; padding:26px; border-right:1px solid var(--linea); }
.editor-form .suave{ margin:0 0 18px; color:var(--tinta-2); }
.editor-form .dos{ grid-template-columns:1fr 1fr; }
.editor-previa{ display:flex; flex-direction:column; min-width:0; background:var(--suelo); }
.previa-barra{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--linea); flex-wrap:wrap; }
.previa-barra .chip{ display:inline-flex; align-items:center; gap:6px; }
.previa-marco{ flex:1; min-height:0; display:grid; place-items:center; padding:18px; }
.previa-marco iframe{ width:100%; height:100%; border:0; border-radius:10px; background:#141D27; box-shadow:var(--sombra); }
.previa-marco[data-pantalla="celular"] iframe{ width:390px; max-width:100%; height:min(100%, 844px); border-radius:28px; border:8px solid #0D141B; }
@media (max-width:980px){
  .ventana--editor{ height:auto; max-height:calc(100vh - 32px); overflow:auto; }
  .editor{ grid-template-columns:1fr; height:auto; }
  .editor-form{ border-right:0; overflow:visible; }
  .editor-previa{ height:80vh; }
}

/* Los diseños: tarjetas con un dibujito de cada página, hecho con CSS. */
.disenos{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.diseno{ position:relative; display:flex !important; flex-direction:column; gap:4px; border:1px solid var(--linea); border-radius:14px; padding:10px 12px 12px; cursor:pointer;
  text-transform:none !important; letter-spacing:normal !important; font-size:13px !important; color:var(--tinta) !important; margin:0 !important; background:var(--campo); }
.diseno:hover{ border-color:var(--linea-2); }
.diseno:has(input:checked){ border-color:var(--acento); box-shadow:inset 0 0 0 1px var(--acento); }
.diseno input{ position:absolute; opacity:0; pointer-events:none; }
.diseno:has(input:focus-visible){ outline:2px solid var(--acento); outline-offset:2px; }
.diseno b{ font-weight:400; font-family:var(--serif); font-size:17px; }
.diseno small{ color:var(--tinta-3); font-size:11.5px; line-height:1.35; }
.dibujo{ display:block; position:relative; height:64px; border-radius:8px; overflow:hidden; margin-bottom:6px; }
.dibujo i{ position:absolute; display:block; border-radius:2px; }
.dibujo--editorial{ background:#141D27; }
.dibujo--editorial i:nth-child(1){ left:0; right:0; top:0; height:30px; background:linear-gradient(180deg, #4F6749, #2F3B22); }
.dibujo--editorial i:nth-child(2){ left:8px; width:34%; top:36px; height:22px; background:#33475a; }
.dibujo--editorial i:nth-child(3){ left:44%; right:8px; top:36px; height:22px; background:#2a3b4c; }
.dibujo--kit{ background:#F6F3ED; }
.dibujo--kit i:nth-child(1){ left:8px; width:36%; top:10px; height:6px; background:#1A2633; }
.dibujo--kit i:nth-child(2){ left:50%; right:8px; top:8px; height:26px; background:#7D9B5B; }
.dibujo--kit i:nth-child(3){ left:8px; right:8px; top:42px; height:14px; background:repeating-linear-gradient(90deg, #CFC3AF 0 28%, transparent 28% 36%); }
.dibujo--cine{ background:#0D141B; }
.dibujo--cine i:nth-child(1){ inset:0; background:linear-gradient(90deg, rgba(13,20,27,.9), rgba(13,20,27,0)), linear-gradient(135deg, #006D82, #2F3B22); border-radius:0; }
.dibujo--cine i:nth-child(2){ left:8px; width:40%; top:24px; height:8px; background:#EADFCE; }
.dibujo--cine i:nth-child(3){ left:8px; width:24%; top:38px; height:4px; background:rgba(234,223,206,.6); }
.dibujo--envio{ background:radial-gradient(120% 90% at 20% 0%, #24384a 0%, #141D27 70%); }
.dibujo--envio i:nth-child(1){ left:24%; right:24%; top:8px; bottom:8px; background:rgba(234,223,206,.12); border-radius:6px; }
.dibujo--envio i:nth-child(2){ left:30%; right:30%; top:16px; height:6px; background:#EADFCE; }
.dibujo--envio i:nth-child(3){ left:30%; right:30%; top:30px; height:18px; background:repeating-linear-gradient(180deg, rgba(234,223,206,.4) 0 3px, transparent 3px 6px); }

/* ── enviar archivos ── */
.zona-envio{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; border:1.5px dashed var(--linea-2); border-radius:16px; padding:28px 16px;
  color:var(--tinta-2); cursor:pointer; background:var(--campo); transition:border-color .2s, background .2s; }
.zona-envio b{ font-weight:400; font-family:var(--serif); font-size:20px; color:var(--tinta); }
.zona-envio small{ font-size:12px; color:var(--tinta-3); }
.zona-envio:hover, .zona-envio.encima{ border-color:var(--acento); background:var(--vacio); }
.lista-envio{ list-style:none; margin:12px 0 0; padding:0; max-height:200px; overflow:auto; }
.lista-envio li{ display:flex; align-items:center; gap:10px; padding:6px 2px; border-bottom:1px solid var(--linea); font-size:13px; }
.lista-envio li span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-envio li small{ color:var(--tinta-3); flex:none; }
.lista-envio li .redondo{ width:28px; height:28px; }
.lista-envio li.total{ border-bottom:0; color:var(--tinta-2); }

/* ── el visor del panel con un documento: ocupa la escena entera ── */
.visor--doc .escena{ padding:20px; place-items:stretch; }
.visor--doc .lienzo{ width:100%; height:calc(100vh - 40px); display:flex; }
@media (max-width:860px){ .visor--doc .lienzo{ height:60vh; } }

/* ── los dos modos: lo que es sólo del administrador no se le ofrece al vendedor ── */
html[data-modo="vendedor"] .solo-admin{ display:none !important; }
.modo{ display:flex; padding:3px; border:1px solid var(--linea); border-radius:999px; background:var(--campo); flex:none; }
.modo button{ border:0; background:transparent; color:var(--tinta-2); font-size:12px; padding:6px 12px; border-radius:999px; }
.modo button[aria-pressed="true"]{ background:var(--relleno); color:var(--relleno-tinta); }
.estado--listo{ color:var(--acento); }

/* ── la ventana de un envío: a la izquierda de dónde sale, a la derecha lo que va ── */
.envio-columnas{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; }
@media (max-width:760px){ .envio-columnas{ grid-template-columns:1fr; } }
.envio-columnas .etiqueta{ display:block; margin-bottom:8px; }
.arbol--envio{ max-height:46vh; }
.rama-envio{ display:flex; align-items:center; gap:6px; }
.rama-envio .rama{ flex:1; min-width:0; }
.rama-envio .redondo{ width:30px; height:30px; flex:none; }
.archivos-envio{ display:grid; grid-template-columns:repeat(auto-fill, minmax(86px, 1fr)); gap:8px; padding:6px 8px 12px; }
.pieza-envio{ position:relative; display:flex; flex-direction:column; gap:4px; cursor:pointer; font-size:11px; color:var(--tinta-2); }
.pieza-envio input{ position:absolute; top:6px; left:6px; width:16px; height:16px; accent-color:var(--deep); }
.pieza-envio img, .pieza-envio .ext{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--hoja-2); border:2px solid transparent; }
.pieza-envio .ext{ display:grid; place-items:center; font-family:var(--serif); font-size:16px; color:var(--acento); }
.pieza-envio.elegida img, .pieza-envio.elegida .ext{ border-color:var(--acento); }
.pieza-envio small{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-envio li .material-icons-outlined{ flex:none; }