/* Ideas en Producción — cuenta del usuario (27-sep-2026): Entrar, Mi cuenta, Mis proyectos, franjas, avisos de créditos y pie.
   Usa las variables de public/estilo.css (--bg, --surface, --ink, --muted, --line, --accent…) y respeta data-theme="dark"
   y prefers-reduced-motion. Una idea por pantalla, objetivos táctiles ≥ 44 px, foco visible. */
:root{ --rojo-txt:#BE123C; --hoja-fondo:rgba(15,14,31,.45); }
:root[data-theme="dark"]{ --rojo-txt:#FDA4AF; --hoja-fondo:rgba(0,0,0,.62); }

/* ===== cabecera: Entrar / Mi cuenta ===== */
/* Orden del DOM = orden visual (WCAG 2.4.3): marca · Entrar/Mi cuenta (empujado a la derecha) · insignias. En el celular las insignias pasan a una segunda fila completa. */
.cuenta-cab{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.cuenta-cab button{min-height:44px;border-radius:999px;font-size:.88rem;padding:8px 16px;display:inline-flex;align-items:center;gap:8px}
#btnEntrar{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);border-color:transparent;box-shadow:var(--sombra-acento);padding-inline:18px}
#btnEntrar:hover:not(:disabled){box-shadow:0 18px 40px rgba(109,40,217,.35)}
#btnCuenta{padding:5px 14px 5px 5px;max-width:230px}
#btnCuenta .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-2));flex:none}
.avatar.grande{width:56px;height:56px;font-size:1.4rem}
.sem-dot{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:0 0 0 3px var(--surface)}
.sem-dot.verde{background:var(--ok)} .sem-dot.amarillo{background:var(--warn)} .sem-dot.rojo{background:var(--coral)}
@media (max-width:560px){ header .badges{flex-basis:100%} .cuenta-cab button{font-size:.84rem} #btnCuenta{padding:5px 12px 5px 5px} #btnCuenta .nom{display:none} }

/* ===== franjas bajo la cabecera (mantenimiento, bienvenida de la organización) ===== */
.franja{margin-inline:calc(50% - 50vw);padding:10px calc(50vw - 50%);display:flex;gap:10px;align-items:center;justify-content:center;text-align:center;font-size:.92rem;font-weight:500;line-height:1.45}
.franja .ic{flex:none;font-size:1.05rem}
.franja.mant{background:var(--warn-soft);color:var(--warn);border-bottom:1px solid color-mix(in srgb,var(--warn) 25%,transparent)}
.franja.bienvenida{background:var(--accent-soft);color:var(--ink)}

/* ===== hojas (diálogos) ===== */
html.con-hoja{overflow:hidden}
dialog.hoja{border:0;padding:0;background:transparent;color:var(--ink);width:min(100% - 32px,480px);max-width:none;max-height:min(92vh,92dvh);overflow:visible}
dialog.hoja.ancha{width:min(100% - 32px,560px)}
dialog.hoja::backdrop{background:var(--hoja-fondo,rgba(15,14,31,.45));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.hoja.sin-modal{position:fixed;inset:0;margin:auto;z-index:70;display:block}
dialog.hoja.sin-modal::before{content:"";position:fixed;inset:0;background:var(--hoja-fondo);z-index:-1}
.hoja-cuerpo{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:28px 28px 26px;box-shadow:var(--sombra-2);max-height:min(92vh,92dvh);overflow:auto;-webkit-overflow-scrolling:touch}
dialog.hoja[open] .hoja-cuerpo{animation:hoja-entra .45s var(--ease) both}
@keyframes hoja-entra{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.hoja .cerrar{position:absolute;top:14px;right:14px;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:grid;place-items:center;font-size:1rem;background:var(--bg-2);border-color:transparent;color:var(--muted);box-shadow:none;z-index:2}
.hoja .cerrar:hover:not(:disabled){transform:none;background:var(--accent-soft);color:var(--accent);box-shadow:none}
.hoja .kicker{margin-bottom:8px}
.hoja h2{font-size:clamp(1.5rem,4vw,1.9rem);margin:0 0 8px;padding-right:44px}
.hoja .hint{margin:0}
.hoja p.hint{margin:0 0 18px}
.hoja form{display:grid;gap:14px}
.hoja .etq{margin-bottom:0}
.hoja .campo{display:grid;gap:6px}
.hoja input{min-height:52px;font-size:1.05rem;border-radius:16px}
.hoja input.codigo{font-family:var(--mono);font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase;text-align:center}
.hoja input[aria-invalid="true"]{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-soft)}
.hoja .motivo{padding:10px 14px;border-radius:14px;background:var(--accent-soft);border-left:4px solid var(--accent);color:var(--ink);font-size:.92rem}
.check{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:6px 0;cursor:pointer;font-size:.92rem;line-height:1.5}
.check input{width:24px;height:24px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--accent);border-radius:6px}
.check a{color:var(--accent);font-weight:600}
.check small{color:var(--muted);font-weight:500}
.hoja-error{margin:0;padding:12px 14px;border-radius:14px;background:var(--coral-soft);color:var(--rojo-txt);font-weight:600;font-size:.92rem;border-left:4px solid var(--coral)}
.hoja-acciones{display:flex;flex-direction:column;gap:6px;align-items:stretch;margin-top:4px}
.hoja-acciones .primary{width:100%}
.enlace-btn{background:none;border:0;border-radius:12px;color:var(--accent);font-weight:600;padding:10px 8px;min-height:44px;box-shadow:none;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;justify-self:start;align-self:center}
.enlace-btn:hover:not(:disabled){transform:none;box-shadow:none;background:var(--accent-soft)}
.hoja button.primary.spin::before{border-color:rgba(255,255,255,.35);border-top-color:#fff}
.hoja-vista>.enlace-btn{display:inline-flex;margin:-6px 0 6px -8px}
.hoja-vista>.kicker{display:block}

/* bottom sheet en pantallas pequeñas */
@media (max-width:560px){
  dialog.hoja,dialog.hoja.ancha{width:100%;max-width:100%;margin:auto 0 0;max-height:min(94vh,94dvh)}
  .hoja-cuerpo{border-radius:28px 28px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom,0px));max-height:min(94vh,94dvh)}
  .hoja-cuerpo::before{content:"";display:block;width:44px;height:5px;border-radius:999px;background:var(--line);margin:-6px auto 14px}
  dialog.hoja[open] .hoja-cuerpo{animation-name:hoja-sube}
  @keyframes hoja-sube{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
}

/* ===== Mi cuenta ===== */
.perfil{display:flex;gap:16px;align-items:center;margin:4px 0 18px;padding-right:44px}
.perfil h2{margin:0 0 2px;padding:0}
.saldo-caja{display:grid;gap:8px;padding:18px 20px;border-radius:20px;background:linear-gradient(135deg,var(--bg-2),var(--surface) 70%);border:1px solid var(--line);margin-bottom:16px;justify-items:start}
.saldo-etq{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.saldo-num{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,6vw,3rem);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.saldo-num small{font-family:var(--body);font-weight:500;font-size:.9rem;color:var(--muted);letter-spacing:0}
.sem{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-weight:700;font-size:.8rem;line-height:1}
.sem::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;flex:none}
.sem.verde{background:var(--ok-soft);color:var(--ok)} .sem.amarillo{background:var(--warn-soft);color:var(--warn)} .sem.rojo{background:var(--coral-soft);color:var(--rojo-txt)}
.cuenta-acciones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cuenta-acciones button{min-height:52px;border-radius:16px;justify-content:center}
.cuenta-acciones .primary{grid-column:1/-1}
.zona-baja{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.zona-baja summary{color:var(--muted);font-size:.9rem;min-height:44px}
.zona-baja .hint{margin:4px 0 10px}
button.peligro{border-color:var(--coral);color:var(--rojo-txt);background:var(--surface)}
button.peligro:hover:not(:disabled){background:var(--coral-soft)}
button.peligro.confirmar{background:var(--rojo-txt);color:#fff;border-color:transparent} /* #BE123C + blanco = 5,9:1 */
:root[data-theme="dark"] button.peligro.confirmar{background:var(--coral-soft);color:var(--rojo-txt);border-color:var(--coral)} /* #FDA4AF sobre #3B1F27 ≈ 8:1 */
#cuProvisional{padding:10px 12px;border-radius:12px;background:var(--warn-soft);color:var(--warn);font-size:.86rem;margin-bottom:14px}

/* ===== Mis proyectos ===== */
.proy-lista{display:grid;gap:12px;margin-top:6px}
.proy-lista[aria-busy="true"]{opacity:.6}
.proy{border:1.5px solid var(--line);border-radius:18px;padding:14px 16px;background:var(--surface);display:grid;gap:10px;transition:border-color .2s ease,box-shadow .3s var(--ease)}
.proy:hover{border-color:var(--accent);box-shadow:var(--sombra)}
.proy.fuera{opacity:.62}
.proy-cab{display:flex;gap:12px;align-items:flex-start;min-width:0}
.proy .ic{width:42px;height:42px;border-radius:13px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.3rem;flex:none}
.proy b{font-family:var(--display);font-size:1.02rem;letter-spacing:-.01em;display:block;overflow-wrap:anywhere}
.proy .meta{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.proy-datos{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:.86rem}
.proy-datos dt{color:var(--muted);font-weight:600} .proy-datos dd{margin:0}
.vence.aviso{color:var(--warn);font-weight:700}
.vence.vencido{color:var(--muted)}
.proy-acciones{display:flex;flex-wrap:wrap;gap:8px}
a.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);text-decoration:none;font-weight:600;font-size:.88rem;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s ease}
a.btn:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:var(--accent)}
.proy-acciones button{font-size:.88rem;padding:8px 14px;border-radius:12px}
.proy-acciones button.renovar{border-color:var(--accent);color:var(--accent)}
.proy-est{margin:0}
.proy-est:empty{display:none}
.vacio{text-align:center;padding:30px 18px;border:1.5px dashed var(--line);border-radius:20px;display:grid;gap:8px;justify-items:center;background:var(--bg-2)}
.vacio .ic{font-size:2.4rem;line-height:1}
.vacio b{font-family:var(--display);font-size:1.15rem}
.vacio .hint{max-width:34ch;margin:0 0 6px}

/* ===== avisos del constructor (sin saldo, sin cuenta, reinicio, cola) y recibo de créditos ===== */
.aviso-tarjeta{margin-top:14px;padding:18px 20px;border-radius:18px;border:1.5px solid var(--line);background:var(--surface);display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:start;animation:entrar .5s var(--ease) both}
.aviso-tarjeta .ic{grid-row:1/4;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--bg-2)}
.aviso-tarjeta b{font-family:var(--display);font-size:1.08rem;letter-spacing:-.01em;padding-top:6px}
.aviso-tarjeta p{margin:0;color:var(--ink);font-size:.94rem;line-height:1.5}
.aviso-tarjeta .acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.aviso-tarjeta.sinSaldo{border-color:var(--warn);background:var(--warn-soft)} .aviso-tarjeta.sinSaldo .ic{background:var(--surface)}
.aviso-tarjeta.sinCuenta{border-color:var(--accent);background:var(--accent-soft)} .aviso-tarjeta.sinCuenta .ic{background:var(--surface)}
.aviso-tarjeta.reiniciar,.aviso-tarjeta.enCola{border-color:var(--sky);background:var(--sky-soft)} .aviso-tarjeta.reiniciar .ic,.aviso-tarjeta.enCola .ic{background:var(--surface)}
.recarga{grid-column:1/-1;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--surface);border:1px dashed var(--line);display:grid;gap:6px;font-size:.88rem}
.recarga b{font-family:var(--display);font-size:.95rem;padding:0}
.recarga p{font-size:.9rem;color:var(--muted)}
.recarga .acciones{margin-top:2px}
.recibo{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:12px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.recibo-tit{font-weight:700;color:var(--ink);font-family:var(--display)}
.recibo b{font-family:var(--mono);font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

/* ===== aviso flotante ===== */
.toast{position:fixed;left:50%;bottom:24px;z-index:80;transform:translateX(-50%) translateY(12px);opacity:0;background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:600;font-size:.92rem;box-shadow:var(--sombra-2);pointer-events:none;max-width:calc(100vw - 32px);text-align:center;transition:opacity .3s ease,transform .35s var(--ease)}
.toast.ver{opacity:1;transform:translateX(-50%)}

/* ===== pie ===== */
footer .pie-txt{margin:0 0 10px}
.pie-legal{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:12px 0 0;border-top:1px dashed var(--line)}
.pie-legal a{color:var(--accent);text-decoration:none;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.pie-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.pie-legal span{min-height:44px;display:inline-flex;align-items:center}
#pieLegal{margin:8px 0 0}

@media (max-width:560px){ .cuenta-acciones{grid-template-columns:1fr} .aviso-tarjeta{grid-template-columns:1fr;padding:16px} .aviso-tarjeta .ic{grid-row:auto} .proy-datos{grid-template-columns:1fr;gap:2px} .proy-datos dt{margin-top:4px} }
@media (prefers-reduced-motion:reduce){ dialog.hoja[open] .hoja-cuerpo,.aviso-tarjeta{animation:none} a.btn:hover,.proy:hover{transform:none} .toast{transition:none} }

/* ===== monitor de uso (Mi cuenta, docs/BACKOFFICE.md §13.3): dos tarjetas con cifra, barra y semáforo; «pronto» si el servidor aún no mide ===== */
.monitor{display:grid;gap:10px;margin-bottom:16px}
.mon-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:0 2px}
.mon-espacio{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:5px 11px;border-radius:999px;letter-spacing:.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon{padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);display:grid;gap:10px;transition:border-color .2s ease,box-shadow .3s var(--ease)}
.mon:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.mon-tit{display:flex;align-items:baseline;justify-content:space-between;gap:8px 14px;flex-wrap:wrap}
.mon-tit b{font-family:var(--display);font-size:1rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
.mon-cifra{font-size:.9rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mon-cifra strong{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);letter-spacing:-.02em}
.mon-barra{height:10px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.mon-barra span{display:block;height:100%;width:var(--p,0%);min-width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .7s var(--ease)}
.mon-barra.amarillo span{background:var(--warn)}
.mon-barra.rojo span{background:var(--coral)}
.mon-pie{display:flex;align-items:center;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;font-size:.84rem;color:var(--muted)}
.mon-pie .sem{font-size:.76rem;padding:5px 10px}
.mon-desglose{border-top:1px dashed var(--line);padding-top:6px;margin-top:2px}
.mon-desglose summary{min-height:44px;display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600;color:var(--accent);cursor:pointer;list-style:none;border-radius:10px;padding:0 4px}
.mon-desglose summary::-webkit-details-marker{display:none}
.mon-desglose summary::before{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s var(--ease);flex:none;margin-left:2px}
.mon-desglose[open] summary::before{transform:rotate(45deg)}
.mon-desglose summary:hover{background:var(--accent-soft)}
.mon-desglose ul{list-style:none;margin:2px 0 4px;padding:0;display:grid;gap:8px}
.mon-desglose li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:.86rem;align-items:center}
.mon-item{color:var(--ink);overflow-wrap:anywhere}
.mon-val{font-family:var(--mono);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mon-desglose li i{grid-column:1/-1;display:block;height:4px;border-radius:999px;background:var(--bg-2);position:relative;overflow:hidden}
.mon-desglose li i::before{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--accent);border-radius:999px;opacity:.75}
.mon.pronto{border-style:dashed;background:var(--bg-2)}
.mon.pronto .hint{font-size:.86rem}
.pronto-etq{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:4px 9px;border:1px dashed var(--line);border-radius:999px}
/* indicador compacto de almacenamiento en la cabecera (junto al punto del saldo) */
.alm-mini{width:26px;height:6px;border-radius:999px;background:var(--line);overflow:hidden;flex:none;position:relative}
.alm-mini i{display:block;height:100%;width:var(--p,0%);border-radius:999px;background:var(--accent)}
.alm-mini.amarillo i{background:var(--warn)}
.alm-mini.rojo i{background:var(--coral)}
/* tamaño y gasto en las tarjetas de «Mis proyectos» */
.proy-datos dd.tam,.proy-datos dd.gasto{font-variant-numeric:tabular-nums}
@media (max-width:560px){ .mon{padding:14px 14px} .mon-tit{flex-direction:column;align-items:flex-start;gap:2px} .alm-mini{width:20px} }
@media (prefers-reduced-motion:reduce){ .mon-barra span,.mon-desglose summary::before,.mon{transition:none} }