/* Taller de Dr. Placa · paleta del logo de doctorplaca.es: azul de pantalla, ámbar de las letras y violeta del contorno */
:root {
  --papel: #f3f5f9; --papel-2: #e9edf4; --tarjeta: #ffffff; --tinta: #121a2b; --tinta-2: #44506a; --tenue: #5d6982;
  --linea: #dde3ec; --linea-2: #c9d1de; --azul: #1f6fd1; --azul-claro: #e6f0fc; --ambar: #b86e00; --ambar-fondo: #fff4dd;
  --violeta: #6c4bd8; --verde: #15803d; --verde-fondo: #e3f5ea; --rojo: #c42b2b; --rojo-fondo: #fde8e8;
  --lateral: #121a2b; --lateral-2: #1b2540; --lateral-tinta: #c9d3e6; --lateral-activo: #ffffff;
  --sombra: 0 1px 1px rgba(18, 26, 43, .04), 0 2px 6px rgba(18, 26, 43, .05), 0 10px 24px -12px rgba(18, 26, 43, .14);
  --sombra-alta: 0 2px 4px rgba(18, 26, 43, .06), 0 12px 32px -8px rgba(18, 26, 43, .22);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .7);
  --radio: 14px; --grano-op: .05;
  --img-hero: url(img/hero-claro.webp); --img-cab-ordenes: url(img/cab-ordenes-c.webp); --img-cab-rma: url(img/cab-rma-c.webp);
  --img-cab-almacen: url(img/cab-almacen-c.webp); --img-cab-traza: url(img/cab-traza-c.webp);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0d1320; --papel-2: #131b2b; --tarjeta: #161f31; --tinta: #e8edf6; --tinta-2: #b9c4d8; --tenue: #94a1ba;
    --linea: #263149; --linea-2: #33405c; --azul: #6aa8f5; --azul-claro: #16294a; --ambar: #f5b443; --ambar-fondo: #33270f;
    --violeta: #a48df0; --verde: #4ccf7f; --verde-fondo: #12301f; --rojo: #f27a7a; --rojo-fondo: #3a1717;
    --lateral: #0a0f1a; --lateral-2: #141c2e;
    --sombra: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .55); --sombra-alta: 0 16px 40px -10px rgba(0, 0, 0, .7);
    --brillo: inset 0 1px 0 rgba(255, 255, 255, .05); --grano-op: .07;
    --img-hero: url(img/hero-oscuro.webp); --img-cab-ordenes: url(img/cab-ordenes-o.webp); --img-cab-rma: url(img/cab-rma-o.webp);
    --img-cab-almacen: url(img/cab-almacen-o.webp); --img-cab-traza: url(img/cab-traza-o.webp);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0d1320; --papel-2: #131b2b; --tarjeta: #161f31; --tinta: #e8edf6; --tinta-2: #b9c4d8; --tenue: #94a1ba;
  --linea: #263149; --linea-2: #33405c; --azul: #6aa8f5; --azul-claro: #16294a; --ambar: #f5b443; --ambar-fondo: #33270f;
  --violeta: #a48df0; --verde: #4ccf7f; --verde-fondo: #12301f; --rojo: #f27a7a; --rojo-fondo: #3a1717;
  --lateral: #0a0f1a; --lateral-2: #141c2e;
  --sombra: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 24px -10px rgba(0, 0, 0, .55); --sombra-alta: 0 16px 40px -10px rgba(0, 0, 0, .7);
  --brillo: inset 0 1px 0 rgba(255, 255, 255, .05); --grano-op: .07;
  --img-hero: url(img/hero-oscuro.webp); --img-cab-ordenes: url(img/cab-ordenes-o.webp); --img-cab-rma: url(img/cab-rma-o.webp);
  --img-cab-almacen: url(img/cab-almacen-o.webp); --img-cab-traza: url(img/cab-traza-o.webp);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 Manrope, system-ui, sans-serif; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: url(img/grano.webp); opacity: var(--grano-op); mix-blend-mode: soft-light; z-index: 100; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; }
h3 { font-size: .95rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.tenue { color: var(--tenue); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; letter-spacing: .01em; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.txt-alerta { color: var(--rojo); font-weight: 600; }
.centrado { text-align: center; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--azul) 60%, transparent); outline-offset: 2px; }

/* Marco */
.marco { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--lateral) 0 264px, transparent 264px); }
.lateral { background: linear-gradient(180deg, var(--lateral-2), var(--lateral) 40%); color: var(--lateral-tinta); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: inset -1px 0 0 rgba(255,255,255,.04); }
.marca { display: flex; gap: .7rem; align-items: center; color: #fff; padding: 4px 8px 18px; text-decoration: none !important; }
.marca b { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.marca small { display: block; color: #9fb0cf; font-size: .75rem; }
.lateral nav a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px; color: var(--lateral-tinta); font-weight: 500; font-size: .93rem; text-decoration: none; }
.lateral nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral nav a.activo { background: linear-gradient(90deg, rgba(31,122,224,.35), rgba(108,75,216,.18)); color: var(--lateral-activo); box-shadow: inset 2px 0 0 #f5a524, inset 0 1px 0 rgba(255,255,255,.08); }
.lateral nav a.destacado { margin-top: .3rem; border: 1px solid rgba(245,165,36,.35); color: #ffd58a; }
.lateral nav a.destacado .ico:last-child { margin-left: auto; width: .95em; opacity: .7; }
.menu-grupo { margin-top: 1rem; }
.menu-grupo > span { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: #7f8fb0; padding: 0 .7rem .3rem; font-weight: 700; }
.pie-lateral { margin-top: auto; padding: 1rem .7rem 0; font-size: .72rem; color: #7f8fb0; }
.principal { min-width: 0; display: flex; flex-direction: column; overflow-x: clip; }
.barra { display: flex; align-items: center; gap: .7rem; padding: .7rem 1.5rem; background: color-mix(in srgb, var(--tarjeta) 82%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--linea); position: sticky; top: 0; z-index: 20; }
.buscador { flex: 1; max-width: 560px; display: flex; align-items: center; gap: .5rem; background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: .1rem .9rem; color: var(--tenue); }
.buscador input { border: 0; background: none; padding: .5rem 0; flex: 1; color: var(--tinta); font: inherit; min-width: 0; }
.buscador input:focus { outline: none; }
.quien { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.quien-texto b { display: block; font-size: .9rem; } .quien-texto small { color: var(--tenue); font-size: .75rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--c, var(--azul)); color: #fff; font-weight: 800; box-shadow: inset 0 -2px 0 rgba(0,0,0,.15), 0 2px 6px -2px var(--c, var(--azul)); flex: none; }
.avatar.mini { width: 24px; height: 24px; font-size: .72rem; }
.boton-icono { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: none; color: var(--tinta-2); cursor: pointer; }
.boton-icono:hover { background: var(--papel-2); border-color: var(--linea); }
.boton-icono.pequeno { width: 30px; height: 30px; }
.boton-menu { display: none; }
main { padding: 1.5rem; max-width: 1440px; width: 100%; min-width: 0; }
.pie { text-align: center; color: var(--tenue); font-size: .75rem; padding: 1rem 1rem 1.5rem; }
.velo-menu { display: none; }

/* Piezas */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.1rem 1.25rem; box-shadow: var(--sombra), var(--brillo); margin-bottom: 1rem; }
.tarjeta.destacada { border-color: color-mix(in srgb, var(--ambar) 45%, var(--linea)); box-shadow: var(--sombra-alta); }
.rejilla { display: grid; gap: 1rem; }
.rejilla.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla > .tarjeta { margin-bottom: 0; }
.rejilla.dos { margin-bottom: 1rem; }
.ancho2 { grid-column: span 2; }
.cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.cabecera p { margin: .2rem 0 0; }
.acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .58rem 1rem; border-radius: 10px; border: 1px solid var(--linea-2); background: var(--tarjeta); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none !important; box-shadow: 0 1px 2px rgba(18,26,43,.06), var(--brillo); transition: transform .12s, box-shadow .12s, background .12s; white-space: nowrap; }
.boton:hover { background: var(--papel-2); }
.boton:active { transform: translateY(1px); }
.boton.primario { background: linear-gradient(180deg, #2a84ea, #1a66c8); border-color: #175bb3; color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px -6px rgba(26,102,200,.7); }
.boton.primario:hover { background: linear-gradient(180deg, #3790f0, #1d6fd6); }
.boton.secundario { background: color-mix(in srgb, var(--tarjeta) 80%, transparent); }
.boton.asesoria { background: linear-gradient(180deg, #ffbe4d, #f0a01c); border-color: #d18a12; color: #2a1b00; box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 6px 14px -6px rgba(209,138,18,.7); }
.boton.peligro { background: linear-gradient(180deg, #e04848, #c42b2b); border-color: #a82323; color: #fff; }
.boton.pequeno { padding: .3rem .6rem; font-size: .85rem; }
.boton.grande { padding: .85rem 1.3rem; font-size: 1.02rem; }
.boton.ancho { width: 100%; }
.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; min-width: 0; border: 0; padding: 0; }
.campo > span, .campo > legend { font-size: .82rem; font-weight: 600; color: var(--tinta-2); padding: 0; }
input, select, textarea { font: inherit; color: var(--tinta); background: var(--tarjeta); border: 1px solid var(--linea-2); border-radius: 9px; padding: .55rem .7rem; width: 100%; min-width: 0; }
input[type="checkbox"], input[type="color"] { width: auto; }
input[type="color"] { padding: 2px; height: 36px; width: 48px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 22%, transparent); }
textarea { resize: vertical; }
form.linea { display: inline-flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
form.linea input { width: auto; }
.casilla { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; cursor: pointer; margin: 0 1rem .5rem 0; }
.casillas { display: flex; flex-wrap: wrap; margin-bottom: .5rem; }
.casillas .casilla { background: var(--papel); border: 1px solid var(--linea); padding: .35rem .7rem; border-radius: 999px; margin: 0 .4rem .4rem 0; }
.casillas .casilla:has(input:checked) { background: var(--azul-claro); border-color: var(--azul); }
.formulario.estrecho { max-width: 640px; }
.barra-acciones { position: sticky; bottom: 0; padding: .8rem 0; background: linear-gradient(transparent, var(--papel) 35%); display: flex; justify-content: flex-end; }
.filtros { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.filtros .campo { margin: 0; min-width: 160px; flex: 1; }
.filtros .casilla { margin-bottom: .6rem; }
.aviso { padding: .75rem 1rem; border-radius: 10px; margin-bottom: 1rem; border: 1px solid; font-weight: 500; }
.aviso.ok { background: var(--verde-fondo); color: var(--verde); border-color: color-mix(in srgb, var(--verde) 35%, transparent); }
.aviso.error { background: var(--rojo-fondo); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }
.aviso.info { background: var(--azul-claro); color: var(--azul); border-color: color-mix(in srgb, var(--azul) 30%, transparent); }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: color-mix(in srgb, var(--c) 62%, var(--tinta)); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); white-space: nowrap; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.etiqueta { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; background: var(--papel-2); color: var(--tinta-2); border: 1px solid var(--linea); white-space: nowrap; }
.etiqueta.urgente, .etiqueta.alerta { background: var(--rojo-fondo); color: var(--rojo); border-color: transparent; }
.etiqueta.ok, .etiqueta.l-usada { background: var(--verde-fondo); color: var(--verde); border-color: transparent; }
.etiqueta.l-pendiente, .etiqueta.en-marcha { background: var(--ambar-fondo); color: var(--ambar); border-color: transparent; }
.etiqueta .ico { width: .9em; height: .9em; }
.cuenta { font-size: .78rem; background: var(--papel-2); border: 1px solid var(--linea); color: var(--tinta-2); padding: 0 .5rem; border-radius: 999px; font-weight: 700; }

/* Tablas */
.tabla-caja { overflow-x: auto; }
.tabla-caja.tarjeta { padding: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); font-weight: 700; padding: .7rem 1rem; border-bottom: 1px solid var(--linea); background: var(--papel); }
.tabla td { padding: .7rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--azul-claro) 45%, transparent); }
.tabla.compacta th, .tabla.compacta td { padding: .5rem .6rem; }
.tabla tfoot td { border: 0; padding-top: .35rem; padding-bottom: .35rem; color: var(--tinta-2); }
.tabla tfoot tr.total td { font-weight: 800; font-size: 1.05rem; color: var(--tinta); border-top: 2px solid var(--linea-2); }
.tachada td { text-decoration: line-through; color: var(--tenue); }
.fila-enlace { cursor: pointer; }
.acciones-fila { white-space: nowrap; text-align: right; }
.acciones-fila form { margin-left: .2rem; }
.estados-tabla textarea { min-width: 320px; }
.stock { display: inline-block; min-width: 2.2em; text-align: center; font-weight: 800; padding: .1rem .4rem; border-radius: 6px; background: var(--verde-fondo); color: var(--verde); }
.stock.bajo { background: var(--rojo-fondo); color: var(--rojo); }

/* Hero, bandas y cifras */
.hero, .banda { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 1.2rem; border: 1px solid var(--linea); box-shadow: var(--sombra-alta); background: var(--papel-2) var(--img-hero) right center / cover no-repeat; }
.hero::before, .banda::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--papel) 30%, color-mix(in srgb, var(--papel) 70%, transparent) 55%, transparent 85%); }
.hero-texto, .banda-texto { position: relative; padding: 2rem 2.2rem; max-width: 640px; }
.hero h1 { font-size: 2rem; margin-bottom: .3rem; }
.hero p, .banda p { color: var(--tinta-2); margin: 0 0 1rem; }
.antetitulo { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem !important; font-weight: 700; color: var(--tenue) !important; margin-bottom: .3rem !important; }
.banda { display: flex; align-items: center; justify-content: space-between; min-height: 150px; }
.banda-texto { padding: 1.5rem 2rem; }
.banda h1 { font-size: 1.55rem; }
.banda-ordenes { background-image: var(--img-cab-ordenes); } .banda-rma { background-image: var(--img-cab-rma); }
.banda-almacen { background-image: var(--img-cab-almacen); } .banda-traza { background-image: var(--img-cab-traza); }
.banda-objeto { position: relative; width: 130px; height: 130px; margin-right: 2rem; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.cifra { position: relative; display: flex; flex-direction: column; gap: .15rem; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1.15rem; box-shadow: var(--sombra), var(--brillo); color: var(--tinta); text-decoration: none !important; overflow: hidden; transition: transform .15s, box-shadow .15s; }
a.cifra:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.cifra::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--azul), var(--violeta)); opacity: .75; }
.cifra.alerta::after { background: linear-gradient(90deg, var(--rojo), #f5a524); }
.cifra.asesoria::after { background: linear-gradient(90deg, #f5a524, #ffcf70); }
.cifra-ico { color: var(--azul); margin-bottom: .2rem; } .cifra.alerta .cifra-ico { color: var(--rojo); } .cifra.asesoria .cifra-ico { color: var(--ambar); }
.cifra-titulo { font-size: .82rem; color: var(--tenue); font-weight: 600; }
.cifra b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra small { color: var(--tenue); font-size: .78rem; }
.barras { display: flex; flex-direction: column; gap: .55rem; }
.barra-fila { display: grid; grid-template-columns: 140px 1fr 32px; gap: .7rem; align-items: center; color: var(--tinta); text-decoration: none !important; font-size: .9rem; }
.barra-fila b { text-align: right; font-variant-numeric: tabular-nums; }
.barra-pista { display: block; height: 10px; border-radius: 999px; background: var(--papel-2); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.barra-pista > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 70%, #fff)); }
.tecnicos { display: flex; flex-direction: column; gap: .9rem; }
.tecnico { display: flex; gap: .75rem; align-items: center; }
.tecnico > div { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.tecnico .tenue { font-size: .84rem; }
.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li { padding: .5rem 0; border-bottom: 1px solid var(--linea); display: flex; gap: .5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple.bloque li { display: block; }
.lista-simple a { display: flex; flex-direction: column; color: var(--tinta); text-decoration: none !important; }
.lista-simple a span { color: var(--tenue); font-size: .85rem; }
.lista-simple a:hover b { color: var(--azul); }
.atencion h3 .ico { color: var(--ambar); }
.modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; }
.modulo { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem 1.1rem; background: linear-gradient(160deg, var(--tarjeta), var(--papel)); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--tinta); text-decoration: none !important; box-shadow: var(--sombra), var(--brillo); transition: transform .15s, box-shadow .15s; }
.modulo:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.modulo img { width: 76px; height: 76px; margin: -.2rem 0 .3rem -.3rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.modulo span { color: var(--tenue); font-size: .85rem; }
.vacio { text-align: center; padding: 2rem 1rem; }
.vacio img { width: 140px; height: 140px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.15)); }
.vacio p { color: var(--tenue); max-width: 440px; margin: .3rem auto 1rem; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: .9rem; overflow-x: auto; padding-bottom: 1rem; align-items: start; scroll-snap-type: x proximity; }
.rma-tablero { grid-auto-columns: minmax(240px, 1fr); }
.columna { background: color-mix(in srgb, var(--papel-2) 75%, transparent); border: 1px solid var(--linea); border-radius: var(--radio); padding: .6rem; min-height: 200px; scroll-snap-align: start; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.columna header { display: flex; align-items: center; gap: .45rem; padding: .25rem .35rem .65rem; }
.columna header h2 { font-size: .9rem; margin: 0; flex: 1; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); }
.columna.sobre { background: color-mix(in srgb, var(--c) 12%, var(--papel-2)); border-color: var(--c); }
.tarjetas { display: flex; flex-direction: column; gap: .55rem; min-height: 60px; }
.tk { display: block; background: var(--tarjeta); border: 1px solid var(--linea); border-left: 3px solid var(--c, var(--azul)); border-radius: 11px; padding: .65rem .75rem; box-shadow: var(--sombra), var(--brillo); color: var(--tinta); text-decoration: none !important; cursor: grab; transition: transform .12s, box-shadow .12s; }
.columna .tk { border-left-color: var(--c); }
.tk:hover { box-shadow: var(--sombra-alta); }
.tk.arrastrando { opacity: .45; transform: rotate(1.5deg); }
.tk.retraso { box-shadow: var(--sombra), inset 0 0 0 1px color-mix(in srgb, var(--rojo) 35%, transparent); }
.tk > a { color: inherit; text-decoration: none !important; display: block; }
.tk-cab { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.tk-equipo { margin: 0; font-weight: 600; font-size: .9rem; }
.tk-cliente { margin: 0 0 .4rem; color: var(--tenue); font-size: .84rem; }
.tk-pie { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.tk-pie span { display: inline-flex; align-items: center; gap: .2rem; }
.tk-pie .ico { width: .95em; height: .95em; }
.tk-mover { display: none; margin-top: .4rem; }
.tk-mover select { padding: .3rem .4rem; font-size: .82rem; }
.nota-col { font-size: .78rem; text-align: center; margin: .3rem 0 0; }

/* Ficha */
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.datos { display: grid; grid-template-columns: 150px 1fr; gap: .45rem 1rem; margin: 0 0 1rem; }
.datos dt { color: var(--tenue); font-size: .86rem; } .datos dd { margin: 0; }
details.anadir { margin: .8rem 0; border: 1px dashed var(--linea-2); border-radius: 11px; padding: .6rem .9rem; }
details.anadir summary { cursor: pointer; font-weight: 600; color: var(--azul); display: flex; align-items: center; gap: .35rem; }
details.anadir[open] summary { margin-bottom: .7rem; }
.estado-presupuesto { margin: 0 0 .7rem; }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--linea); }
.linea-tiempo li { position: relative; padding: 0 0 .9rem .7rem; display: flex; flex-direction: column; gap: .1rem; }
.linea-tiempo li::before { content: ""; position: absolute; left: -1.55rem; top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--c, var(--azul)); box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 5px color-mix(in srgb, var(--c, var(--azul)) 30%, transparent); }
.linea-tiempo .lt-fecha { font-size: .76rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.linea-tiempo .tenue { font-size: .85rem; }
.linea-tiempo.grande li { padding-bottom: 1.2rem; }
.linea-tiempo.grande li > span:not(.lt-fecha):not(.etiqueta) { color: var(--tinta-2); }
.burbuja { background: #dcf8c6; color: #10291a; border-radius: 12px 12px 12px 4px; padding: .6rem .8rem; margin-bottom: .6rem; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.burbuja p { margin: 0 0 .25rem; font-size: .9rem; overflow-wrap: anywhere; }
.burbuja span { display: flex; align-items: center; gap: .25rem; justify-content: flex-end; font-size: .72rem; color: #3d6b4c; }
.burbuja span .ico { width: .9em; height: .9em; color: #34b7f1; }
.bandeja { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.mensaje { background: var(--tarjeta) linear-gradient(135deg, color-mix(in srgb, #25d366 6%, transparent), transparent); border: 1px solid var(--linea); border-radius: var(--radio); padding: .8rem; box-shadow: var(--sombra); }
.mensaje header { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; font-size: .88rem; }
.mensaje header a { margin-left: auto; font-weight: 700; font-size: .82rem; }
.factura-caja { background: var(--tarjeta) linear-gradient(140deg, color-mix(in srgb, #f5a524 9%, transparent), transparent 60%); }
.factura-numero { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -.01em; font-family: ui-monospace, Consolas, monospace; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .5rem; margin-bottom: .8rem; }
.galeria a { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--linea); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria .etiqueta { position: absolute; left: 4px; bottom: 4px; }
.subida { display: flex; align-items: center; justify-content: center; gap: .6rem; border: 2px dashed var(--linea-2); border-radius: 12px; padding: 1.1rem; cursor: pointer; color: var(--azul); font-weight: 600; background: color-mix(in srgb, var(--azul-claro) 50%, transparent); margin-bottom: .6rem; }
.subida input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.miniaturas { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.miniaturas img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--linea); }
.firma { position: relative; border: 1px solid var(--linea-2); border-radius: 12px; background: #fff linear-gradient(transparent calc(100% - 42px), #e3e8f0 calc(100% - 41px), transparent calc(100% - 40px)); margin-bottom: .8rem; touch-action: none; }
.firma canvas { display: block; width: 100%; height: 190px; cursor: crosshair; }
.firma .borrar-firma { position: absolute; top: .5rem; right: .5rem; }
.firma-img { max-width: 320px; background: #fff; border-radius: 8px; border: 1px solid var(--linea); }
.historial-serie { border: 1px solid color-mix(in srgb, var(--violeta) 35%, var(--linea)); background: color-mix(in srgb, var(--violeta) 7%, var(--tarjeta)); border-radius: 12px; padding: .8rem 1rem; margin-bottom: .9rem; }
.historial-serie ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.buscar-cliente { position: relative; }
.sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--tarjeta); border: 1px solid var(--linea-2); border-radius: 10px; box-shadow: var(--sombra-alta); overflow: hidden; }
.sugerencias:empty { display: none; }
.sugerencias button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: .55rem .8rem; font: inherit; color: var(--tinta); cursor: pointer; border-bottom: 1px solid var(--linea); }
.sugerencias button:hover, .sugerencias button:focus { background: var(--azul-claro); }
.sugerencias small { color: var(--tenue); }
.pasos { list-style: none; display: flex; gap: .3rem; padding: 0; margin: 0 0 1rem; counter-reset: p; overflow-x: auto; }
.pasos li { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-radius: 11px; background: var(--tarjeta); border: 1px solid var(--linea); color: var(--tenue); font-weight: 600; font-size: .88rem; min-width: max-content; }
.pasos li span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--papel-2); font-size: .8rem; flex: none; }
.pasos li.hecho { color: var(--verde); } .pasos li.hecho span { background: var(--verde); color: #fff; }
.pasos li.actual { color: var(--tinta); border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 18%, transparent); } .pasos li.actual span { background: var(--azul); color: #fff; }
.buscador-grande { display: flex; align-items: center; gap: .8rem; }
.buscador-grande input { font-size: 1.15rem; padding: .75rem 1rem; }
.chips-enlace { display: flex; flex-wrap: wrap; gap: .6rem; }
.chips-enlace a { display: flex; flex-direction: column; padding: .55rem .85rem; border: 1px solid var(--linea); border-radius: 11px; background: var(--papel); color: var(--tinta); }
.chips-enlace small { color: var(--tenue); }
.cadena { list-style: none; padding: 0; margin: 0; }
.cadena li { padding: .5rem .7rem; border-radius: 9px; display: flex; flex-direction: column; position: relative; }
.cadena li + li::before { content: "↓ sustituido por"; display: block; font-size: .72rem; color: var(--ambar); margin: -.2rem 0 .2rem; font-weight: 700; }
.cadena li.actual { background: var(--azul-claro); }

/* Móvil del técnico */
.movil { max-width: 560px; margin: 0 auto; }
.movil-cab { margin-bottom: 1rem; }
.movil-tarjeta { display: block; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .7rem; box-shadow: var(--sombra), var(--brillo); color: var(--tinta); text-decoration: none !important; }
.movil-tarjeta.retraso { border-left: 4px solid var(--rojo); }
.movil-tarjeta p { margin: .2rem 0; }
.movil-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
.movil-acciones form:first-child { grid-column: 1 / -1; }
.movil-acciones .boton { width: 100%; }

/* Acceso, pasarela y portal */
body.acceso { min-height: 100vh; display: grid; place-items: center; background: #0d1424 url(img/acceso.webp) center / cover no-repeat; padding: 1rem; color-scheme: dark; }
.acceso-caja { width: 100%; max-width: 420px; }
.acceso-marca { display: flex; gap: .8rem; align-items: center; color: #fff; margin-bottom: 1.2rem; justify-content: center; }
.acceso-marca b { display: block; font-size: 1.6rem; font-weight: 800; } .acceso-marca span { color: #b6c3dc; font-size: .9rem; }
.acceso-tarjeta { background: rgba(17, 25, 42, .78); border: 1px solid rgba(255,255,255,.12); color: #e8edf6; backdrop-filter: blur(14px); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.08); padding: 1.6rem; }
.acceso-tarjeta h1 { font-size: 1.35rem; }
.acceso-tarjeta .campo > span { color: #c4cee2; }
.acceso-tarjeta input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
.acceso-tarjeta .tenue { color: #aab6cf; margin: 1rem 0 0; } .acceso-tarjeta a { color: #8cc0ff; }
.acceso-pie { text-align: center; color: #8d9ab4; font-size: .75rem; margin-top: 1rem; }
body.pasarela { min-height: 100vh; display: grid; place-items: center; }
.pasarela-caja { text-align: center; padding: 2rem; }
.girar { display: inline-block; width: 42px; height: 42px; border-radius: 50%; border: 4px solid var(--linea); border-top-color: #f5a524; animation: girar .8s linear infinite; margin-bottom: 1rem; }
@keyframes girar { to { transform: rotate(360deg); } }
body.portal { background: var(--papel) radial-gradient(1200px 400px at 80% -10%, color-mix(in srgb, var(--azul) 14%, transparent), transparent); min-height: 100vh; }
.portal-barra { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem; max-width: 760px; margin: 0 auto; }
.portal-barra .marca { color: var(--tinta); padding: 0; } .portal-barra .marca small { color: var(--tenue); }
.portal-main { max-width: 760px; margin: 0 auto; padding: 0 1rem 1rem; }
.portal-hero { display: flex; gap: 1.2rem; align-items: center; margin: 1rem 0 1.4rem; }
.portal-hero img { filter: drop-shadow(0 12px 18px rgba(0,0,0,.2)); }
.portal-estado { background: var(--tarjeta) linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%); border: 1px solid color-mix(in srgb, var(--c) 35%, var(--linea)); border-radius: 18px; padding: 1.4rem 1.5rem; margin: .5rem 0 1rem; box-shadow: var(--sombra-alta); }
.portal-estado h1 { font-size: 2rem; color: color-mix(in srgb, var(--c) 70%, var(--tinta)); margin: .1rem 0 .3rem; }
.portal-estado p { margin: 0; color: var(--tinta-2); }
.portal-pasos li { flex-direction: column; text-align: center; font-size: .78rem; padding: .6rem .3rem; gap: .3rem; }
.portal-decision { margin-top: 1rem; }

/* Resguardo imprimible */
body.resguardo { background: var(--papel-2); }
.barra-resguardo { display: flex; gap: .5rem; justify-content: center; padding: 1rem; }
.hoja { background: #fff; color: #121a2b; max-width: 800px; margin: 0 auto 2rem; padding: 2rem 2.2rem; border-radius: 6px; box-shadow: var(--sombra-alta); }
.hoja header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid #1f6fd1; padding-bottom: 1rem; margin-bottom: 1rem; }
.hoja-marca { display: flex; gap: .7rem; align-items: center; } .hoja-marca b { font-size: 1.4rem; display: block; } .hoja-marca span { color: #5d6982; font-size: .85rem; }
.hoja-codigo { text-align: right; display: flex; flex-direction: column; } .hoja-codigo b { font-size: 1.5rem; font-family: ui-monospace, Consolas, monospace; } .hoja-codigo span { color: #5d6982; font-size: .82rem; }
.hoja h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #5d6982; margin: .9rem 0 .25rem; }
.hoja p { margin: 0; }
.hoja-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hoja-qr { display: flex; gap: 1.2rem; align-items: center; border: 1px solid #dde3ec; border-radius: 10px; padding: 1rem; margin-top: 1rem; }
.hoja-qr #qr { width: 130px; height: 130px; flex: none; } .hoja-qr #qr svg { width: 100%; height: 100%; }
.hoja-firma { display: grid; grid-template-columns: 280px 1fr; gap: 1.2rem; align-items: end; margin-top: .6rem; }
.hoja-firma img { width: 100%; max-height: 120px; object-fit: contain; border-bottom: 1px solid #c9d1de; }
.linea-firma { height: 90px; border-bottom: 1px solid #c9d1de; }
.hoja-legal { font-size: .75rem; color: #5d6982; }
.hoja footer { margin-top: 1.5rem; font-size: .7rem; color: #8a94a8; text-align: center; }
@media print { body::after, .no-imprimir { display: none !important; } body.resguardo { background: #fff; } .hoja { box-shadow: none; margin: 0; padding: 0; max-width: none; } }

/* Responsivo */
@media (max-width: 1100px) { .ficha { grid-template-columns: minmax(0, 1fr); } .rejilla.tres, .rejilla.cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .marco { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; z-index: 50; width: 280px; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra-alta); }
  .lateral.abierto { transform: none; }
  .lateral.abierto + .velo-menu { display: block; position: fixed; inset: 0; background: rgba(5, 10, 20, .5); z-index: 40; }
  .boton-menu { display: inline-grid; }
  .barra { padding: .55rem 1rem; gap: .4rem; }
  .quien-texto { display: none; }
  main { padding: 1rem; }
  .rejilla.dos, .rejilla.tres, .rejilla.cuatro { grid-template-columns: 1fr; }
  .ancho2 { grid-column: auto; }
  .hero h1 { font-size: 1.5rem; }
  .hero::before, .banda::before { background: linear-gradient(180deg, color-mix(in srgb, var(--papel) 92%, transparent), color-mix(in srgb, var(--papel) 80%, transparent)); }
  .hero-texto, .banda-texto { padding: 1.3rem; }
  .banda-objeto { display: none; }
  .kanban { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .columna { min-height: 0; }
  .columna:not(:has(.tk)) .tarjetas { min-height: 0; }
  .tk { cursor: default; }
  .tk-mover { display: block; }
  .datos { grid-template-columns: 1fr; gap: .1rem; } .datos dd { margin-bottom: .5rem; }
  .barra-fila { grid-template-columns: 110px 1fr 28px; }
  .tabla th, .tabla td { padding: .55rem .6rem; }
  .bandeja { grid-template-columns: 1fr; }
  .hoja { padding: 1.2rem; } .hoja-rejilla, .hoja-firma { grid-template-columns: 1fr; } .hoja-qr { flex-direction: column; text-align: center; }
  .portal-hero { flex-direction: column; text-align: center; }
  .portal-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .portal-pasos li { min-width: 0; }
  .marco { background: none; }
  .estados-tabla textarea { min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }