/* kosmo CRM · el TEMA CRISTAL de kosmo, por defecto y siempre (src/estilos/06-cristal.css):
   láminas translúcidas sobre un fondo con manchas de luz, en oscuro y en claro. */
:root{
  --r:10px; --rs:6px;
  --fondo:#0B0A0F; --texto:#F4F3F7; --tenue:#D3D0DA; --ayuda:#BEBBC6; --apagado:#9D9AA7;
  --sup:rgba(255,255,255,.055); --sup2:rgba(255,255,255,.09); --linea:rgba(255,255,255,.11);
  --sup-solido:#19171F; --campo-solido:#121118;
  --verde:#56C98A; --verde-b:rgba(86,201,138,.16);
  --rojo:#F2615C; --rojo-b:rgba(242,97,92,.16); --rojo-borde:rgba(242,97,92,.6);
  --naranja:#F59A3E; --naranja-b:rgba(245,154,62,.18);
  --oro:#C8AF78; --ambar-b:rgba(200,175,120,.18);
  --azul:#5A9BE8; --azul-b:rgba(90,155,232,.16);
  --acento:#A87CF0; --acento-s:#C0A2F8; --acento-t:rgba(168,124,240,.18); --acento-b:rgba(168,124,240,.38); --acento-c:rgba(168,124,240,.22);
  --sobre-acento:#131215; --sombra:rgba(0,0,0,.55);
  --lamina:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  --lamina-hover:linear-gradient(180deg,rgba(168,124,240,.12),rgba(168,124,240,.04));
  --lamina-borde:rgba(255,255,255,.10); --lamina-brillo:rgba(255,255,255,.20);
  --lamina-sombra:0 10px 30px -10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  --hover-borde:rgba(168,124,240,.42); --hover-brillo:rgba(222,204,255,.4);
  --hover-sombra:0 14px 32px -16px rgba(168,124,240,.28), 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10);
  --brillo:rgba(255,255,255,.06);
  --flota:rgba(24,22,32,.62); --vidrio:rgba(16,15,22,.42);
  --flota-sombra:0 24px 60px -12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07);
  --campo:rgba(0,0,0,.22); --campo-borde:rgba(255,255,255,.14); --campo-hover:rgba(255,255,255,.28);
  --desenfoque:blur(22px) saturate(160%);
  --velo:rgba(6,5,10,.4);
  --manchas:
    radial-gradient(40% 44% at 20% 20%, rgba(168,124,240,.34), transparent 70%),
    radial-gradient(34% 42% at 90% 30%, rgba(90,155,232,.25), transparent 72%),
    radial-gradient(40% 44% at 68% 92%, rgba(122,92,230,.21), transparent 70%),
    radial-gradient(30% 34% at 4% 88%, rgba(70,170,200,.11), transparent 70%);
  --b1-fondo:linear-gradient(180deg,#BD9CF7 0%,#A87CF0 55%,#9667E6 100%);
  --b1-hover:linear-gradient(180deg,#CCB0FA 0%,#B48CF4 55%,#A276EC 100%);
  --b1-borde:rgba(226,210,255,.5);
  --b1-sombra:0 8px 22px -8px rgba(168,124,240,.75), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(40,10,90,.3);
  --b2-fondo:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  --b2-borde:rgba(255,255,255,.17);
}
:root[data-tema="claro"]{
  --fondo:#E8E6EF; --texto:#141318; --tenue:#403E48; --ayuda:#4C4A55; --apagado:#6A6774;
  --sup:rgba(255,255,255,.42); --sup2:rgba(255,255,255,.62); --linea:rgba(70,56,120,.15);
  --sup-solido:#F4F3F8; --campo-solido:#FAFAFD;
  --verde:#167A4B; --verde-b:rgba(22,122,75,.12);
  --rojo:#C8312A; --rojo-b:rgba(200,49,42,.10); --rojo-borde:rgba(200,49,42,.5);
  --naranja:#B25A0B; --naranja-b:#FFE4CC;
  --oro:#9A6400; --ambar-b:#FBEFD2;
  --azul:#1A5FBF; --azul-b:rgba(26,95,191,.10);
  --acento:#8660E8; --acento-s:#7350DA; --acento-t:rgba(134,96,232,.12); --acento-b:rgba(134,96,232,.40); --acento-c:rgba(134,96,232,.16);
  --sobre-acento:#FFFFFF; --sombra:rgba(23,22,26,.14);
  --lamina:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.16));
  --lamina-hover:linear-gradient(180deg,rgba(255,255,255,.66),rgba(241,235,255,.38));
  --lamina-borde:rgba(255,255,255,.75); --lamina-brillo:#FFFFFF;
  --lamina-sombra:0 10px 28px -12px rgba(64,44,130,.24), 0 1px 2px rgba(64,44,130,.08), 0 0 0 1px rgba(70,56,120,.06), inset 0 1px 0 rgba(255,255,255,.9);
  --hover-borde:rgba(134,96,232,.4); --hover-brillo:rgba(134,96,232,.2);
  --hover-sombra:0 14px 30px -16px rgba(134,96,232,.26), 0 2px 6px rgba(64,44,130,.12), inset 0 1px 0 #FFFFFF;
  --brillo:rgba(255,255,255,.4);
  --flota:rgba(250,249,253,.72); --vidrio:rgba(255,255,255,.38);
  --flota-sombra:0 24px 60px -16px rgba(64,44,130,.34), 0 0 0 1px rgba(70,56,120,.07), inset 0 1px 0 #FFFFFF;
  --campo:rgba(255,255,255,.74); --campo-borde:rgba(70,56,120,.24); --campo-hover:rgba(70,56,120,.4);
  --desenfoque:blur(22px) saturate(170%);
  --velo:rgba(60,50,100,.24);
  --manchas:
    radial-gradient(42% 46% at 18% 16%, rgba(150,112,240,.42), transparent 70%),
    radial-gradient(36% 44% at 92% 26%, rgba(96,160,240,.36), transparent 72%),
    radial-gradient(40% 44% at 70% 94%, rgba(214,150,230,.34), transparent 70%),
    radial-gradient(30% 34% at 2% 90%, rgba(110,200,210,.28), transparent 70%);
  --b1-fondo:linear-gradient(180deg,#8E6BEC 0%,#8660E8 50%,#7450DC 100%);
  --b1-hover:linear-gradient(180deg,#7F5BE4 0%,#7350DA 55%,#6343CC 100%);
  --b1-borde:rgba(88,56,190,.55);
  --b1-sombra:0 8px 20px -8px rgba(134,96,232,.65), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(40,10,90,.22);
  --b2-fondo:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.58));
  --b2-borde:rgba(70,56,120,.22);
}
*{box-sizing:border-box}
html,body{margin:0}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--manchas)}
body{background:var(--fondo);color:var(--texto);
  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:15px;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--acento)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
[hidden]{display:none!important}

/* ── Cargando ── */
.cargando{min-height:60vh;display:flex;align-items:center;justify-content:center}
.giro{width:26px;height:26px;border-radius:50%;border:3px solid var(--linea);border-top-color:var(--acento);animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.giro{animation-duration:3s}}

/* ── Marca ── */
.k{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.04em;font-size:22px}
.k small{font-size:11px;letter-spacing:.08em;font-weight:700;color:var(--acento);border:1px solid var(--acento-b);border-radius:6px;padding:2px 6px;text-transform:uppercase}

/* ── Entrar ── */
.acceso{min-height:100vh;display:flex;padding:24px 16px}
.acceso .caja{max-width:380px;width:100%;margin:auto}
.acceso .k{font-size:38px;justify-content:center;margin-bottom:30px;gap:14px}
.acceso h1{font-size:22px;font-weight:600;margin:0 0 20px}
.acceso p{color:var(--tenue);font-size:14px;line-height:1.5;margin:-8px 0 18px}
.pie-acceso{margin-top:22px;text-align:center;font-size:13px}
.pie-acceso a{color:var(--tenue)}

/* ── Campos y botones ── */
label{display:block;font-size:13px;color:var(--tenue);margin:0 0 6px}
.campo{margin-bottom:14px;min-width:0}
input,select,textarea{width:100%;height:42px;padding:0 12px;border-radius:var(--r);border:1px solid var(--linea);background:var(--sup);font-size:15px}
textarea{height:auto;min-height:84px;padding:10px 12px;resize:vertical;line-height:1.45}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--acento);margin:0;cursor:pointer}
.acceso input{height:46px;font-size:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r);
  border:1px solid var(--linea);background:var(--sup);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--texto)}
.btn:hover{border-color:var(--acento-b)}
.btn.pri{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.btn.pri:hover{background:var(--acento-s)}
.btn.peligro{color:var(--rojo);border-color:var(--rojo-b)}
.btn.chico{height:32px;padding:0 12px;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.acceso .btn{width:100%;height:46px;margin-top:4px;font-size:15px}
.error{border:1px solid var(--rojo);color:var(--rojo);border-radius:var(--r);padding:10px 12px;margin-bottom:14px;font-size:14px;line-height:1.4}
.ok{border:1px solid var(--verde);color:var(--verde);border-radius:var(--r);padding:10px 12px;margin-bottom:14px;font-size:14px}

/* ── Armazón ── */
.barra{position:sticky;top:0;z-index:20;background:var(--vidrio);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linea)}
.barra .dentro{max-width:1280px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:18px}
.menu{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{padding:8px 12px;border-radius:8px;color:var(--tenue);text-decoration:none;font-weight:500;font-size:14px;white-space:nowrap}
.menu a:hover{color:var(--texto);background:var(--sup2)}
.menu a.on{color:var(--texto);background:var(--acento-t);box-shadow:inset 0 0 0 1px var(--acento-b)}
.yo{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tenue);white-space:nowrap}
.campana{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);background:var(--sup);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--texto)}
.campana b{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--rojo);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px}
main.pag{max-width:1280px;margin:0 auto;padding:22px 16px 60px}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cab h1{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:0}
.cab .sub{color:var(--tenue);font-size:14px;margin-top:4px}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.tarjeta{background:var(--sup);border:1px solid var(--linea);border-radius:14px;padding:18px}
h2{font-size:16px;font-weight:600;margin:0 0 12px}
.vacio{color:var(--tenue);text-align:center;padding:36px 12px;font-size:14px}

/* ── Cifras ── */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.cifra{background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:14px 16px}
.cifra .n{font-size:26px;font-weight:600;letter-spacing:-.02em}
.cifra .t{font-size:12px;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.cifra.ac{border-color:var(--acento-b);background:var(--acento-t)}

/* ── Etapas ── */
.et{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:600;white-space:nowrap;
  background:var(--sup2);color:var(--tenue)}
.et::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.et-contactado{background:var(--azul-b);color:var(--azul)}
.et-interesado{background:var(--ambar-b);color:var(--oro)}
.et-demo{background:var(--acento-t);color:var(--acento)}
.et-prueba{background:var(--naranja-b);color:var(--naranja)}
.et-cliente{background:var(--verde-b);color:var(--verde)}
.et-perdido,.et-baja{background:var(--rojo-b);color:var(--rojo)}
.et-libre{background:var(--ambar-b);color:var(--oro)}
.et-no_contactar{background:var(--sup2);color:var(--apagado)}
.chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;background:var(--sup2);color:var(--tenue);white-space:nowrap}
.chip.grupo{background:var(--acento-t);color:var(--acento)}

/* ── Filtros ── */
.filtros{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:12px;align-items:end}
.filtros .busca{grid-column:span 2}
.filtros .limpiar{height:42px}
.filtros .campo{margin:0}
.filtros label{font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.casilla{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tenue);cursor:pointer;height:42px}

/* ── Tabla de fichas ── */
.lista{background:var(--sup);border:1px solid var(--linea);border-radius:14px;overflow:hidden}
.fila{display:grid;grid-template-columns:28px minmax(0,2.6fr) minmax(0,1.2fr) 90px minmax(0,1.1fr);gap:14px;align-items:center;
  padding:11px 14px;border-top:1px solid var(--linea);cursor:pointer;font-size:14px}
.fila.sin-sel{grid-template-columns:minmax(0,2.6fr) minmax(0,1.2fr) 90px minmax(0,1.1fr)}
.fila:first-child{border-top:0}
.fila:hover{background:var(--sup2)}
/* La cabecera de la tabla, un punto más clara que las filas, y cada columna se ordena al pulsarla. */
.fila.cab-t{cursor:default;background:var(--sup2);border-bottom:1px solid var(--linea);font-size:11px;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding-block:8px}
.fila.cab-t:hover{background:var(--sup2);box-shadow:none}
.tabla thead th{background:var(--sup2)}
.orden{display:inline-flex;align-items:center;gap:6px;justify-self:start;background:none;border:0;padding:4px 6px;margin-left:-6px;border-radius:6px;font:inherit;color:inherit;
  text-transform:inherit;letter-spacing:inherit;cursor:pointer;white-space:nowrap}
.orden i{font-style:normal;font-size:10px;opacity:.45}
.orden:hover{color:var(--texto);background:var(--acento-t)}
.orden.on{color:var(--acento)}
.orden.on i{opacity:1}
.fila .nom{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .sec{color:var(--tenue);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila.sel{background:var(--acento-t)}
.fila .mv{display:none}
.paginas{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;color:var(--tenue);font-size:13px;flex-wrap:wrap}
.selbar{position:sticky;bottom:12px;margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;border-radius:14px;
  background:var(--vidrio);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--acento-b);box-shadow:0 10px 30px var(--sombra)}
.selbar select{width:auto;min-width:200px;height:36px}
.selbar .n{font-weight:600;margin-right:auto}

/* ── Panel de la ficha ── */
#velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(640px,100%);z-index:50;background:var(--fondo);border-left:1px solid var(--linea);
  box-shadow:-20px 0 50px var(--sombra);overflow-y:auto;display:flex;flex-direction:column}
.panel .pcab{position:sticky;top:0;z-index:2;background:var(--vidrio);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--linea);padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.panel .pcab h2{font-size:20px;margin:0 0 6px;letter-spacing:-.01em}
.panel .pcab .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--tenue);font-size:13px}
.cerrar{margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--linea);background:var(--sup);cursor:pointer;font-size:18px;line-height:1;color:var(--texto)}
.panel .pcuerpo{padding:16px 18px 40px;display:grid;gap:14px}
.rapidas{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rapidas .btn{height:44px}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.rejilla .ancho{grid-column:1/-1}
.historial{display:grid;gap:0}
.act{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--linea)}
.act:first-child{border-top:0}
.act .ic{width:30px;height:30px;border-radius:50%;background:var(--sup2);display:flex;align-items:center;justify-content:center;font-size:14px}
.act .tx{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.act .cu{font-size:12px;color:var(--tenue);margin-top:2px}
.nueva-act{display:grid;grid-template-columns:150px 1fr auto;gap:8px;align-items:start}
.nueva-act textarea{min-height:42px;height:42px}
.tarea{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--linea);font-size:14px}
.tarea:first-child{border-top:0}
.tarea .f{margin-left:auto;color:var(--tenue);font-size:13px;white-space:nowrap}
.tarea.vencida .f{color:var(--rojo);font-weight:600}
.tarea.hecha{color:var(--apagado);text-decoration:line-through}
.aviso-ficha{border-radius:var(--r);padding:10px 12px;font-size:14px;line-height:1.4;background:var(--sup2);color:var(--texto);border-left:3px solid var(--acento-b)}
.aviso-ficha .ico{color:var(--tenue)}

/* ── Ventana ── */
.ventana{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;width:min(460px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--fondo);border:1px solid var(--linea);border-radius:16px;box-shadow:0 30px 70px var(--sombra);padding:20px}
.ventana h2{font-size:18px}
.ventana .pie{display:flex;gap:8px;justify-content:flex-start;margin-top:6px}
.ventana p{color:var(--tenue);font-size:14px;line-height:1.5;margin:0 0 14px}

/* ── Comerciales y resumen ── */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-size:11px;color:var(--tenue);text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:10px 12px;border-bottom:1px solid var(--linea);white-space:nowrap}
.tabla td{padding:11px 12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla td.num,.tabla th.num{text-align:right}
.envoltura{overflow-x:auto}
.embudo{display:grid;gap:8px}
.embudo .l{display:grid;grid-template-columns:120px 1fr 70px;gap:10px;align-items:center;font-size:13px}
.embudo .b{height:10px;border-radius:5px;background:var(--sup2);overflow:hidden}
.embudo .b i{display:block;height:100%;border-radius:5px;background:var(--acento)}
.embudo .l span:last-child{text-align:right;font-weight:600}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.aviso-l{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--linea);font-size:14px}
.aviso-l:first-child{border-top:0}
.aviso-l.nuevo .tx{font-weight:600}
.aviso-l .cu{color:var(--tenue);font-size:12px;margin-left:auto;white-space:nowrap}

#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;background:var(--texto);color:var(--fondo);
  padding:11px 18px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 10px 30px var(--sombra);max-width:calc(100% - 32px)}

/* ── Móvil ── */
@media (max-width:860px){
  .filtros{grid-template-columns:1fr 1fr}
  .filtros .busca{grid-column:1/-1}
  .fila,.fila.sin-sel{grid-template-columns:auto 1fr;grid-template-areas:"c n" "c s";row-gap:4px}
  .fila.sin-sel{grid-template-areas:"n" "s";grid-template-columns:1fr}
  .fila > .c{grid-area:c}
  .fila > .n{grid-area:n}
  .fila > .e{grid-area:e}
  .fila > .s{grid-area:s;display:block}
  .fila > .x{display:none}
  .fila.cab-t{display:none}
  .fila .mv{display:inline}
  .dos{grid-template-columns:1fr}
  .yo .nombre{display:none}
}
@media (max-width:560px){
  .barra .dentro{flex-wrap:wrap;gap:8px}
  .menu{order:3;flex-basis:100%}
  .rejilla{grid-template-columns:1fr}
  .nueva-act{grid-template-columns:1fr}
  .cab h1{font-size:21px}
  .panel .pcab,.panel .pcuerpo{padding-inline:16px}
}

/* ═════════ PIEZAS DEL CRM COMPLETO ═════════ */
h2.seccion{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--tenue);margin:18px 0 8px}
h2.seccion:first-of-type{margin-top:0}
.cifra .d{font-size:12px;color:var(--tenue);margin-top:4px}
.cifra.mal .n{color:var(--rojo)}
.pie-t{margin-top:12px;font-size:13px;color:var(--tenue)}
.pie-t a{color:var(--acento);text-decoration:none}
.rojo{color:var(--rojo);font-weight:600}
.sec{color:var(--tenue);font-size:13px}
select.chico{height:36px;width:auto;min-width:170px;font-size:14px}
.embudo .l{text-decoration:none;color:inherit;border-radius:6px}
.embudo .l:hover span:first-child{color:var(--acento)}
.aviso-l{text-decoration:none;color:inherit}
.aviso-l .ic-a{flex:none;width:28px;height:28px;border-radius:50%;background:var(--sup2);display:flex;align-items:center;justify-content:center;font-size:13px}
.aviso-l .tx{min-width:0;line-height:1.4}
.aviso-l:hover .tx b,.aviso-l:hover .tx{color:var(--acento)}
.cab-t2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cab-t2 h2{margin:0}
.segmentos{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--sup);border:1px solid var(--linea)}
.segmentos button{border:0;background:none;height:32px;padding:0 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--tenue);cursor:pointer}
.segmentos button.on{background:var(--acento-t);color:var(--texto);box-shadow:inset 0 0 0 1px var(--acento-b)}
.progreso{display:flex;align-items:center;gap:10px;min-width:160px}
.progreso span{flex:1;height:8px;border-radius:4px;background:var(--sup2);overflow:hidden}
.progreso i{display:block;height:100%;border-radius:4px;background:var(--acento)}
.progreso.ok i{background:var(--verde)}
.progreso b{font-size:13px;white-space:nowrap}
.objetivos{display:grid;gap:14px}
.objetivos > div{display:grid;grid-template-columns:90px 1fr;align-items:center;gap:10px;font-size:14px}
.objetivos-t input{height:36px;max-width:110px}
.tarjeta.destacada{border-color:var(--acento-b);background:var(--lamina-hover)}

/* El logo lleva al inicio */
.a-inicio{color:inherit;text-decoration:none;border-radius:10px}
.a-inicio:hover small{background:var(--acento-t)}
/* Roles */
.roles{display:grid;gap:8px}
.rol{display:grid;gap:3px;text-align:left;padding:11px 13px;border-radius:12px;border:1px solid var(--b2-borde);background:var(--b2-fondo);cursor:pointer;color:var(--texto)}
.rol b{font-size:14px}
.rol span{font-size:12.5px;color:var(--tenue);line-height:1.4}
.rol:hover{border-color:var(--acento-b)}
.rol.on{border-color:var(--acento);background:var(--acento-t);box-shadow:0 0 0 1px var(--acento) inset}
.rol.on b{color:var(--acento)}
.chip.rol-super{background:var(--acento-t);color:var(--acento)}
.chip.rol-director{background:var(--azul-b);color:var(--azul)}

/* Kanban */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:10px;overflow-x:auto;padding-bottom:10px;align-items:start}
.col{background:var(--sup);border:1px solid var(--linea);border-radius:14px;padding:10px;min-height:200px;transition:border-color .15s,background .15s}
.col.sobre{border-color:var(--acento);background:var(--acento-t)}
.col header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:2px 2px 8px}
.col header b{font-size:13px;color:var(--tenue)}
.col .valor{font-size:12px;color:var(--tenue);margin:-4px 2px 8px}
.cartas{display:grid;gap:8px;max-height:calc(100vh - 250px);overflow-y:auto;padding:2px}
.carta{display:grid;gap:4px;padding:10px 11px;border-radius:11px;background:var(--lamina);border:1px solid var(--lamina-borde);box-shadow:var(--lamina-sombra);cursor:pointer;font-size:14px}
.carta[draggable="true"]{cursor:grab}
.carta:hover{border-color:var(--hover-borde);background:var(--lamina-hover)}
.carta.arrastra{opacity:.45}
.carta b{font-weight:600;line-height:1.3}
.carta .sec{font-size:12px}
.carta .pies{display:flex;gap:4px;flex-wrap:wrap}
.chip.mal{background:var(--rojo-b);color:var(--rojo)}
.mas{display:block;text-align:center;font-size:13px;color:var(--acento);text-decoration:none;padding:6px}
.vacio-col{text-align:center;color:var(--apagado);font-size:13px;padding:14px 4px}

/* Ficha */
.sesion{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;font-weight:600;color:var(--acento)}
/* Arriba de la ficha: Llamar y Correo, con el número y el correo debajo. */
.rapidas{grid-template-columns:repeat(2,1fr)}
.btn.rapida{height:auto;min-height:56px;padding:10px 14px;justify-content:flex-start;gap:12px;font-size:14px}
.btn.rapida .ico{flex:none;color:var(--tenue)}
.btn.rapida span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0}
.btn.rapida small{font-weight:500;color:var(--tenue);font-size:12.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.rapida:hover .ico{color:var(--acento)}
/* Iconos de línea en el color del texto */
.ico{display:inline-block;vertical-align:-3px;flex:none}
.act .ic .ico,.aviso-l .ic-a .ico{color:var(--tenue)}
.btn .ico{vertical-align:-3px}
/* El menú «Opciones»: título y, debajo, la explicación más pequeña y en gris */
.desp-menu{min-width:260px}
.desp-menu .desp-op .txt b{display:block;font-weight:600;font-size:14px}
.desp-menu .desp-op .txt span{display:block;font-size:12px;color:var(--tenue);margin-top:2px;line-height:1.4;font-weight:400}
.desp-menu .desp-op:hover .txt span{color:var(--tenue)}
.btn.rapida[aria-disabled="true"]{opacity:.4;pointer-events:none}
.resultados{display:flex;flex-wrap:wrap;gap:6px}
.res{height:34px;padding:0 12px;border-radius:17px;border:1px solid var(--b2-borde);background:var(--b2-fondo);font-size:13px;font-weight:600;cursor:pointer;color:var(--texto)}
.res:hover{border-color:var(--acento);color:var(--acento)}
.resultados.llama{animation:llama 1.2s ease-in-out 3}
@keyframes llama{50%{box-shadow:0 0 0 6px var(--acento-t);border-radius:12px}}
.dato{height:42px;display:flex;align-items:center;color:var(--tenue);font-size:14px}
/* Nueva tarea: arriba tipo y qué hay que hacer; abajo día, hora y Añadir. */
.nueva-t{display:grid;grid-template-columns:160px 1fr 120px;gap:8px;align-items:center}
.nueva-t #t-tx{grid-column:2 / 4}
.tarea-dia{display:flex;align-items:center;gap:10px;border-top:1px solid var(--linea)}
.tarea-dia:first-of-type{border-top:0}
.tarea-dia .tarea{flex:1;border:0}
.tarea-dia .ir{font-size:12px;color:var(--acento);text-decoration:none;white-space:nowrap}
.atajos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.atajos button{height:30px;padding:0 10px;border-radius:15px;border:1px solid var(--b2-borde);background:var(--b2-fondo);font-size:12px;font-weight:600;cursor:pointer;color:var(--texto)}
.atajos button:hover{border-color:var(--acento);color:var(--acento)}

/* Agenda */
.semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.dia{background:var(--sup);border:1px solid var(--linea);border-radius:12px;padding:8px;min-height:180px;display:flex;flex-direction:column;gap:6px}
.dia header{display:flex;justify-content:space-between;font-size:13px;padding:2px 2px 6px;border-bottom:1px solid var(--linea)}
.dia header span{color:var(--tenue)}
.dia.hoy{border-color:var(--acento);box-shadow:0 0 0 1px var(--acento-b)}
.dia.hoy header b{color:var(--acento)}
.dia.pasado{opacity:.75}
.t-ag{background:var(--lamina);border:1px solid var(--lamina-borde);border-left:3px solid var(--acento);border-radius:9px;padding:6px 8px;font-size:13px;display:grid;gap:3px}
.t-ag.tipo-demo,.t-ag.tipo-visita{border-left-color:var(--verde)}
.t-ag.tipo-llamada{border-left-color:var(--azul)}
.t-ag label{display:flex;gap:6px;align-items:flex-start;cursor:pointer}
.t-ag label input{width:15px;height:15px;margin-top:1px;flex:none}
.t-ag label span{display:grid;gap:2px;line-height:1.3}
.t-ag label b{font-weight:600}
.t-ag small{color:var(--tenue);font-size:11px}
.t-ag a{font-size:12px;color:var(--acento);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-ag.hecha{opacity:.55}
.t-ag.hecha b{text-decoration:line-through}

.ventana.ancha{width:min(860px,calc(100% - 32px))}
.flecha{font-size:11px;opacity:.7}
.fila .nom .et{margin-left:6px;vertical-align:middle}
.campana{color:var(--texto);text-decoration:none}
.campana:hover{border-color:var(--acento);color:var(--acento)}
.campana.on{border-color:var(--acento);color:var(--acento);background:var(--acento-t)}
/* Gráfico de barras mes a mes (dashboards) */
.barras{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;align-items:end;height:200px;padding-top:6px}
.col-b{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;cursor:pointer;min-width:0}
.col-b .pila{flex:1;width:100%;max-width:44px;display:flex;flex-direction:column-reverse;border-radius:8px 8px 4px 4px;overflow:hidden;background:var(--sup2)}
.col-b .pila i{display:block;width:100%}
.col-b b{font-size:12px;font-weight:600;white-space:nowrap}
.col-b span{font-size:11px;color:var(--tenue);text-transform:capitalize}
.col-b.on .pila{box-shadow:0 0 0 2px var(--acento)}
.col-b.on span{color:var(--acento);font-weight:600}
.b-cli{background:var(--acento)}
.b-pru{background:color-mix(in srgb,var(--acento) 55%,transparent)}
.b-dem{background:color-mix(in srgb,var(--acento) 25%,transparent)}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--tenue)}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
/* El recuadro «CRM», centrado con la línea del texto «kosmo» (no con su caja, que lleva el hueco de las letras de abajo). */
.k small{position:relative;top:2px}
.acceso .k small{top:4px}
/* Mi cuenta */
.dato-l{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--linea);font-size:14px}
.dato-l span{color:var(--tenue)}
.fila-campo{display:flex;gap:8px}
.fila-campo input{flex:1}
.estado-ok,.estado-no{display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;margin:4px 0 12px}
.estado-ok{color:var(--verde)}
.estado-no{color:var(--tenue)}
.qr{display:flex;justify-content:center;margin:6px 0 12px}
.qr img{background:#fff;border-radius:12px;padding:8px}
.clave-2p{font-family:ui-monospace,Consolas,monospace;letter-spacing:.05em;word-break:break-all;color:var(--texto)}
.interruptor{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-top:1px solid var(--linea);cursor:pointer;position:relative}
.interruptor:first-of-type{border-top:0}
.interruptor input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.interruptor .riel{flex:none;width:44px;height:26px;border-radius:13px;background:var(--linea);position:relative;transition:background .15s;margin-top:2px}
.interruptor .riel::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s}
.interruptor input:checked + .riel{background:var(--acento)}
.interruptor input:checked + .riel::after{transform:translateX(18px)}
.interruptor input:disabled + .riel{opacity:.4}
.interruptor input:focus-visible + .riel{outline:2px solid var(--acento);outline-offset:2px}
.interruptor b{display:block;font-size:14.5px}
.interruptor small{display:block;color:var(--tenue);font-size:13px;line-height:1.45;margin-top:2px}
/* El guion de llamada: a la vista y fácil de leer mientras se habla */
.guion{white-space:pre-wrap;font-size:15px;line-height:1.6;background:var(--sup2);border:1px solid var(--linea);border-radius:var(--r);padding:14px 16px;max-height:55vh;overflow-y:auto;margin-bottom:12px}
.guion b{display:inline-block;font-size:11.5px;letter-spacing:.08em;color:var(--acento);margin-top:4px}
.desc-rol{font-size:12.5px;color:var(--tenue);line-height:1.45;margin-top:6px}
/* El ojo para ver la contraseña (como /entrar de kosmo) */
.clave{position:relative;display:block}
.clave input{padding-right:46px}
.clave .ojo{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;margin:0;padding:0;border:0;background:none;color:var(--tenue);
  display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer}
.clave .ojo:hover{color:var(--texto)}
.clave .ojo:focus-visible{outline:2px solid var(--acento)}
/* Clientes */
.fila.cli,.fila.cli.cab-t{grid-template-columns:minmax(0,2.4fr) 150px minmax(0,1.6fr) minmax(0,1fr)}
.fila.cli .plan{font-weight:600;color:var(--texto);letter-spacing:.02em;font-size:12.5px}
.segmentos .cuenta{display:inline-block;min-width:18px;padding:0 6px;margin-left:4px;border-radius:9px;background:var(--sup2);font-size:11.5px;color:var(--tenue)}
.segmentos button.on .cuenta{background:var(--acento-t);color:var(--acento)}
@media (max-width:860px){ .fila.cli{grid-template-columns:1fr auto;grid-template-areas:"n e" "s s"} }
/* La campana: desplegable de avisos (como .notis-panel de kosmo) */
.notis-panel{position:fixed;z-index:400;width:min(360px,calc(100vw - 16px));max-height:62vh;overflow-y:auto;padding:6px 0;border-radius:var(--r);
  background:var(--flota);border:1px solid var(--acento-b);border-top-color:var(--lamina-brillo);box-shadow:var(--flota-sombra);
  backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);animation:cal-entra .12s ease-out both}
.np-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-right:10px}
.np-tit{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:var(--tenue);font-weight:600;padding:8px 16px 6px}
.np-limpiar{background:none;border:0;padding:4px 6px;font:inherit;font-size:12.5px;color:var(--tenue);cursor:pointer}
.np-limpiar:hover{color:var(--acento)}
.np-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:start;width:100%;text-align:left;padding:10px 16px;border:0;border-top:1px solid var(--linea);background:none;color:var(--tenue);font:inherit;font-size:13.5px;line-height:1.4;cursor:pointer}
.np-item:hover{background:var(--acento-t);color:var(--texto)}
.np-item.nuevo{color:var(--texto);font-weight:600}
.np-item.nuevo .tx::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acento);margin-right:8px;vertical-align:1px}
.np-item .cu{font-size:11.5px;color:var(--apagado);white-space:nowrap;font-weight:400}

/* Agenda: barra de fechas (la de Reservas de kosmo) y vistas de día, mes y año */
.ag-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.rh-nav{display:flex;align-items:center;gap:4px}
.rh-fl{width:38px;height:38px;border:1px solid var(--b2-borde);background:var(--b2-fondo);color:var(--tenue);border-radius:10px;font-size:19px;line-height:1;cursor:pointer}
.rh-fl:hover{border-color:var(--acento);color:var(--acento)}
.rh-sem{position:relative;border:1px solid var(--b2-borde);background:var(--b2-fondo);color:var(--texto);font:inherit;font-size:14px;font-weight:600;
  height:38px;padding:0 16px;border-radius:10px;cursor:pointer;min-width:330px;text-align:center}
.rh-sem:hover{border-color:var(--acento)}
.rh-sem.hoy{color:var(--acento);border-color:var(--acento-b)}
.rh-sem input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:0;padding:0}
.ag-dia{display:grid;gap:8px}
.ag-dia .t-ag{font-size:14px;padding:10px 12px}
.t-ag.vencida{border-left-color:var(--rojo)}
.dia header a{color:inherit;text-decoration:none}
.dia header a:hover b{color:var(--acento)}
.mes-sem{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.mes-sem span{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--apagado)}
.mes-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mes-c{min-height:104px;display:flex;flex-direction:column;align-items:stretch;gap:3px;text-align:left;padding:6px;border-radius:10px;border:1px solid var(--linea);background:var(--sup);color:var(--texto);cursor:pointer;font:inherit;overflow:hidden}
.mes-c:hover{border-color:var(--acento-b);background:var(--lamina-hover)}
.mes-c.fuera{opacity:.4}
.mes-c.hoy{border-color:var(--acento)}
.mes-c.hoy .n{color:var(--acento)}
.mes-c .n{font-size:13px;font-weight:700;margin-bottom:2px}
.m-t{font-size:11px;line-height:1.3;padding:2px 5px;border-radius:5px;background:var(--acento-t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-t.tipo-demo,.m-t.tipo-visita{background:var(--verde-b)}
.m-t.tipo-llamada{background:var(--azul-b)}
.m-t.hecha{opacity:.5;text-decoration:line-through}
.m-mas{font-size:11px;color:var(--tenue)}
.anio{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.anio-m{display:grid;gap:8px;align-content:start;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--lamina-borde);background:var(--lamina);box-shadow:var(--lamina-sombra);color:var(--texto);cursor:pointer;font:inherit}
.anio-m:hover{border-color:var(--hover-borde);background:var(--lamina-hover)}
.anio-m.hoy{border-color:var(--acento)}
.anio-m > b{font-size:15px}
.anio-m .n{font-size:24px;font-weight:600}
.anio-m .n small{font-size:12px;font-weight:500;color:var(--tenue)}
.anio-m .pies{display:flex;gap:4px;flex-wrap:wrap}
.segmentos.vistas{margin-bottom:12px}
@media (max-width:860px){ .anio{grid-template-columns:repeat(2,1fr)} .mes-c{min-height:70px} .m-t{display:none} .mes-c .n::after{content:''} .rh-sem{min-width:0;flex:1} .ag-barra .rh-nav{width:100%} }
@media (max-width:560px){ .mes-c{min-height:46px;padding:4px} .mes-c:has(.m-t)::after{content:'•';color:var(--acento);font-size:16px;line-height:1} }

/* Importar */
.soltar{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px;border:2px dashed var(--campo-borde);border-radius:14px;cursor:pointer;text-align:center;margin:10px 0}
.soltar b{color:var(--acento)}
.soltar span{font-size:13px;color:var(--tenue)}
.soltar.sobre,.soltar:hover{border-color:var(--acento);background:var(--acento-t)}
.imp .rejilla{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}

@media (max-width:1100px){ .semana{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Con el menú de kosmo (8 apartados) no cabe todo en una línea: el menú baja a su propia fila. */
@media (max-width:1180px){ .barra .dentro{flex-wrap:wrap;row-gap:6px} .barra .a-inicio{margin-right:auto} .menu{order:3;flex-basis:100%} }
@media (max-width:860px){ .rapidas{grid-template-columns:repeat(2,1fr)} .nueva-t{grid-template-columns:1fr 1fr} .nueva-t #t-tx{grid-column:1/-1} .filtros .busca{grid-column:1/-1} }
@media (max-width:560px){ .semana{grid-template-columns:1fr} .dia{min-height:0} .dia:not(.hoy):not(:has(.t-ag)){display:none} .kanban{grid-auto-columns:82%} .objetivos > div{grid-template-columns:1fr} }

/* ═════════ CRISTAL: láminas, campos, botones y lo que flota (como 06-cristal.css de kosmo) ═════════ */
input,select,textarea{background-color:var(--campo);border-color:var(--campo-borde);color:var(--texto)}
input:hover,select:hover,textarea:hover{border-color:var(--campo-hover)}
input:focus,select:focus,textarea:focus{background-color:var(--campo);border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-t)}
input::placeholder,textarea::placeholder{color:var(--apagado);opacity:1}
select option,select optgroup{background:var(--sup-solido);color:var(--texto)}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--campo-solido) inset;-webkit-text-fill-color:var(--texto)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
.btn{background:var(--b2-fondo);border-color:var(--b2-borde);box-shadow:inset 0 1px 0 var(--lamina-brillo);transition:background .16s,border-color .16s,box-shadow .16s,color .16s}
.btn:hover{background:var(--acento-t);border-color:var(--acento);color:var(--acento)}
.btn.pri{background:var(--b1-fondo);border-color:var(--b1-borde);box-shadow:var(--b1-sombra);color:var(--sobre-acento)}
.btn.pri:hover{background:var(--b1-hover);color:var(--sobre-acento)}
.btn.peligro{background:var(--rojo-b);border-color:var(--rojo-borde);color:var(--rojo)}
.btn.peligro:hover{border-color:var(--rojo);color:var(--rojo)}
.btn:disabled,.btn:disabled:hover{box-shadow:none}
.tarjeta,.cifra,.lista{background:var(--lamina);border-color:var(--lamina-borde);border-top-color:var(--lamina-brillo);box-shadow:var(--lamina-sombra)}
.cifra.ac{background:var(--lamina-hover);border-color:var(--hover-borde)}
.fila:hover{background:var(--lamina-hover)}
.fila.sel{background:var(--acento-t)}
.barra{background:var(--vidrio);border-bottom-color:var(--lamina-borde);backdrop-filter:var(--desenfoque);-webkit-backdrop-filter:var(--desenfoque)}
.campana{background:var(--b2-fondo);border-color:var(--b2-borde)}
.panel{background:var(--flota);border-left-color:var(--lamina-borde);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);box-shadow:var(--flota-sombra)}
.panel .pcab{background:var(--flota);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%)}
.ventana,.selbar,#toast{background:var(--flota);border:1px solid var(--lamina-borde);border-top-color:var(--lamina-brillo);box-shadow:var(--flota-sombra);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);color:var(--texto)}
.selbar{border-color:var(--acento-b)}
#velo{background:var(--velo);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@media (hover:hover) and (pointer:fine){
  .fila[data-id]:hover{box-shadow:inset 0 0 0 1px var(--hover-borde)}
  .btn.pri:not(:disabled):hover{box-shadow:0 12px 28px -10px color-mix(in srgb,var(--acento) 80%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
}

/* ═════════ CONTROLES DE KOSMO (01-base.css, 04-inicio-y-copia.css, 05-eventos-y-final.css, 06-cristal.css) ═════════ */
/* Barras de desplazamiento finas y del color del tema (nunca la blanca de Windows). */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--linea);border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--apagado)}
::-webkit-scrollbar-corner{background:transparent}
*{scrollbar-color:var(--linea) transparent}
@supports not selector(::-webkit-scrollbar){ *{scrollbar-width:thin} }
input[type="checkbox"],input[type="radio"]{accent-color:var(--acento)}
/* El desplegable cerrado: la flecha de kosmo. Abierto: la lista de kosmo (controles.js). */
select:not([multiple]){appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),linear-gradient(135deg,var(--tenue) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:38px}
.campo select:not([multiple]){background-position:calc(100% - 24px) 50%,calc(100% - 18px) 50%;padding-right:44px}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;height:14px;width:14px;cursor:pointer;
  background:linear-gradient(45deg,transparent 43%,var(--tenue) 43%,var(--tenue) 57%,transparent 57%),linear-gradient(135deg,transparent 43%,var(--tenue) 43%,var(--tenue) 57%,transparent 57%)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
/* La lista */
.desp{position:fixed;z-index:9650;background:var(--flota);border:1px solid var(--acento-b);border-top-color:var(--lamina-brillo);border-radius:var(--r);
  box-shadow:var(--flota-sombra);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);
  padding:5px;min-width:140px;max-height:min(340px,70vh);overflow-y:auto;overscroll-behavior:contain;animation:cal-entra .12s ease-out both}
.desp-op{display:flex;align-items:flex-start;gap:11px;width:100%;padding:8px 12px;background:none;border:0;border-radius:var(--rs);cursor:pointer;color:var(--texto);font-size:14px;text-align:left;transition:.12s}
.desp-op:hover{background:var(--acento-t);color:var(--acento)}
.desp-op.on{color:var(--acento)}
.desp-op .txt{min-width:0}
.desp-op .txt b{display:block;font-weight:500}
.desp-op.on .txt b{font-weight:700}
.desp-op:disabled{opacity:.4;cursor:default}
.desp-op[hidden],.desp-raya[hidden]{display:none}
.desp-raya{height:1px;background:var(--linea);margin:4px 10px}
.desp.desp-con-buscar{display:flex;flex-direction:column;overflow:hidden}
.desp-con-buscar .desp-buscar{flex:none;padding:1px 0 6px}
.desp-con-buscar .desp-lista{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.desp-buscar .buscar{width:100%;height:38px;margin:0;background:var(--campo);border:1px solid var(--campo-borde);border-radius:var(--rs);padding:0 12px;font-size:14px}
.desp-buscar .buscar:focus{outline:none;border-color:var(--acento)}
/* El campo de fecha */
.fecha-k{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:42px;padding:0 12px;
  background:var(--campo);border:1px solid var(--campo-borde);border-radius:var(--r);cursor:pointer;font-size:15px;color:var(--texto)}
.fecha-k:hover{border-color:var(--campo-hover)}
.fecha-k:focus-visible,.fecha-k:focus-within{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-t)}
.fecha-k.vacia .v{color:var(--apagado)}
.fecha-k.apagada{opacity:.55;cursor:not-allowed}
.fecha-k .ic-cal{color:var(--tenue);flex-shrink:0}
.fecha-k input{position:absolute;inset:0;width:100%;height:100%;opacity:0;padding:0;margin:0;border:0;pointer-events:none}
.fecha-k .v{white-space:nowrap;font-variant-numeric:tabular-nums}
/* El calendario */
.cal-kosmo{position:fixed;z-index:9800;width:288px;background:var(--flota);border:1px solid var(--lamina-borde);border-top-color:var(--lamina-brillo);border-radius:14px;padding:12px;
  box-shadow:var(--flota-sombra);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);user-select:none;animation:cal-entra .14s ease-out both}
@keyframes cal-entra{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
.cal-cab{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.cal-tit{flex:1;display:flex;align-items:center;justify-content:center;gap:6px}
.cal-mes-btn,.cal-anio-btn{background:none;border:1px solid transparent;color:var(--texto);font:inherit;font-size:14.5px;font-weight:650;letter-spacing:-.01em;padding:5px 10px;border-radius:8px;cursor:pointer}
.cal-mes-btn:hover,.cal-anio-btn:hover{background:var(--acento-t);border-color:var(--acento-b);color:var(--acento)}
.cal-anio-btn{color:var(--tenue);font-variant-numeric:tabular-nums}
.cal-fl{width:30px;height:30px;flex:0 0 30px;border:1px solid var(--linea);background:none;color:var(--tenue);border-radius:9px;font-size:18px;line-height:1;cursor:pointer}
.cal-fl:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.cal-fl:disabled{opacity:.3;cursor:default}
.cal-semana{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.cal-semana span{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--apagado);padding:4px 0}
.cal-rejilla{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cal-hueco{height:34px}
.cal-dia{height:34px;border:0;background:none;color:var(--texto);font:inherit;font-size:13.5px;border-radius:9px;cursor:pointer;font-variant-numeric:tabular-nums}
.cal-dia:hover:not(:disabled){background:var(--sup2)}
.cal-dia:disabled{color:var(--apagado);opacity:.4;cursor:default}
.cal-dia.hoy{position:relative;font-weight:700;color:var(--acento)}
.cal-dia.hoy::after{content:'';position:absolute;left:50%;bottom:4px;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:currentColor}
.cal-dia.sel{background:var(--acento);color:#fff;font-weight:650}
.cal-dia.sel::after{background:#fff}
.cal-rejilla-mes{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cal-mes{padding:11px 0;border:1px solid var(--linea);background:none;color:var(--texto);font:inherit;font-size:12px;font-weight:650;letter-spacing:.04em;border-radius:9px;cursor:pointer}
.cal-mes:hover:not(:disabled){border-color:var(--acento);color:var(--acento)}
.cal-mes:disabled{opacity:.35;cursor:default}
.cal-mes.hoy{background:var(--acento-t);border-color:var(--acento);color:var(--acento)}
.cal-lista-anio{max-height:232px;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cal-anio{padding:10px 0;border:1px solid var(--linea);background:none;color:var(--texto);font:inherit;font-size:13px;border-radius:9px;cursor:pointer;font-variant-numeric:tabular-nums}
.cal-anio:hover{border-color:var(--acento);color:var(--acento)}
.cal-anio.hoy{background:var(--acento-t);border-color:var(--acento);color:var(--acento);font-weight:650}
.cal-pie{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--linea)}
.cal-hoy-btn,.cal-cerrar{flex:1;padding:8px 0;border:1px solid var(--linea);background:none;font:inherit;font-size:12.5px;border-radius:9px;cursor:pointer}
.cal-hoy-btn{color:var(--acento);border-color:var(--acento)}
.cal-hoy-btn:hover{background:var(--acento-t)}
.cal-cerrar{color:var(--tenue)}
.cal-cerrar:hover{border-color:var(--tenue);color:var(--texto)}
@media(max-width:600px){ .cal-kosmo{width:min(320px,calc(100vw - 24px))} .cal-fl{width:38px;height:38px;flex-basis:38px} .cal-dia,.cal-hueco{height:38px} }
@media(prefers-reduced-motion:reduce){ .cal-kosmo,.desp{animation:none} }
/* Las horas */
.rh-hora{display:flex;align-items:center;gap:6px;position:relative;width:100%}
.rh-hora b{color:var(--tenue)}
.rh-hsel{flex:1;min-width:0;height:42px;display:flex;justify-content:space-between;align-items:center;gap:6px;background:var(--campo);color:var(--texto);
  border:1px solid var(--campo-borde);border-radius:var(--r);padding:0 12px;font:inherit;font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums}
.rh-hsel::after{content:'';flex-shrink:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--tenue)}
.rh-hsel:hover,.rh-hsel:focus-visible{border-color:var(--acento);outline:none}
.rh-hora.vacia .rh-hsel{color:var(--apagado)}
.rh-hpop{position:absolute;top:calc(100% + 4px);left:0;z-index:60;display:grid;grid-template-columns:1fr;gap:1px;width:64px;max-height:220px;overflow-y:auto;padding:4px;
  background:var(--flota);border:1px solid var(--lamina-borde);border-radius:12px;box-shadow:var(--flota-sombra);backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%)}
.rh-hpop.m{left:auto;right:0}
.rh-hpop.arriba{top:auto;bottom:calc(100% + 4px)}
.rh-hpop button{height:28px;border:1px solid transparent;border-radius:8px;background:none;color:var(--texto);font:inherit;font-size:13px;cursor:pointer;font-variant-numeric:tabular-nums}
.rh-hpop button:hover{border-color:var(--acento);color:var(--acento)}
.rh-hpop button.on{background:var(--acento);color:var(--sobre-acento)}

/* ═════════ EL SALUDO (igual que kosmo: 04-inicio-y-copia.css #saludo) ═════════
   El isotipo se dibuja, «Buenos días, Ricardo» y debajo la fecha y quién eres.
   Entero la primera vez de cada tramo del día; si se vuelve a entrar, solo el isotipo. */
#saludo{position:fixed;inset:0;z-index:210;background:var(--manchas),var(--fondo);color:var(--texto);
  display:flex;align-items:center;justify-content:center;padding:32px;text-align:center;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
#saludo.sal-fuera{opacity:0;pointer-events:none}
#saludo .sal{display:flex;flex-direction:column;align-items:center;transition:transform .45s cubic-bezier(.4,0,.2,1),filter .45s}
#saludo.sal-fuera .sal{transform:translateY(-16px) scale(.98);filter:blur(6px)}
#saludo .sal-iso{width:64px;height:64px;margin-bottom:26px;overflow:visible}
#saludo .sal-iso rect{transform-box:fill-box}
#saludo .sal-iso .t1{transform-origin:50% 100%;animation:sal-crece .34s cubic-bezier(.22,.68,.3,1) both}
#saludo .sal-iso .t2{transform-origin:50% 100%;animation:sal-crece .3s cubic-bezier(.22,.68,.3,1) .2s both}
#saludo .sal-iso .t3{transform-origin:50% 0%;animation:sal-crece .3s cubic-bezier(.22,.68,.3,1) .34s both}
@keyframes sal-crece{from{transform:scaleY(0);opacity:.2}}
[data-tema="claro"] #saludo .sal-iso,[data-tema="claro"] .acceso .k svg{color:var(--acento)}
#saludo .hola{font-size:40px;font-weight:400;letter-spacing:-.03em;line-height:1.15;color:var(--tenue);animation:sal-sube .55s cubic-bezier(.22,.68,.3,1) .42s both}
#saludo .hola b{font-weight:650;color:var(--texto)}
#saludo .neg{margin-top:14px;font-size:14px;color:var(--ayuda);letter-spacing:.2px;animation:sal-sube .55s cubic-bezier(.22,.68,.3,1) .58s both}
@keyframes sal-sube{from{opacity:0;transform:translateY(10px)}}
#saludo .neg-nom:not(:empty)::before{content:'·';margin:0 8px;opacity:.5}
#saludo.sal-corto .hola,#saludo.sal-corto .neg{display:none}
#saludo.sal-corto .sal-iso{margin-bottom:0}
@media(max-width:600px){ #saludo .hola{font-size:31px} #saludo .sal-iso{width:56px;height:56px;margin-bottom:22px}
  #saludo .neg span{display:block} #saludo .neg-nom{margin-top:4px} #saludo .neg-nom:not(:empty)::before{display:none} }
@media(prefers-reduced-motion:reduce){ #saludo .hola,#saludo .neg,#saludo .sal-iso rect{animation:none} #saludo .sal{transition:none} }