/* TRPCL Records · panel
   Estilo "negro plano": fondo negro de la marca, superficies por pasos de luz (sin sombras ni bordes en tarjetas),
   texto en hueso, y el rojo TRPCL solo sobre datos (hoy, foco, montos por pagar). El botón principal es una píldora hueso.
   Rejilla: barra lateral 232px + lienzo fluido con 32px de margen; un solo hueco de 16px entre bloques. */
:root{
  --ground:#0b0a0a;--surface:#151312;--raised:#211e1c;--active:#2a2624;
  --border:#221f1d;--rule:#1d1a19;--control:#4a4542;
  --text:#f2eee9;--muted:#b8b1aa;--faint:#9a938c;
  --primary:#f2eee9;--on-primary:#0b0a0a;
  --accent:#c8102e;            /* rojo TRPCL, solo en datos */
  --positive:#4cc983;--pill-positive-bg:#16271c;--pill-positive-ink:#6fd99c;
  --negative:#ef4157;--pill-negative-bg:#2e1a1d;--pill-negative-ink:#ff8a93;
  --warning:#e9b44c;--pill-warning-bg:#2b2313;--pill-warning-ink:#f1c66d;
  --radius-card:14px;--radius-inner:10px;--radius-chip:999px;
  --gap:16px;--card-pad:20px;--pad:32px;
  --font:Inter,system-ui,sans-serif;--display:"Dela Gothic One",Inter,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{color-scheme:dark}
body{font-family:var(--font);background:var(--ground);color:var(--text);min-height:100vh;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:var(--text)}
.d{font-family:var(--display);font-weight:400;letter-spacing:-.01em;line-height:1.05}
.k{font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
h1{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:-.01em;line-height:1.1;text-transform:uppercase}
h3{font-size:16px;font-weight:600;margin:32px 0 10px}
.num,.n,td.n,th.n{font-variant-numeric:tabular-nums}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}

/* botones: píldora hueso = principal; contorno = secundario */
button,.btn{font:inherit;font-weight:600;font-size:14px;border:0;background:var(--primary);color:var(--on-primary);height:36px;padding:0 16px;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:background .15s,color .15s,transform .1s}
button:hover,.btn:hover{background:#fff}
button:active,.btn:active{transform:scale(.97)}
button.sec,.btn.sec{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--control)}
button.sec:hover,.btn.sec:hover{background:var(--raised)}
button.peligro{background:transparent;color:var(--negative);box-shadow:inset 0 0 0 1px #5a2a30}
button.peligro:hover{background:var(--pill-negative-bg)}
button:disabled{opacity:.5;cursor:default}
.mini,button.mini{height:30px;padding:0 12px;font-size:13px}

/* campos */
input,select,textarea{font:inherit;width:100%;padding:9px 12px;border:1px solid var(--control);background:var(--ground);color:var(--text);margin-top:8px;border-radius:10px;min-height:40px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--text)}
input::placeholder{color:var(--faint)}
input[type=checkbox]{width:18px;height:18px;min-height:0;margin:0 10px 0 0;accent-color:var(--text)}
input[type=file]{padding:7px;font-size:13px}
input:disabled,select:disabled,textarea:disabled{background:var(--surface);border-color:var(--border);color:var(--muted)}
label{display:block;font-weight:500;font-size:14px;margin-top:16px}
label small,.ayuda{display:block;font-weight:400;color:var(--faint);font-size:12px;margin-top:6px}
label.check{display:flex;flex-wrap:wrap;align-items:center}
label.check small{flex-basis:100%}
fieldset{border:1px solid var(--border);border-radius:var(--radius-inner);padding:10px 14px;margin-top:16px}legend{font-weight:600;font-size:14px;padding:0 6px}
.error{color:var(--negative);font-weight:500;margin-top:10px}
.vacio{color:var(--faint)}
.vacio-box{padding:18px 20px;color:var(--muted);border:1px dashed var(--control);border-radius:var(--radius-inner)}
.vacio-box a{color:var(--text)}

/* ───── inicio de sesión */
.login{display:grid;grid-template-columns:1.1fr 1fr;min-height:100vh}
.login .lado{position:relative;background:#000 url(/login.jpg) center/cover;display:flex;flex-direction:column;justify-content:flex-end;padding:40px}
.login .lado::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.login .lado>*{position:relative;z-index:1}
.login .lado img{width:180px;margin-bottom:20px}
.login .lado p{color:var(--text);font-size:18px;max-width:380px;line-height:1.4}
.login form{align-self:center;justify-self:center;width:100%;max-width:380px;padding:32px}
.login h1{font-size:32px;margin:0 0 6px}
.login .sub{color:var(--muted);margin-bottom:12px}
.login button{width:100%;margin-top:24px;height:44px}
.login .pie{color:var(--faint);font-size:12px;margin-top:32px}
@media (max-width:820px){.login{grid-template-columns:1fr}.login .lado{min-height:200px;padding:24px}.login .lado img{width:130px;margin-bottom:10px}.login .lado p{font-size:15px}}

/* ───── marco: barra lateral + barra superior + lienzo */
.app{display:grid;grid-template-columns:232px 1fr;grid-template-rows:60px 1fr;min-height:100vh}
.lateral{grid-row:1/3;border-right:1px solid var(--rule);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 12px 14px}
.marca{display:flex;align-items:center;gap:10px;padding:2px 10px 22px;text-decoration:none}
.marca img{width:96px;height:auto;display:block}
nav#menu{display:flex;flex-direction:column;gap:2px}
nav#menu a{display:flex;align-items:center;gap:12px;height:36px;padding:0 10px;border-radius:10px;color:#bdb6af;text-decoration:none;font-weight:500;font-size:14px;transition:color .15s,background .15s}
nav#menu a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
nav#menu a:hover{color:var(--text);background:var(--surface)}
nav#menu a.on{color:#fff;background:var(--raised)}
nav#menu a .cuenta{margin-left:auto}
.lateral .yo{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 0;border-top:1px solid var(--rule)}
.inicial{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;background:#3a141b;color:#ff98a6}
.yo div{min-width:0}.yo strong{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.yo small{color:var(--faint);font-size:12px}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--pad);border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--ground);z-index:5}
.top .ruta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;min-width:0}
.top .ruta strong{color:var(--text);font-weight:600}
.top .der{display:flex;align-items:center;gap:8px}
.top .unidades{color:var(--faint);font-size:13px;margin-right:8px;white-space:nowrap}
.menu-movil{display:none}
.cerrar-menu{position:absolute;top:18px;right:16px}
main{padding:28px var(--pad) 80px;min-width:0;max-width:1440px;width:100%}

/* pestañas subrayadas */
.pestanas{display:flex;gap:24px;border-bottom:1px solid var(--border);margin-bottom:28px;overflow-x:auto;scrollbar-width:none}
.pestanas:empty{display:none}
.pestanas a{padding:10px 0 12px;text-decoration:none;color:var(--muted);font-weight:500;font-size:14px;white-space:nowrap;box-shadow:inset 0 -2px 0 transparent;transition:color .15s}
.pestanas a:hover{color:var(--text)}
.pestanas a.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--text)}

/* fila de título */
.barra{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.barra h1,.barra h3{margin:0}
.barra-der{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.barra.sub{margin:28px 0 10px;align-items:center}.barra.sub h3{margin:0}
.lead{color:var(--muted);font-size:15px;margin-top:6px;max-width:70ch}
.buscar{width:240px;margin:0;height:36px;min-height:36px;border-radius:999px;padding:0 16px;background:var(--surface);border-color:var(--surface)}
.buscar:focus{border-color:var(--control)}
.cuenta{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--raised);color:var(--muted);font-size:12px;font-weight:600;border-radius:999px;vertical-align:1px;font-variant-numeric:tabular-nums}
.miga{font-size:13px;color:var(--faint);margin-bottom:10px}.miga a{color:var(--muted);text-decoration:none}.miga a:hover{color:var(--text)}

/* tablas */
.tabla{overflow-x:auto;background:var(--surface);border-radius:var(--radius-card);padding:4px 8px}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:0 12px;height:48px;border-bottom:1px solid var(--rule);font-size:14px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
th{height:40px;font-size:12px;font-weight:500;color:var(--faint);border-bottom-color:var(--border)}
td{color:var(--muted)}td:first-child{color:var(--text);font-weight:500}
.n{text-align:right;white-space:nowrap}
td.acc{text-align:right;white-space:nowrap}
tr.fila{cursor:pointer;transition:background .12s}tr.fila:hover td{background:var(--raised)}
tr.fila:hover td:first-child{border-radius:10px 0 0 10px}tr.fila:hover td:last-child{border-radius:0 10px 10px 0}

/* cifras: un contenedor dividido, no tarjetas sueltas */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));background:var(--surface);border-radius:var(--radius-card);margin:0 0 var(--gap);overflow:hidden}
.tarjetas>.tarjeta{margin:0;border-radius:0;background:transparent;box-shadow:-1px 0 0 var(--border)}
.tarjeta{background:var(--surface);border-radius:var(--radius-card);padding:var(--card-pad);margin:0 0 var(--gap)}
.tarjeta b{display:block;font-size:24px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px}
.tarjeta small{display:block;color:var(--faint);font-size:12px;margin-top:6px}
.tarjeta ul{margin:8px 0 0 18px;color:var(--muted)}
.tarjeta.alerta b{color:var(--accent)}
.tarjeta.alerta:not(.tarjetas>*){box-shadow:inset 3px 0 0 var(--accent)}
.tarjeta>p:not(.k){color:var(--muted)}.tarjeta a{color:var(--text)}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px;align-items:end}
.formgrid fieldset{grid-column:1/-1}
.formgrid button{margin-top:16px;height:40px}

/* diálogo */
dialog{border:0;padding:0;width:min(580px,94vw);max-height:90vh;margin:auto;background:var(--surface);color:var(--text);border-radius:18px;box-shadow:0 24px 64px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.7)}
dialog form{padding:28px}
dialog h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:22px;margin:0 0 4px}
.botones{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.aviso{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--primary);color:var(--on-primary);padding:12px 20px;border-radius:999px;font-weight:600;transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 12px 32px rgba(0,0,0,.5);z-index:20}
.aviso.on{transform:translateX(-50%) translateY(0)}.aviso.err{background:var(--negative);color:#fff}

/* fichas */
dl.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;background:var(--surface);border-radius:var(--radius-card);padding:8px;margin:0 0 var(--gap)}
dl.datos div{padding:10px 12px}dl.datos dt{font-size:12px;color:var(--faint)}dl.datos dd{margin:3px 0 0;font-weight:500;color:var(--text)}
.pre{white-space:pre-wrap;font-weight:400;color:var(--muted)}
.rel{margin-top:8px}
label.fijo{display:none}
.cargando{color:var(--faint)}
.rojo{color:var(--accent)}

/* estados: tinte oscuro del mismo tono, sin rellenos saturados */
.chip{display:inline-flex;align-items:center;gap:6px;flex:none;height:22px;font-size:12px;font-weight:500;padding:0 9px;background:var(--raised);color:var(--muted);white-space:nowrap;border-radius:999px}
.chip-firmado,.chip-publicado,.chip-aprobada,.chip-pagado,.chip-confirmado,.chip-aceptada,.chip-hecha,.chip-entregado,.chip-realizado,.chip-activo{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.chip-borrador,.chip-tentativo,.chip-planeado,.chip-pendiente,.chip-idea{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.chip-vencido,.chip-rechazada,.chip-cancelado,.chip-anulada,.chip-descartado{background:var(--pill-negative-bg);color:var(--pill-negative-ink)}
.chip-foco{background:#3a0f17;color:#ff8494}
/* tipos de evento: cada tipo con su marca (punto), sobre gris neutro */
.chip-show,.chip-rodaje,.chip-sesion,.chip-grabacion,.chip-reunion,.chip-entrega,.chip-lanzamiento,.chip-otro{background:var(--raised);color:var(--text)}
.chip-show::before,.chip-rodaje::before,.chip-sesion::before,.chip-grabacion::before,.chip-reunion::before,.chip-entrega::before,.chip-lanzamiento::before,.chip-otro::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--k)}
.chip-show,.ev.chip-show{--k:#c8102e}.chip-rodaje,.ev.chip-rodaje{--k:#e9b44c}.chip-sesion,.ev.chip-sesion{--k:#f0884a}
.chip-grabacion,.ev.chip-grabacion{--k:#9aa4ad}.chip-reunion,.ev.chip-reunion{--k:#6c7680}.chip-entrega,.ev.chip-entrega{--k:#5fa8e8}.chip-lanzamiento,.ev.chip-lanzamiento{--k:#f2eee9}.chip-otro,.ev.chip-otro{--k:#5a5450}

/* ───── inicio */
.cabeza{margin-bottom:24px}
.cabeza h1{font-size:30px}
.rejilla{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--gap);align-items:start}
.bloque{background:var(--surface);border-radius:var(--radius-card);padding:18px var(--card-pad) 12px;margin-bottom:var(--gap)}
.bloque>header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.bloque>header h2{font-size:16px;font-weight:600}
.bloque>header a{color:var(--muted);font-size:13px;text-decoration:none}.bloque>header a:hover{color:var(--text)}
.bloque .vacio-box{margin:8px 0 8px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
ul.pend,ul.agenda-lista,ul.tareas{list-style:none;padding:0}
ul.pend li a,ul.agenda-lista li a{display:flex;gap:12px;align-items:center;min-height:48px;padding:6px 8px;margin:0 -8px;border-radius:10px;color:var(--text);text-decoration:none;transition:background .12s}
ul.pend li+li a,ul.agenda-lista li+li a{box-shadow:0 -1px 0 var(--rule)}
ul.pend li a:hover,ul.agenda-lista li a:hover{background:var(--raised);box-shadow:none}
ul.pend li a .ir{margin-left:auto;color:var(--faint);font-size:13px;white-space:nowrap}
.punto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.n-alto .punto{background:var(--accent)}.n-medio .punto{background:var(--warning)}.n-info .punto{background:transparent;box-shadow:inset 0 0 0 1.5px var(--faint)}
ul.agenda-lista .fecha{width:58px;flex:none;text-align:center;line-height:1.1}
ul.agenda-lista .fecha b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
ul.agenda-lista .fecha small{color:var(--faint);font-size:12px;text-transform:capitalize}
ul.agenda-lista .que{min-width:0;flex:1}ul.agenda-lista .que strong{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
ul.agenda-lista .que small{color:var(--faint);font-size:12px}
/* portadas de lanzamientos: el elemento propio del sello */
.portadas{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--gap);padding:6px 0 10px}
.disco{display:block;text-decoration:none;color:var(--text)}
.tapa{aspect-ratio:1;border-radius:6px;background:var(--raised);overflow:hidden;position:relative;display:grid;place-items:center;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.disco:hover .tapa{transform:translateY(-3px)}
.tapa img{width:100%;height:100%;object-fit:cover;display:block}
.tapa .ini{font-family:var(--display);font-size:44px;color:#5c5551;text-transform:uppercase}
.tapa .cuando{position:absolute;left:8px;bottom:8px;background:var(--ground);color:var(--text);font-size:12px;font-weight:600;padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.tapa .cuando.pronto{background:var(--accent);color:#fff}
.disco strong{display:block;margin-top:10px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disco small{display:block;color:var(--faint);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unidades-tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));background:var(--surface);border-radius:var(--radius-card);overflow:hidden}
.unidades-tira>div{padding:18px var(--card-pad);box-shadow:-1px 0 0 var(--border)}
.unidades-tira .k{margin-bottom:4px}
.unidades-tira b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.unidades-tira b.neg{color:var(--negative)}
.unidades-tira small{display:block;color:var(--faint);font-size:12px;margin-top:4px;font-variant-numeric:tabular-nums}
.pasos-ini summary{cursor:pointer;font-size:15px;font-weight:600;list-style:none;display:flex;align-items:center;gap:10px}
.pasos-ini summary::-webkit-details-marker{display:none}
.pasos-ini summary .barra-prog{flex:1;max-width:220px;height:6px;border-radius:999px;background:var(--raised);overflow:hidden}
.pasos-ini summary .barra-prog i{display:block;height:100%;background:var(--text);border-radius:999px}
.pasos-ini ul{list-style:none;padding:0;margin-top:10px}
.pasos-ini li a{display:block;padding:8px 0;color:var(--text);text-decoration:none}.pasos-ini li.ok a{color:var(--faint);text-decoration:line-through}
ol.pasos{margin:0 0 16px 20px;color:var(--muted);font-size:14px}ol.pasos li{padding:2px 0}ol.pasos a{color:var(--text)}

/* tareas */
ul.tareas{background:var(--surface);border-radius:var(--radius-card);padding:4px 16px}
ul.tareas li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:6px 0;border-bottom:1px solid var(--rule)}
ul.tareas li:last-child{border-bottom:0}
ul.tareas label.check{margin:0;font-weight:400;flex-wrap:nowrap}ul.tareas strong{font-weight:500}ul.tareas small{display:block;color:var(--faint);font-size:12px;margin-top:2px}

/* tablero por etapas */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(180px,1fr);gap:12px;overflow-x:auto;padding-bottom:8px}
.kcol{background:var(--surface);border-radius:var(--radius-card);padding:12px;min-height:160px}
.kcol>.k{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 4px;color:var(--text);font-weight:600}
.kcard{display:block;width:100%;height:auto;text-align:left;background:var(--raised);color:var(--text);padding:12px 14px;margin-top:8px;font-weight:400;border-radius:10px;white-space:normal}
.kcard:hover{background:var(--active)}.kcard strong{font-weight:600;display:block}
.kcard small{display:flex;margin-top:6px;color:var(--faint);font-size:12px}

/* agenda */
.mes{text-transform:capitalize;min-width:160px;text-align:center;font-weight:600}
.leyenda{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:var(--radius-card);overflow:hidden}
.cal .cab{background:var(--surface);font-size:12px;color:var(--faint);padding:10px;text-align:left}
.dia{background:var(--surface);min-height:104px;padding:8px;cursor:pointer;overflow:hidden;transition:background .12s}.dia:hover{background:var(--raised)}
.dia>span{font-size:13px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:999px}
.dia.fuera{background:#100e0e}.dia.fuera>span{color:#5a5450}
.dia:nth-child(7n+6),.dia:nth-child(7n+7){background:#121010}
.dia.hoy>span{background:var(--accent);color:#fff}
.ev{display:flex;align-items:center;gap:6px;width:100%;height:22px;text-align:left;font-size:12px;font-weight:500;padding:0 7px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--raised);color:var(--text);border-radius:6px;box-shadow:inset 3px 0 0 var(--k,var(--faint))}
.ev::before{display:none!important}.ev{justify-content:flex-start}.ev:hover{background:var(--active)}
.ev.tent{background:transparent;box-shadow:inset 0 0 0 1px var(--control),inset 3px 0 0 var(--k,var(--faint));color:var(--muted)}

@media (max-width:1100px){.rejilla{grid-template-columns:minmax(0,1fr)}}
.rejilla>div{min-width:0}
ul.pend li a{line-height:1.35}
a.yo{text-decoration:none;color:var(--text);border-radius:10px}a.yo:hover strong{text-decoration:underline}
@media (max-width:860px){
  .app{grid-template-columns:1fr;grid-template-rows:56px 1fr}
  .lateral{position:fixed;inset:0;z-index:30;background:var(--ground);height:100vh;transform:translateX(-100%);transition:transform .25s;border:0;padding-top:16px}
  .lateral.abierta{transform:none}
  .menu-movil{display:inline-flex}
  .top{padding:0 16px}.top .unidades,.top .der .btn{display:none}
  ul.pend li a .ir{display:none}
  main{padding:20px 16px 80px}
  .dos{grid-template-columns:1fr}
  .dia{min-height:58px;padding:4px}.ev{font-size:0;height:6px;padding:0;margin-top:3px}
  .buscar{width:100%}
  .barra{align-items:flex-start}
  .tarjetas,.unidades-tira{grid-template-columns:1fr 1fr}
  .portadas{grid-template-columns:repeat(2,1fr)}
}


/* ───── Detalles en rojo TRPCL
   Sutiles: el rojo aparece al pasar el mouse, al enfocar y en lo que pide atención. Solo transform, opacidad y color. */
:root{--ease:cubic-bezier(.2,.8,.2,1);--rojo-suave:rgba(200,16,46,.14)}
:focus-visible{outline-color:var(--accent)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--rojo-suave)}

/* botones: el principal se enciende en rojo; el secundario toma un borde rojo */
button,.btn{transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
button:hover,.btn:hover{background:var(--accent);color:#fff}
button.sec:hover,.btn.sec:hover{background:var(--rojo-suave);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent)}
.login button:hover{background:var(--accent);color:#fff}

/* menú: el ícono se pone rojo y la sección activa lleva una barra roja que entra desde la izquierda */
nav#menu a{position:relative}
nav#menu a svg{transition:stroke .2s var(--ease),transform .25s var(--ease)}
nav#menu a:hover svg{stroke:var(--accent);transform:translateX(1px)}
nav#menu a::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);transform:scaleY(0);transition:transform .3s var(--ease)}
nav#menu a.on::before{transform:scaleY(1)}
nav#menu a.on svg{stroke:var(--accent);opacity:1}
.marca img{transition:opacity .2s}.marca:hover img{opacity:.8}
a.yo:hover .inicial{background:var(--accent);color:#fff}
.inicial{transition:background .2s,color .2s}

/* pestañas: subrayado rojo que crece desde el centro */
.pestanas a{position:relative;box-shadow:none}
.pestanas a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .3s var(--ease)}
.pestanas a:hover::after{transform:scaleX(.35)}
.pestanas a.on::after{transform:scaleX(1)}

/* enlaces de cabecera de bloque: rojo con flecha que avanza */
.bloque>header a::after,.miga a::before{display:inline-block;transition:transform .2s var(--ease)}
.bloque>header a::after{content:"→";margin-left:6px}
.bloque>header a:hover{color:var(--accent)}.bloque>header a:hover::after{transform:translateX(3px)}
.miga a:hover{color:var(--accent)}

/* filas de tabla: el nombre se pone rojo y aparece una marca roja a la izquierda */
tr.fila td:first-child{position:relative;transition:color .15s}
tr.fila td:first-child::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--accent);transform:scaleY(0);transition:transform .2s var(--ease)}
tr.fila:hover td:first-child{color:var(--accent)}
tr.fila:hover td:first-child::before{transform:scaleY(1)}

/* listas de inicio */
ul.pend li a .ir,ul.agenda-lista li a .chip{transition:color .2s,transform .2s var(--ease)}
ul.pend li a:hover .ir{color:var(--accent);transform:translateX(-3px)}
ul.agenda-lista li a:hover .fecha b{color:var(--accent)}
ul.agenda-lista .fecha b{transition:color .2s}
/* lo urgente late suave */
.n-alto .punto{animation:late 2.4s var(--ease) infinite}
@keyframes late{0%{box-shadow:0 0 0 0 rgba(200,16,46,.55)}70%{box-shadow:0 0 0 7px rgba(200,16,46,0)}100%{box-shadow:0 0 0 0 rgba(200,16,46,0)}}

/* cifras: una línea roja se dibuja bajo la cifra al pasar el mouse */
a.tarjeta{position:relative;color:var(--text);transition:background .2s}
a.tarjeta::after{content:"";position:absolute;left:var(--card-pad);right:var(--card-pad);bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
a.tarjeta:hover{background:#1a1716}a.tarjeta:hover::after{transform:scaleX(1)}
a.tarjeta:hover .k{color:var(--accent)}
.tarjeta .k{transition:color .2s}

/* portadas: se elevan y se enciende un filo rojo; la inicial se vuelve roja */
.tapa{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tapa .ini{transition:color .3s var(--ease),transform .4s var(--ease)}
.tapa img{transition:transform .5s var(--ease)}
.disco:hover .tapa{transform:translateY(-4px);box-shadow:0 0 0 2px var(--accent)}
.disco:hover .tapa .ini{color:var(--accent);transform:scale(1.08)}
.disco:hover .tapa img{transform:scale(1.04)}
.disco strong{transition:color .2s}.disco:hover strong{color:var(--accent)}
.tapa .cuando.pronto{animation:late 2.4s var(--ease) infinite}

/* tablero y calendario */
.kcard{position:relative;overflow:hidden;transition:background .2s,transform .2s var(--ease)}
.kcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transition:transform .25s var(--ease)}
.kcard:hover{transform:translateY(-2px)}.kcard:hover::before{transform:scaleY(1)}
.dia>span{transition:background .2s,color .2s}
.dia:hover>span{color:var(--accent)}
.dia.hoy>span{animation:late 2.4s var(--ease) 3}
.ev{transition:background .15s,box-shadow .2s}
.ev:hover{box-shadow:inset 3px 0 0 var(--accent);background:var(--active)}

/* avisos con filo rojo */
.aviso{box-shadow:inset 3px 0 0 var(--accent),0 12px 32px rgba(0,0,0,.5)}

/* cada vista entra subiendo apenas, en cascada */
#contenido>*{animation:entra .45s var(--ease) both}
#contenido>*:nth-child(2){animation-delay:.04s}#contenido>*:nth-child(3){animation-delay:.08s}
#contenido>*:nth-child(4){animation-delay:.12s}#contenido>*:nth-child(n+5){animation-delay:.16s}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* la línea roja bajo el título de cada sección se dibuja al entrar */
#contenido h1{position:relative;padding-bottom:12px}
#contenido h1::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--accent);transform-origin:left;animation:traza .6s var(--ease) .15s both}
@keyframes traza{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.barra h1{padding-bottom:12px}
.login h1{position:relative;padding-bottom:14px;margin-bottom:12px}
.login h1::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--accent);transform-origin:left;animation:traza .6s var(--ease) .2s both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;background:var(--raised);padding:1px 6px;border-radius:5px;color:var(--text)}

/* pasos de conexión (ClickUp) */
.paso-cu>header h2{display:flex;align-items:center;gap:12px}
.num-paso{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--raised);color:var(--muted);font-size:13px;font-weight:600;flex:none;transition:background .3s,color .3s}
.paso-cu.hecho .num-paso{background:var(--accent);color:#fff}
.paso-cu .lead{margin:0 0 6px}.paso-cu .pasos{margin-top:4px}.paso-cu code{white-space:nowrap}
.paso-cu .formgrid{margin-bottom:8px}

table.rutas td{height:auto;padding-top:8px;padding-bottom:8px}
table.rutas tr.art td{padding-top:16px;color:var(--text)}
table.rutas tr.lz td:first-child{padding-left:28px;color:var(--muted);font-weight:400}
table.rutas td.sub{color:var(--faint);font-size:13px}
table.rutas select{margin-top:0;min-height:34px;padding:6px 10px;font-size:13px}

fieldset.artistas-mgr{border:1px solid var(--line,#2a2624);border-radius:10px;padding:12px 14px;margin:6px 0 4px;display:grid;gap:6px}
fieldset.artistas-mgr legend{padding:0 6px;font-size:13px;color:var(--muted)}
fieldset.artistas-mgr label.check{margin:0}
fieldset.artistas-mgr label.check small{display:inline;margin:0 0 0 6px}