/* ============ temas ============ ============================================ Todo el color de acento sale de --neon y --neon-rgb. Cambiando esas dos cambia la pagina entera, porque ningun estilo tiene el color escrito a mano. El tema se aplica con data-tema en . ========================================================================= */ :root { --neon: #35f0ff; --neon-rgb: 53, 240, 255; /* Texto que va ENCIMA del acento. Los acentos son colores brillantes, asi que siempre lleva algo oscuro, tanto en fondo claro como oscuro. */ --sobre-neon: #05060a; /* El acento usado COMO texto. Sobre fondo oscuro es el acento tal cual; sobre fondo claro hay que oscurecerlo o no se lee: un cian brillante sobre blanco da 1.2 de contraste cuando el minimo es 4.5. */ --neon-texto: var(--neon); --fondo: #05060a; --superficie: #0b0e15; --superficie-alta: #10141e; --linea: #1a2030; --texto: #ccd6e8; --apagado: #8894ad; --neon-tenue: rgba(var(--neon-rgb), 0.14); --alerta: #ff3d6e; --ok: #48ffa8; --radio: 3px; } /* --- fondos --- */ [data-fondo="grafito"] { --fondo: #101218; --superficie: #181b23; --superficie-alta: #1f232d; --linea: #2b3140; --texto: #dbe2ee; --apagado: #8e9bb2; } [data-fondo="pizarra"] { --fondo: #0b111b; --superficie: #121a27; --superficie-alta: #182234; --linea: #253347; --texto: #d3dced; --apagado: #93a1b8; } [data-fondo="carbon"] { --fondo: #0a0a0a; --superficie: #141414; --superficie-alta: #1c1c1c; --linea: #2a2a2a; --texto: #e4e4e4; --apagado: #979797; } [data-fondo="tinta"] { --fondo: #0a0d1a; --superficie: #121729; --superficie-alta: #1a2138; --linea: #28304d; --texto: #d8dcf0; --apagado: #9098bd; } [data-fondo="vino"] { --fondo: #150c11; --superficie: #1f1319; --superficie-alta: #291a22; --linea: #3b2530; --texto: #ecdde3; --apagado: #a8919b; } [data-fondo="bosque"] { --fondo: #0a1310; --superficie: #111c18; --superficie-alta: #172620; --linea: #24362e; --texto: #dae6e0; --apagado: #8fa79c; } [data-fondo="claro"] { --fondo: #eef1f6; --superficie: #ffffff; --superficie-alta: #f5f7fb; --linea: #ccd4e2; --texto: #1b2230; --apagado: #5c6779; } [data-fondo="papel"] { --fondo: #f4f1ea; --superficie: #fffdf8; --superficie-alta: #faf7f0; --linea: #ddd6c8; --texto: #262219; --apagado: #6b6355; } [data-fondo="niebla"] { --fondo: #e6eaf0; --superficie: #f4f6fa; --superficie-alta: #eef1f6; --linea: #c7cfdb; --texto: #1e2530; --apagado: #58627a; } /* En claro los resplandores de neon no se ven y las sombras tienen que ser mucho mas suaves, o todo parece flotando. */ /* 35% del acento sobre un gris muy oscuro: probado con los catorce acentos y los tres fondos claros, el peor caso queda en 5.6 de contraste. */ [data-fondo="claro"], [data-fondo="papel"], [data-fondo="niebla"] { --neon-texto: color-mix(in srgb, var(--neon) 35%, #101010); } [data-fondo="claro"] body::before, [data-fondo="papel"] body::before, [data-fondo="niebla"] body::before { display: none; } [data-fondo="claro"] .picker, [data-fondo="papel"] .picker, [data-fondo="niebla"] .picker, [data-fondo="claro"] .dialogo, [data-fondo="papel"] .dialogo, [data-fondo="niebla"] .dialogo, [data-fondo="claro"] .tip, [data-fondo="papel"] .tip, [data-fondo="niebla"] .tip, [data-fondo="claro"] .select2-lista, [data-fondo="papel"] .select2-lista, [data-fondo="niebla"] .select2-lista, [data-fondo="claro"] .panel-jugador, [data-fondo="papel"] .panel-jugador, [data-fondo="niebla"] .panel-jugador { box-shadow: 0 12px 32px -16px rgba(27, 34, 48, 0.45); } [data-fondo="papel"] .aviso-flotante, [data-fondo="niebla"] .aviso-flotante, [data-fondo="claro"] .aviso-flotante { box-shadow: 0 8px 22px -12px rgba(27, 34, 48, 0.4); } [data-fondo="claro"] .hechizo:not(.elegido) img, [data-fondo="papel"] .hechizo:not(.elegido) img, [data-fondo="niebla"] .hechizo:not(.elegido) img { opacity: 0.9; } [data-fondo="papel"] .party-cuerpo .slot:nth-child(even), [data-fondo="niebla"] .party-cuerpo .slot:nth-child(even) { background: rgba(30, 37, 48, 0.03); } [data-tema="turquesa"] { --neon: #2ee6c0; --neon-rgb: 46, 230, 192; } [data-tema="lima"] { --neon: #a8ff4d; --neon-rgb: 168, 255, 77; } [data-tema="verde"] { --neon: #48ffa8; --neon-rgb: 72, 255, 168; } [data-tema="ambar"] { --neon: #ffb03d; --neon-rgb: 255, 176, 61; } [data-tema="naranja"] { --neon: #ff8244; --neon-rgb: 255, 130, 68; } [data-tema="rojo"] { --neon: #ff4d5e; --neon-rgb: 255, 77, 94; } [data-tema="rosa"] { --neon: #ff6fa5; --neon-rgb: 255, 111, 165; } [data-tema="magenta"] { --neon: #ff3dc8; --neon-rgb: 255, 61, 200; } [data-tema="violeta"] { --neon: #b06bff; --neon-rgb: 176, 107, 255; } [data-tema="indigo"] { --neon: #7c7dff; --neon-rgb: 124, 125, 255; } [data-tema="azul"] { --neon: #47a6ff; --neon-rgb: 71, 166, 255; } [data-tema="hielo"] { --neon: #b8e6ff; --neon-rgb: 184, 230, 255; } [data-tema="oro"] { --neon: #e8c66a; --neon-rgb: 232, 198, 106; } :root { /* Tamanos del tablero. Los dos bloques de la fila miden EXACTAMENTE lo que ocupan sus iconos: si uno se deja elastico, se come todo el espacio sobrante y el otro queda apretado contra el borde. */ --ancho-party: 700px; --icono: 28px; } * { box-sizing: border-box; } /* El atributo hidden esconde via display:none del navegador, y CUALQUIER regla propia de display le gana. Un panel con display:grid seguia visible aunque tuviera hidden, y por eso al cambiar de pestaña quedaba lo anterior abajo. Esto lo arregla de una vez para toda la pagina. */ [hidden] { display: none !important; } /* barra de deslizamiento: fina, y solo se enciende cuando la tocas */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--neon-rgb), 0.28) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(var(--neon-rgb), 0.22); border: 3px solid transparent; background-clip: content-box; border-radius: 99px; transition: background 0.2s ease; } ::-webkit-scrollbar-thumb:hover { background: rgba(var(--neon-rgb), 0.55); background-clip: content-box; box-shadow: 0 0 10px rgba(var(--neon-rgb), 0.4); } ::-webkit-scrollbar-thumb:active { background: var(--neon); background-clip: content-box; } body { /* Anchos derivados del tamano del icono. Tienen que declararse aca y no en :root: el modo de vista cambia --icono en body, y un calc se resuelve con el valor que tiene la variable en el MISMO elemento donde se declara. */ --n-items: 8; /* sin montura */ --n-habs: 6; --celda-hab: calc(var(--icono) + 4px); --ancho-items: calc(var(--n-items) * var(--icono) + (var(--n-items) - 1) * 2px); --ancho-habs: calc(var(--n-habs) * var(--celda-hab) + (var(--n-habs) - 1) * 4px); --equipo-ancho: calc(var(--ancho-items) + var(--ancho-habs) + 18px); } html, body { margin: 0; padding: 0; background: var(--fondo); color: var(--texto); font-family: "Inter", system-ui, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; } body::before { /* niebla fria muy tenue, para que el negro no se sienta plano */ content: ""; position: fixed; inset: 0; background: radial-gradient(120% 80% at 50% -10%, rgba(var(--neon-rgb), 0.07), transparent 60%); pointer-events: none; z-index: 0; } .envoltorio { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; padding: 0 24px 80px; } /* ---------- barra superior ---------- */ .barra { display: flex; align-items: baseline; gap: 20px; padding: 28px 0 20px; border-bottom: 1px solid var(--linea); margin-bottom: 32px; } .marca { font-family: "Barlow Condensed", "Inter", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin: 0; } .marca span { color: var(--neon-texto); } .estado { display: flex; align-items: center; gap: 8px; /* empujado a la derecha: asi la marca y el menu quedan siempre pegados al borde izquierdo, tenga o no esta pagina indicador de estado */ margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); } .pulso { width: 7px; height: 7px; border-radius: 50%; background: var(--apagado); flex: none; } .estado[data-vivo="si"] { color: var(--neon-texto); } .estado[data-vivo="si"] .pulso { background: var(--neon); box-shadow: 0 0 0 0 rgba(var(--neon-rgb), 0.55); animation: latir 2.2s ease-out infinite; } .estado[data-vivo="no"] { color: var(--alerta); } .estado[data-vivo="no"] .pulso { background: var(--alerta); } @keyframes latir { to { box-shadow: 0 0 0 9px rgba(var(--neon-rgb), 0); } } /* ---------- canal ---------- */ .canal { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 14px; overflow: hidden; transition: border-color 0.18s ease; } .canal.fijado { border-color: rgba(var(--neon-rgb), 0.45); box-shadow: 0 0 24px -8px rgba(var(--neon-rgb), 0.35); } .canal-cabecera { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--linea); background: var(--superficie-alta); } .conteo { font-family: "Barlow Condensed", sans-serif; font-size: 34px; font-weight: 600; line-height: 0.8; color: var(--neon-texto); font-variant-numeric: tabular-nums; min-width: 34px; } .canal-nombre { font-family: "Barlow Condensed", sans-serif; font-size: 19px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .canal-servidor { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: none; color: var(--apagado); margin-top: 3px; } .fijar { flex: none; background: transparent; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 7px 11px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .fijar:hover, .fijar:focus-visible { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); } .canal.fijado .fijar { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); background: var(--neon-tenue); } /* ---------- jugadores ---------- */ .jugadores { list-style: none; margin: 0; padding: 6px 0; } .jugador { display: flex; align-items: center; gap: 11px; padding: 7px 16px 7px 13px; border-left: 2px solid transparent; transition: background 0.15s ease, border-color 0.15s ease; } .jugador:hover { background: rgba(var(--neon-rgb), 0.04); border-left-color: var(--neon-texto); } .jugador img { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--superficie-alta); } .jugador-nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .jugador.mudo .jugador-nombre { color: var(--apagado); } .etiqueta-mudo { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--apagado); border: 1px solid var(--linea); border-radius: 2px; padding: 2px 5px; } /* entrada al canal: destello breve, la senal de que esto es en vivo */ .jugador.nuevo { animation: entrar 0.9s ease-out; } @keyframes entrar { 0% { background: rgba(var(--neon-rgb), 0.22); border-left-color: var(--neon-texto); } 100% { background: transparent; border-left-color: transparent; } } /* ---------- vacio ---------- */ .vacio { border: 1px dashed var(--linea); border-radius: var(--radio); padding: 44px 24px; text-align: center; color: var(--apagado); } .vacio strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto); margin-bottom: 6px; } .vacio p { margin: 0; font-size: 13px; } /* ---------- accesibilidad ---------- */ :focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } @media (max-width: 560px) { .envoltorio { padding: 0 16px 60px; } .barra { flex-direction: column; align-items: flex-start; gap: 8px; } .conteo { font-size: 28px; min-width: 28px; } } /* ============ navegacion ============ */ .nav { display: flex; gap: 4px; } .nav a { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: var(--apagado); padding: 7px 12px; border: 1px solid transparent; border-radius: var(--radio); transition: color 0.15s ease, border-color 0.15s ease; } .nav a:hover { color: var(--texto); } .nav a[aria-current="page"] { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.4); background: var(--neon-tenue); } /* ============ builds ============ */ .ancho { max-width: 1400px; } .taller { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; } /* --- barra lateral de composiciones --- */ .comps { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px; position: sticky; top: 20px; } .comps h2 { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); margin: 6px 8px 10px; } .comp-item { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--texto); font-family: "Barlow Condensed", sans-serif; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .comp-item:hover { background: rgba(var(--neon-rgb), 0.05); } .comp-item[aria-selected="true"] { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.4); background: var(--neon-tenue); } .comp-item small { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: none; color: var(--apagado); margin-top: 2px; } /* --- botones --- */ /* Todos los botones con la misma altura y el mismo aire, para que una fila de controles no quede escalonada. */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 11px; cursor: pointer; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .boton:hover, .boton:focus-visible { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); background: var(--neon-tenue); } .boton:active { transform: translateY(1px); } .boton.peligro:hover { color: var(--alerta); border-color: rgba(255, 61, 110, 0.5); } .boton.ancho-total { width: 100%; margin-top: 6px; } /* --- cabecera de la composicion --- */ .comp-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 4px; } .titulo-editable { flex: 1; min-width: 200px; background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--texto); font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; } .titulo-editable:hover { border-color: var(--apagado); } .titulo-editable:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .campo-mini { display: flex; align-items: center; gap: 7px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); } .campo-mini input { width: 52px; background: var(--superficie-alta); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "JetBrains Mono", monospace; font-size: 13px; text-align: center; padding: 6px 4px; } .campo-mini input:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } /* --- tabla de builds --- */ .tabla-envoltura { overflow-x: auto; padding-bottom: 8px; } .encabezados, .fila { display: grid; grid-template-columns: 28px 158px 104px repeat(9, 46px) 92px; gap: 6px; align-items: center; min-width: 900px; } .encabezados { padding: 14px 4px 8px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); } .encabezados span { text-align: center; } .encabezados span.izq { text-align: left; padding-left: 8px; } .fila { padding: 5px 4px; border-radius: var(--radio); border-left: 2px solid var(--tipo-color, var(--linea)); transition: background 0.15s ease; } .fila:hover { background: rgba(255, 255, 255, 0.018); } .fila-num { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--apagado); text-align: center; font-variant-numeric: tabular-nums; } .fila input[type="text"] { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 13px; padding: 8px 9px; width: 100%; } .fila input[type="text"]:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .selector-tipo { width: 100%; background: var(--superficie); border: 1px solid var(--tipo-color, var(--linea)); border-radius: var(--radio); color: var(--tipo-color, var(--texto)); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 6px; cursor: pointer; } .selector-tipo:focus { outline: none; } .selector-tipo option { background: var(--superficie-alta); color: var(--texto); } /* --- ranuras de item --- */ .ranura { width: 46px; height: 46px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0; cursor: pointer; display: grid; place-items: center; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .ranura:hover, .ranura:focus-visible { border-color: rgba(var(--neon-rgb), 0.55); box-shadow: 0 0 12px -4px rgba(var(--neon-rgb), 0.6); } .ranura img { width: 42px; height: 42px; display: block; } .ranura.libre::after { content: ""; width: 8px; height: 1px; background: var(--linea); } .borrar-fila { background: transparent; border: none; color: var(--apagado); font-size: 17px; line-height: 1; cursor: pointer; padding: 6px; transition: color 0.15s ease; } .borrar-fila:hover { color: var(--alerta); } /* --- selector de item (modal) --- */ .velo { position: fixed; inset: 0; background: rgba(3, 4, 8, 0.82); display: grid; place-items: center; padding: 20px; z-index: 20; } .velo[hidden] { display: none; } .picker { width: min(620px, 100%); max-height: 76vh; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid rgba(var(--neon-rgb), 0.35); border-radius: var(--radio); box-shadow: 0 24px 70px -20px rgba(var(--neon-rgb), 0.3); overflow: hidden; } .picker-cabecera { padding: 14px 16px; border-bottom: 1px solid var(--linea); background: var(--superficie-alta); } .picker-cabecera label { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-texto); margin-bottom: 9px; } .picker-cabecera input { width: 100%; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 15px; padding: 10px 12px; } .picker-cabecera input:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .picker-resultados { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; } .picker-item { background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--texto); cursor: pointer; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 11px; line-height: 1.25; text-align: center; transition: background 0.12s ease, border-color 0.12s ease; } .picker-item:hover, .picker-item:focus-visible { background: rgba(var(--neon-rgb), 0.07); border-color: rgba(var(--neon-rgb), 0.4); } .picker-item img { width: 48px; height: 48px; } .picker-pie { padding: 10px 16px; border-top: 1px solid var(--linea); background: var(--superficie-alta); display: flex; justify-content: space-between; gap: 10px; } .aviso { padding: 30px 16px; text-align: center; color: var(--apagado); font-size: 13px; grid-column: 1 / -1; } .aviso code { display: inline-block; margin-top: 8px; font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--neon-texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: 5px 9px; } @media (max-width: 820px) { .taller { grid-template-columns: 1fr; } .comps { position: static; } } /* --- acciones de fila en builds --- */ .acciones-fila { display: flex; gap: 1px; justify-content: flex-end; } .icono-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--apagado); font-size: 13px; line-height: 1; cursor: pointer; padding: 0; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .icono-btn:hover, .icono-btn:focus-visible { color: var(--neon-texto); background: var(--neon-tenue); border-color: rgba(var(--neon-rgb), 0.3); } .icono-btn.peligro:hover { background: rgba(255, 61, 110, 0.12); border-color: rgba(255, 61, 110, 0.4); } .icono-btn.peligro:hover { color: var(--alerta); } .icono-btn:disabled { opacity: 0.25; cursor: default; } .icono-btn:disabled:hover { color: var(--apagado); } /* ============ tablero ============ */ .tablero-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; } .select-neon { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 14px; padding: 9px 10px; cursor: pointer; max-width: 320px; } .select-neon:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .select-neon option { background: var(--superficie-alta); } .fecha-neon { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 9px 10px; color-scheme: dark; } .fecha-neon:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; color: var(--texto); } .tablero { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start; } /* --- banca --- */ .banca { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); position: sticky; top: 16px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .banca.soltar-aqui { border-color: rgba(255, 61, 110, 0.55); } /* Titulo, conteo y pendientes en un solo bloque. Antes eran dos bloques con fondo y borde propios, uno pegado al otro, y se leian como un texto partido a la mitad. */ .banca-cabecera { padding: 12px 14px 11px; border-bottom: 1px solid var(--linea); background: var(--superficie-alta); } .banca-titulo { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .banca-cabecera h2 { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--apagado); margin: 0; } .banca-cabecera b { font-family: "Barlow Condensed", sans-serif; font-size: 22px; color: var(--neon-texto); line-height: 1; } .banca-lista { overflow-y: auto; padding: 7px 8px 10px; } .ficha { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid transparent; border-radius: var(--radio); cursor: grab; user-select: none; transition: background 0.13s ease, border-color 0.13s ease, opacity 0.13s ease; } .ficha:hover { background: rgba(var(--neon-rgb), 0.05); } .ficha:active { cursor: grabbing; } .ficha[aria-pressed="true"] { border-color: var(--neon-texto); background: var(--neon-tenue); box-shadow: 0 0 14px -5px rgba(var(--neon-rgb), 0.7); } .ficha.ubicado { opacity: 0.34; } .ficha img { width: 24px; height: 24px; border-radius: 50%; flex: none; } .ficha span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- parties --- */ /* Ancho fijo y centradas. Estirandolas, el sobrante iba a la columna del nombre y quedaba un recuadro enorme con cuatro letras adentro. Con ancho fijo cada columna mide lo que necesita y no sobra nada. */ .parties { display: grid; grid-template-columns: repeat(auto-fill, var(--ancho-party)); gap: 14px; justify-content: center; } .party { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; /* referencia de ancho para decidir si entran las habilidades */ container-type: inline-size; } .party-cabecera { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--superficie-alta); border-bottom: 1px solid var(--linea); } .party-cabecera h3 { font-family: "Barlow Condensed", sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; flex: 1; } .party-cabecera .cuenta { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--apagado); font-variant-numeric: tabular-nums; } .party-cuerpo { padding: 4px; } /* --- slot --- */ .slot { display: grid; /* Todas las columnas con ancho propio y el sobrante repartido entre ellas: si el nombre se lleva todo lo que sobra, queda un hueco enorme en el medio y el resto apretado. */ grid-template-columns: 24px 170px max-content 170px 24px; gap: 10px; gap: 7px; align-items: center; padding: 4px 5px; border-radius: var(--radio); border-left: 2px solid var(--tipo-color, var(--linea)); transition: background 0.13s ease, box-shadow 0.13s ease; } .slot.encima { background: rgba(var(--neon-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.5); } .slot-num { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--apagado); text-align: center; font-variant-numeric: tabular-nums; } .slot-rol { background: transparent; border: 1px solid var(--tipo-color, var(--linea)); border-radius: var(--radio); color: var(--tipo-color, var(--apagado)); font-family: "Barlow Condensed", sans-serif; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 7px; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slot-rol:hover { background: rgba(255, 255, 255, 0.05); } .slot-rol.sin-rol { color: var(--apagado); border-style: dashed; } .slot-items { display: grid; grid-template-columns: repeat(var(--n-items), var(--icono)); gap: 2px; align-items: center; } .slot-items img { width: var(--icono); height: var(--icono); flex: none; } .slot-hueco { width: var(--icono); height: var(--icono); border: 1px dashed var(--linea); border-radius: 2px; flex: none; } .slot-jugador { border: 1px dashed var(--linea); border-radius: var(--radio); padding: 6px 8px; font-size: 13px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 30px; display: flex; align-items: center; } .slot-jugador.lleno { border-style: solid; border-color: var(--tipo-color, var(--linea)); color: var(--texto); background: rgba(255, 255, 255, 0.03); cursor: grab; } .slot-jugador.lleno:active { cursor: grabbing; } .slot-jugador.ausente { color: var(--apagado); font-style: italic; } /* --- lista de roles para cambiar un slot --- */ .roles-lista { overflow-y: auto; padding: 6px; } .roles-grupo { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); padding: 12px 8px 5px; } .rol-opcion { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: 1px solid transparent; border-left: 2px solid var(--tipo-color, var(--linea)); border-radius: var(--radio); color: var(--texto); cursor: pointer; padding: 6px 8px; text-align: left; transition: background 0.12s ease; } .rol-opcion:hover, .rol-opcion:focus-visible { background: rgba(var(--neon-rgb), 0.07); } .rol-opcion b { font-family: "Barlow Condensed", sans-serif; font-size: 15px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; min-width: 110px; } .rol-opcion .mini { display: flex; gap: 2px; } .rol-opcion .mini img { width: 20px; height: 20px; } @media (max-width: 900px) { .tablero { grid-template-columns: 1fr; } .banca { position: static; max-height: 320px; } .parties { grid-template-columns: 1fr; } } /* --- control de tamano --- */ .escala { display: flex; align-items: center; gap: 9px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); margin-left: auto; } .escala input[type="range"] { width: 110px; height: 2px; -webkit-appearance: none; appearance: none; background: var(--linea); border-radius: 99px; cursor: pointer; } .escala input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 9px rgba(var(--neon-rgb), 0.7); cursor: grab; } .escala input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: var(--neon); box-shadow: 0 0 9px rgba(var(--neon-rgb), 0.7); cursor: grab; } /* --- tier de comidas y pociones --- */ .picker-item { position: relative; } .tier { position: absolute; top: 5px; right: 7px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; color: var(--neon-texto); background: rgba(5, 6, 10, 0.85); border: 1px solid rgba(var(--neon-rgb), 0.3); border-radius: 2px; padding: 1px 3px; pointer-events: none; } /* --- selector de canal de voz --- */ .banca-canal { padding: 10px 10px 9px; border-bottom: 1px solid var(--linea); } .banca-canal .select-neon { width: 100%; max-width: none; font-size: 12px; padding: 7px 8px; } /* --- compo de cada party --- */ .party-comp { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; padding: 5px 6px; cursor: pointer; max-width: 150px; } .party-comp:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .party-comp option { background: var(--superficie-alta); color: var(--texto); } .party-nombre { background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--texto); font-family: "Barlow Condensed", sans-serif; font-size: 17px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 5px; min-width: 0; flex: 1; } .party-nombre:hover { border-color: var(--apagado); } .party-nombre:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .party-nombre::placeholder { color: var(--apagado); } /* --- modales con lista: alto fijo --- */ /* Si el alto sigue al contenido, el modal salta de tamano con cada tecla que escribis. Con alto fijo la lista se desplaza adentro y el marco no se mueve. Solo aplica a los que llevan lista; el de crear una call sigue ajustandose a sus campos. */ .picker.alto { height: min(620px, 82vh); } .picker.alto .picker-resultados, .picker.alto .roles-lista { flex: 1; align-content: start; } .picker.alto .aviso { padding: 64px 16px; } /* ============ gente ============ */ .explica { color: var(--apagado); font-size: 13px; line-height: 1.55; max-width: 62ch; margin: 0 0 22px; } .persona { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 6px; } .persona-nombre { font-family: "Barlow Condensed", sans-serif; font-size: 18px; letter-spacing: 0.05em; text-transform: uppercase; min-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .persona-roles { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; } .sin-roles { color: var(--apagado); font-size: 12px; font-style: italic; } .chip-rol { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--tipo-color, var(--linea)); border-radius: var(--radio); color: var(--tipo-color, var(--texto)); font-family: "Barlow Condensed", sans-serif; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px 3px 4px; } .chip-rol i { font-family: "JetBrains Mono", monospace; font-size: 10px; font-style: normal; color: var(--sobre-neon); background: var(--tipo-color, var(--linea)); border-radius: 2px; padding: 1px 4px; } /* --- editor de roles de una persona --- */ .rol-opcion.elegido { cursor: default; } .rol-opcion.elegido:hover { background: transparent; } .rol-opcion .orden { font-family: "JetBrains Mono", monospace; font-size: 10px; font-style: normal; color: var(--sobre-neon); background: var(--tipo-color, var(--linea)); border-radius: 2px; padding: 2px 5px; } .rol-opcion .compo { flex: 1; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rol-opcion .acciones-fila { margin-left: auto; } /* ============ sugerencias en el tablero ============ */ /* Al elegir a alguien de la banca, los lugares que sabe cubrir se encienden y los que no se apagan. Es una sugerencia: podes soltarlo igual. */ .slot.le-sirve { background: rgba(72, 255, 168, 0.07); box-shadow: inset 0 0 0 1px rgba(72, 255, 168, 0.28); } .slot.no-le-sirve { opacity: 0.4; } .slot-jugador.fuera-de-rol { border-style: dashed; border-color: rgba(255, 176, 61, 0.6); color: #ffb03d; } @media (max-width: 640px) { .persona { flex-wrap: wrap; } .persona-nombre { min-width: 0; flex: 1; } } /* ============ alertas de abandono ============ */ /* El triangulo aparece cuando alguien asignado ya no esta en NINGUN canal de voz. No depende del filtro de la banca: si filtras por un canal y la persona esta en otro, sigue en la call y no hay alerta. */ .alerta-ausente { font-style: normal; font-size: 10px; line-height: 1; color: var(--alerta); margin-right: 6px; flex: none; text-shadow: 0 0 8px rgba(255, 61, 110, 0.8); animation: latido-alerta 1.9s ease-in-out infinite; } @keyframes latido-alerta { 50% { opacity: 0.3; } } .slot-jugador.ausente { border-color: rgba(255, 61, 110, 0.45); border-style: solid; color: var(--alerta); font-style: normal; background: rgba(255, 61, 110, 0.06); } .cuenta-ausentes { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--alerta); border: 1px solid rgba(255, 61, 110, 0.4); border-radius: 2px; padding: 2px 5px; margin-left: 6px; } .ausentes { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--alerta); border: 1px solid rgba(255, 61, 110, 0.45); border-radius: var(--radio); padding: 7px 10px; background: rgba(255, 61, 110, 0.08); } .ausentes[hidden] { display: none; } /* --- avisos flotantes --- */ .avisos { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; pointer-events: none; } .aviso-flotante { background: var(--superficie-alta); border: 1px solid var(--linea); border-left-width: 2px; border-radius: var(--radio); color: var(--texto); font-size: 13px; padding: 10px 14px; max-width: 300px; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.9); animation: entra-aviso 0.25s ease-out; } .aviso-flotante.alerta { border-left-color: var(--alerta); box-shadow: 0 12px 30px -12px rgba(255, 61, 110, 0.5); } .aviso-flotante.ok { border-left-color: var(--ok); } .aviso-flotante.yendose { opacity: 0; transform: translateX(12px); transition: opacity 0.55s ease, transform 0.55s ease; } @keyframes entra-aviso { from { opacity: 0; transform: translateX(16px); } } @media (max-width: 560px) { .avisos { left: 14px; right: 14px; align-items: stretch; } .aviso-flotante { max-width: none; } } /* --- columna de lectura --- */ /* El envoltorio es ancho en todas las paginas para que el menu de arriba no se mueva al cambiar de pestana. Las paginas de lista mantienen su contenido angosto con esto. */ .columna { max-width: 880px; } /* ============ cuenta y servidor ============ */ .cuenta { display: flex; align-items: center; gap: 9px; margin-left: auto; } /* si la pagina tiene indicador de voz, el estado va despues de la cuenta */ .cuenta ~ .estado { margin-left: 0; } .select-servidor { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 12px; padding: 6px 8px; max-width: 190px; cursor: pointer; } .select-servidor:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .select-servidor option { background: var(--superficie-alta); } .yo { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--apagado); max-width: 150px; } .yo img { width: 22px; height: 22px; border-radius: 50%; flex: none; } .yo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ============ portada de login ============ */ .portada { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; } .marca.grande { font-size: 40px; letter-spacing: 0.26em; } .portada p { color: var(--apagado); font-size: 14px; max-width: 42ch; line-height: 1.6; margin: 0; } .portada small { color: var(--apagado); font-size: 11px; max-width: 40ch; line-height: 1.6; } .boton.entrar { text-decoration: none; font-size: 12px; padding: 13px 26px; color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.45); background: var(--neon-tenue); } .boton.entrar:hover { box-shadow: 0 0 26px -6px rgba(var(--neon-rgb), 0.7); } /* ============ ajustes ============ */ .ajuste { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 12px; } .ajuste label { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-texto); margin-bottom: 9px; } .ajuste .select-neon { width: 100%; max-width: none; } .ajuste small { display: block; color: var(--apagado); font-size: 12px; line-height: 1.5; margin-top: 8px; } .ajuste select:disabled { opacity: 0.5; cursor: not-allowed; } .guardado { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); } .guardado[hidden] { display: none; } @media (max-width: 720px) { .yo span { display: none; } .select-servidor { max-width: 120px; } } /* ============ habilidades por pieza ============ */ /* El item y su habilidad comparten la columna del medio: los iconos a la izquierda con ancho fijo, y las habilidades ocupando lo que sobra. */ /* Dos columnas de ancho exacto, no un flex que reparta lo que sobra. Asi los iconos de equipo y los de habilidad quedan alineados en columna en todas las filas de la party. */ .slot-equipo { display: grid; grid-template-columns: var(--ancho-items) var(--ancho-habs); gap: 18px; align-items: center; min-width: 0; } .slot-habs { min-width: 0; } .slot-habs span { position: relative; display: flex; align-items: center; justify-content: center; width: var(--celda-hab); height: var(--celda-hab); border: 1px solid var(--linea); border-radius: 2px; overflow: hidden; } .slot-habs span img { width: 100%; height: 100%; object-fit: contain; display: block; } /* la tecla, chiquita en la esquina */ .slot-habs span b { position: absolute; top: 0; left: 1px; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; color: var(--neon-texto); text-shadow: 0 0 3px var(--fondo), 0 0 3px var(--fondo); pointer-events: none; } /* Las celdas sin habilidad se dibujan igual, invisibles: sostienen la columna para que todas las filas de la party queden alineadas. */ .slot-habs span.vacia { border-color: transparent; visibility: hidden; } .slot:hover .slot-habs span { color: var(--texto); } /* Las habilidades entran o no segun el ancho REAL de la party, no segun el slider: asi tambien desaparecen si achicas la ventana o si entran varias parties por fila. Debajo de ese ancho apretarian los iconos. */ .slot-habs { display: none; } /* El modo de vista decide si entran, no el ancho: asi es predecible. */ .slot-habs, body.vista .slot-habs { display: grid; grid-template-columns: repeat(var(--n-habs, 6), var(--celda-hab)); gap: 4px; } /* Marca discreta en el icono que tiene habilidad anotada. */ .slot-items img.con-habilidad, .ranura.con-habilidad { box-shadow: inset 0 -2px 0 -0.5px rgba(var(--neon-rgb), 0.65); } /* --- campo de habilidad en el buscador --- */ .picker-habilidad { padding: 12px 16px; border-top: 1px solid var(--linea); background: var(--superficie-alta); } .picker-habilidad label { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); margin-bottom: 8px; } .picker-habilidad input { width: 100%; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 14px; padding: 9px 11px; } .picker-habilidad input:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } /* --- pieza puesta a la que le falta la habilidad --- */ .ranura.falta-habilidad { border-color: rgba(255, 176, 61, 0.55); box-shadow: inset 0 -2px 0 -0.5px rgba(255, 176, 61, 0.8); } .picker-habilidad[hidden] { display: none; } .picker-habilidad .falta { margin: 9px 0 0; font-size: 12px; line-height: 1.5; color: #ffb03d; } .picker-habilidad .falta[hidden] { display: none; } /* --- casillas de habilidad por tecla --- */ .teclas { display: flex; gap: 8px; flex-wrap: wrap; } .tecla { display: flex; align-items: center; gap: 0; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; background: var(--fondo); } .tecla b { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--sobre-neon); background: var(--neon); padding: 9px 9px; line-height: 1; } .tecla input { width: 42px; background: transparent; border: none; color: var(--texto); font-family: "JetBrains Mono", monospace; font-size: 15px; text-align: center; padding: 8px 4px; } .tecla input:focus { outline: none; background: rgba(var(--neon-rgb), 0.08); } .tecla:focus-within { border-color: rgba(var(--neon-rgb), 0.6); } /* --- como se ven en el tablero --- */ /* --- segundo paso del buscador: solo las teclas --- */ .picker.paso-2 .picker-cabecera input, .picker.paso-2 .picker-resultados { display: none; } .picker.paso-2 { height: auto; } .picker.paso-2 .picker-habilidad { border-top: none; padding: 20px 16px 22px; } .picker.paso-2 .teclas { gap: 10px; } /* --- elegir habilidad con iconos --- */ .fila-tecla { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .fila-tecla:last-child { margin-bottom: 0; } .tecla-letra { flex: none; width: 26px; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 400; color: var(--sobre-neon); background: var(--neon); border-radius: 2px; padding: 6px 0; } .tecla-letra.pasiva { color: var(--apagado); background: transparent; border: 1px solid var(--linea); } .tecla-opciones { display: flex; gap: 6px; flex-wrap: wrap; } .hechizo { display: flex; align-items: center; gap: 9px; width: 236px; padding: 6px; text-align: left; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); cursor: pointer; transition: border-color 0.14s ease, box-shadow 0.14s ease; } .hechizo img { width: 42px; height: 42px; flex: none; object-fit: contain; display: block; } .hechizo-texto { min-width: 0; display: block; } .hechizo-texto b { display: block; font-size: 12px; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hechizo-texto i { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: normal; font-size: 10px; line-height: 1.35; color: var(--apagado); margin-top: 2px; } .hechizo.elegido .hechizo-texto i { color: var(--texto); } .hechizo:hover, .hechizo:focus-visible { border-color: rgba(var(--neon-rgb), 0.55); } .hechizo.elegido { border-color: var(--neon-texto); box-shadow: 0 0 14px -3px rgba(var(--neon-rgb), 0.8); background: var(--neon-tenue); } .hechizo:not(.elegido) img { opacity: 0.75; } .hechizo:hover img { opacity: 1; } /* ============ pestañas del selector ============ */ .picker-cabecera { display: flex; flex-direction: column; gap: 10px; } .pestanas { display: flex; gap: 4px; } .pestanas button { background: transparent; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 14px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .pestanas button:hover { color: var(--texto); } .pestanas button[hidden] { display: none; } .pestanas button[aria-selected="true"] { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); background: var(--neon-tenue); } /* Los dos paneles ocupan el mismo lugar; solo uno esta visible. Antes convivian apilados y se pisaban. */ .panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; } .panel[hidden] { display: none; } .panel-busqueda { padding: 12px 16px 8px; } .panel-busqueda input { width: 100%; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 15px; padding: 10px 12px; } .panel-busqueda input:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } #panel-habilidades { padding: 14px 16px 18px; } /* la etiqueta de la tecla ahora puede decir "Pasiva 1" */ .tecla-letra { width: auto; min-width: 26px; padding: 6px 8px; white-space: nowrap; } /* ============ descripción flotante ============ */ .tip { position: fixed; top: 0; left: 0; z-index: 60; max-width: 300px; max-height: 45vh; overflow: hidden; /* se mueve con transform: no obliga a recalcular el resto de la pagina */ will-change: transform; background: var(--superficie-alta); border: 1px solid rgba(var(--neon-rgb), 0.35); border-radius: var(--radio); padding: 9px 11px; pointer-events: none; box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.95); } .tip[hidden] { display: none; } .tip b { display: block; font-size: 12px; font-weight: 500; color: var(--neon-texto); } .tip i { display: block; font-style: normal; font-size: 11px; line-height: 1.45; color: var(--texto); margin-top: 5px; } .tip i[hidden] { display: none; } /* ============ movimiento ============ */ /* Transiciones cortas y solo en lo que el usuario toca. Se pueden apagar enteras desde preferencias, y ya se apagaban solas si el sistema pide menos movimiento. */ @media (prefers-reduced-motion: no-preference) { .envoltorio, .portada { animation: aparecer 0.28s ease-out; } .party { animation: subir 0.3s ease-out backwards; } .party:nth-child(2) { animation-delay: 0.04s; } .party:nth-child(3) { animation-delay: 0.08s; } .party:nth-child(n+4) { animation-delay: 0.12s; } .picker { animation: surgir 0.18s ease-out; } .velo { animation: aparecer 0.15s ease-out; } } @keyframes aparecer { from { opacity: 0; } } @keyframes subir { from { opacity: 0; transform: translateY(8px); } } @keyframes surgir { from { opacity: 0; transform: scale(0.97); } } .slot, .ficha, .comp-item, .persona, .hechizo, .ranura { transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .ficha:hover, .hechizo:hover { transform: translateX(2px); } .ranura:hover { transform: translateY(-1px); } /* apagado total desde preferencias */ html.sin-animaciones *, html.sin-animaciones *::before, html.sin-animaciones *::after { animation: none !important; transition: none !important; } /* --- elegir tema --- */ .seccion { font-family: "Barlow Condensed", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto); margin: 34px 0 6px; padding-top: 22px; border-top: 1px solid var(--linea); } .temas { display: flex; gap: 10px; flex-wrap: wrap; } .muestra { width: 38px; height: 38px; border-radius: 50%; border: 2px solid transparent; background: var(--muestra); cursor: pointer; padding: 0; opacity: 0.75; transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .muestra:hover { opacity: 1; transform: scale(1.08); } .muestra.elegida { opacity: 1; border-color: var(--texto); box-shadow: 0 0 18px -3px var(--muestra); } /* ============ documentación ============ */ .docs { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 34px; align-items: start; } .docs-indice { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 2px; padding-right: 12px; border-right: 1px solid var(--linea); } .docs-indice a { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--apagado); padding: 7px 8px; border-radius: var(--radio); border-left: 2px solid transparent; } .docs-indice a:hover { color: var(--neon-texto); border-left-color: var(--neon-texto); background: rgba(var(--neon-rgb), 0.05); } .docs-cuerpo { max-width: 68ch; padding-bottom: 60px; } .docs-cuerpo section { margin-bottom: 46px; scroll-margin-top: 20px; } .docs-cuerpo h2 { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon-texto); margin: 0 0 14px; } .docs-cuerpo h3 { font-size: 14px; font-weight: 500; color: var(--texto); margin: 22px 0 6px; } .docs-cuerpo p, .docs-cuerpo li { font-size: 14px; line-height: 1.65; color: var(--texto); } .docs-cuerpo p { margin: 0 0 12px; } .docs-cuerpo ul, .docs-cuerpo ol { margin: 0 0 14px; padding-left: 20px; } .docs-cuerpo li { margin-bottom: 7px; } .docs-cuerpo b { color: var(--neon-texto); font-weight: 500; } .docs-cuerpo .nota { border-left: 2px solid var(--linea); padding: 2px 0 2px 14px; color: var(--apagado); font-size: 13px; } .docs-cuerpo .nota b { color: var(--texto); } @media (max-width: 780px) { .docs { grid-template-columns: 1fr; gap: 20px; } .docs-indice { position: static; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--linea); padding: 0 0 10px; } } /* --- rendimiento del tablero --- */ /* El navegador saltea el dibujado de las parties que no estan a la vista. Con varias parties abiertas es la diferencia entre desplazarse suave o a tirones. La altura estimada evita que la barra de scroll salte. */ .party { content-visibility: auto; contain-intrinsic-size: auto 420px; } /* Reservar el lugar de cada icono: sin esto el navegador reacomoda la fila cada vez que termina de bajar una imagen. */ .slot-items img, .slot-habs span { contain: paint; } /* ============ diálogo propio ============ */ .dialogo { width: min(420px, 100%); background: var(--superficie); border: 1px solid rgba(var(--neon-rgb), 0.35); border-radius: var(--radio); padding: 22px 24px 18px; box-shadow: 0 24px 70px -20px rgba(var(--neon-rgb), 0.28); animation: surgir 0.16s ease-out; } .dialogo h2 { font-family: "Barlow Condensed", sans-serif; font-size: 21px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto); margin: 0 0 8px; } .dialogo p { font-size: 13px; line-height: 1.6; color: var(--apagado); margin: 0 0 20px; } .dialogo-pie { display: flex; justify-content: flex-end; gap: 8px; } /* ============ interruptor ============ */ .interruptor { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; border: 1px solid var(--linea); border-radius: var(--radio); padding: 7px 12px 7px 9px; transition: border-color 0.15s ease, background 0.15s ease; } .interruptor input { position: absolute; opacity: 0; pointer-events: none; } .palanca { width: 30px; height: 16px; flex: none; border-radius: 99px; background: var(--superficie-alta); border: 1px solid var(--linea); position: relative; transition: background 0.18s ease, border-color 0.18s ease; } .palanca::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--apagado); transition: transform 0.18s ease, background 0.18s ease; } .interruptor-texto { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); } .interruptor.prendido { border-color: rgba(var(--neon-rgb), 0.5); background: var(--neon-tenue); } .interruptor.prendido .palanca { background: rgba(var(--neon-rgb), 0.25); border-color: var(--neon-texto); } .interruptor.prendido .palanca::after { transform: translateX(14px); background: var(--neon); } .interruptor.prendido .interruptor-texto { color: var(--neon-texto); } .interruptor input:focus-visible + .palanca { outline: 1px solid var(--neon); outline-offset: 2px; } /* ============ pantalla limpia ============ */ /* Se van la cabecera y los controles: en una call lo unico que importa es el roster. Vuelve con el boton de la esquina o con Escape. */ body.limpio .barra, body.limpio .tablero-barra { display: none; } body.limpio .envoltorio { padding-top: 14px; max-width: none; } body.limpio .banca { top: 8px; max-height: calc(100vh - 24px); } .volver-menu { position: fixed; top: 10px; right: 12px; z-index: 30; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 8px 12px; cursor: pointer; opacity: 0.7; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .volver-menu:hover { opacity: 1; color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); } .volver-menu[hidden] { display: none; } /* ============ buscador de gente ============ */ .buscador { width: 100%; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 14px; padding: 11px 13px; margin-bottom: 8px; } .buscador:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .buscador::placeholder { color: var(--apagado); } .cuenta-gente { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); margin: 0 0 14px; } /* ============ composiciones propias y ajenas ============ */ .comps h2 { margin-top: 14px; } .comps h2:first-child { margin-top: 6px; } .comp-item.ajena { opacity: 0.82; } .comp-item.ajena:hover { opacity: 1; } .marca-comp { display: inline-block; font-family: "JetBrains Mono", monospace; font-size: 10px; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); border: 1px solid var(--linea); border-radius: 2px; padding: 1px 4px; margin-left: 6px; vertical-align: middle; } .solo-lectura { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 12px; } .campo-mini input[type="checkbox"] { appearance: none; width: 14px; height: 14px; border: 1px solid var(--linea); border-radius: 2px; background: var(--superficie-alta); cursor: pointer; position: relative; } .campo-mini input[type="checkbox"]:checked { border-color: var(--neon-texto); background: var(--neon-tenue); } .campo-mini input[type="checkbox"]:checked::after { content: ""; position: absolute; inset: 3px; background: var(--neon); border-radius: 1px; } .titulo-editable[readonly] { color: var(--apagado); } /* ============ notas de la composición ============ */ .notas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); } .notas[hidden] { display: none; } .notas textarea { width: 100%; resize: vertical; min-height: 110px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 13px; line-height: 1.55; padding: 10px 11px; } .notas textarea:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .notas textarea[readonly] { color: var(--apagado); } .notas textarea::placeholder { color: var(--apagado); } .notas-estado { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); margin: 6px 0 0; min-height: 12px; } /* ============ roles de permiso ============ */ .roles { display: flex; flex-wrap: wrap; gap: 6px; } .rol-chip { background: transparent; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "Inter", sans-serif; font-size: 12px; padding: 7px 11px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .rol-chip:hover:not(:disabled) { color: var(--texto); } .rol-chip.marcado { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.55); background: var(--neon-tenue); } .rol-chip:disabled { opacity: 0.45; cursor: not-allowed; } /* ============ la vista del gremio ============ */ body.vista { --ancho-party: 800px; } body.vista { --icono: 28px; --ancho-party: 700px; } body.vista .slot { grid-template-columns: 24px 170px max-content 180px; gap: 10px; } body.vista .slot-rol { border-style: solid; cursor: default; } body.vista .slot-jugador { border-style: dashed; } body.vista .slot-jugador.lleno { border-style: solid; cursor: default; } .vista-cabecera { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 26px 0 18px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; } .vista-titulo { flex: 1; min-width: 0; } .vista-titulo h1 { font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto); margin: 0; } .vista-titulo p { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--apagado); margin: 5px 0 0; } .mi-lugar { border: 1px solid rgba(var(--neon-rgb), 0.45); background: var(--neon-tenue); border-radius: var(--radio); color: var(--texto); font-size: 14px; padding: 12px 16px; margin-bottom: 16px; } .mi-lugar[hidden] { display: none; } .mi-lugar b { color: var(--neon-texto); font-weight: 500; } .slot.es-mio { background: rgba(var(--neon-rgb), 0.07); box-shadow: inset 0 0 0 1px rgba(var(--neon-rgb), 0.3); } .vista-pie { display: flex; justify-content: space-between; gap: 14px; padding: 26px 0 50px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); } .vista-pie a { color: var(--apagado); text-decoration: none; } .vista-pie a:hover { color: var(--neon-texto); } /* ============ categorías de Gente ============ */ .categorias { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); } .categoria { background: transparent; border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "Barlow Condensed", sans-serif; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; padding: 7px 13px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .categoria:hover { color: var(--texto); } .categoria.activa { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.55); background: var(--neon-tenue); } .chip-rol img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: 3px; } .mini-icono { width: 26px; height: 26px; object-fit: contain; flex: none; } .rol-opcion img.mini-icono { margin-right: 2px; } /* ============ modos de vista del tablero ============ */ /* el equipo nunca se encoge por debajo de lo legible */ .slot-items img, .slot-hueco { min-width: 20px; min-height: 20px; } /* ============ atajo de habilidades ============ */ .usar-siempre { display: block; width: 100%; text-align: left; background: var(--neon-tenue); border: 1px dashed rgba(var(--neon-rgb), 0.45); border-radius: var(--radio); color: var(--texto); padding: 9px 12px; margin-bottom: 12px; cursor: pointer; transition: border-style 0.15s ease, background 0.15s ease; } .usar-siempre:hover { border-style: solid; background: rgba(var(--neon-rgb), 0.16); } .usar-siempre b { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neon-texto); } .usar-siempre i { display: block; font-style: normal; font-size: 11px; color: var(--apagado); margin-top: 4px; } .acciones-abajo { display: flex; gap: 8px; align-items: center; margin-top: 12px; } /* ============ desplegables propios ============ */ .select2 { position: relative; display: inline-block; } .select2 select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .select2-valor { width: 100%; text-align: left; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: inherit; font-size: inherit; padding: 9px 26px 9px 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color 0.15s ease; } .select2-valor::after { content: ""; position: absolute; right: 10px; top: 50%; width: 5px; height: 5px; border-right: 1px solid var(--apagado); border-bottom: 1px solid var(--apagado); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .select2-valor:hover { border-color: rgba(var(--neon-rgb), 0.35); } .select2.abierto .select2-valor { border-color: rgba(var(--neon-rgb), 0.6); } .select2.apagado .select2-valor { opacity: 0.5; cursor: not-allowed; } .select2-lista { position: fixed; z-index: 55; max-width: 360px; max-height: 260px; overflow-y: auto; background: var(--superficie-alta); border: 1px solid rgba(var(--neon-rgb), 0.35); border-radius: var(--radio); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.95); padding: 4px; animation: surgir 0.12s ease-out; } .select2-lista[hidden] { display: none; } .select2-opcion { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 13px; padding: 8px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .select2-opcion:hover, .select2-opcion:focus-visible { background: rgba(var(--neon-rgb), 0.1); outline: none; } .select2-opcion.elegida { color: var(--neon-texto); background: var(--neon-tenue); } /* los que ya tenían estilo propio lo conservan */ .select2.select-neon .select2-valor { font-size: 14px; } .select2.party-comp .select2-valor { font-size: 10px; padding: 5px 22px 5px 6px; } .select2.selector-tipo .select2-valor { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tipo-color, var(--texto)); border-color: var(--tipo-color, var(--linea)); padding: 8px 22px 8px 6px; } .select2.select-servidor .select2-valor { font-size: 12px; padding: 6px 22px 6px 8px; } /* --- documentación --- */ .pasos { counter-reset: paso; list-style: none; padding-left: 0; } .pasos li { counter-increment: paso; position: relative; padding-left: 34px; margin-bottom: 12px; } .pasos li::before { content: counter(paso); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--neon-tenue); border: 1px solid rgba(var(--neon-rgb), 0.45); color: var(--neon-texto); font-family: "JetBrains Mono", monospace; font-size: 11px; } .tabla-docs { width: 100%; border-collapse: collapse; margin: 4px 0 16px; font-size: 13px; } .tabla-docs th, .tabla-docs td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; line-height: 1.55; } .tabla-docs th { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); font-weight: 400; } .tabla-docs td:first-child { white-space: nowrap; color: var(--apagado); } /* ============ estadísticas en Gente ============ */ .persona-stats { display: flex; gap: 6px; align-items: center; flex: none; } .persona-stats span { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; border: 1px solid var(--linea); border-radius: 2px; padding: 3px 6px; white-space: nowrap; } .stat-puntos { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.4); } .stat-masses { color: var(--apagado); } .stat-asis.alta { color: var(--ok); border-color: rgba(72, 255, 168, 0.4); } .stat-asis.media { color: #ffb03d; border-color: rgba(255, 176, 61, 0.4); } .stat-asis.baja { color: var(--alerta); border-color: rgba(255, 61, 110, 0.4); } /* ============ ficha del jugador ============ */ .panel-jugador { position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 100vw); z-index: 45; overflow-y: auto; background: var(--superficie); border-left: 1px solid rgba(var(--neon-rgb), 0.3); box-shadow: -20px 0 50px -25px rgba(0, 0, 0, 0.95); padding: 18px 20px 40px; animation: entrar-panel 0.2s ease-out; } .panel-jugador[hidden] { display: none; } @keyframes entrar-panel { from { transform: translateX(24px); opacity: 0; } } .ficha-cabecera { display: flex; justify-content: space-between; gap: 10px; } .ficha-cabecera h2 { font-family: "Barlow Condensed", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px; } .ficha-puntos, .ficha-masses { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; border-radius: 2px; padding: 3px 7px; margin-right: 5px; } .ficha-puntos { color: var(--sobre-neon); background: var(--neon); } .ficha-masses { color: var(--apagado); border: 1px solid var(--linea); } .ficha-datos { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 20px 0 0; font-size: 12px; } .ficha-datos dt { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); align-self: center; } .ficha-datos dd { margin: 0; color: var(--texto); } .ficha-titulo { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); margin: 24px 0 9px; padding-top: 14px; border-top: 1px solid var(--linea); } .ficha-roles { display: flex; flex-wrap: wrap; gap: 5px; } .ficha-ajuste { display: grid; grid-template-columns: 70px 1fr auto; gap: 6px; } .ficha-ajuste input { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 13px; padding: 8px 9px; min-width: 0; } .ficha-ajuste input:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .ficha-historial { list-style: none; margin: 0; padding: 0; } .ficha-historial li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 12px; } .ficha-historial li.ajuste span { color: #ffb03d; } .ficha-historial li b { color: var(--neon-texto); font-weight: 400; font-family: "JetBrains Mono", monospace; } .ficha-historial li i { grid-column: 1 / -1; font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--apagado); } .ficha-historial li.vacia { color: var(--apagado); border: none; } /* una mass terminada no se edita */ body.call-cerrada .banca, body.call-cerrada #autoarmar, body.call-cerrada .slot-rol, body.call-cerrada .party-comp { pointer-events: none; opacity: 0.55; } body.call-cerrada .slot-jugador { cursor: default; } /* la muestra de fondo necesita borde: los oscuros no se ven contra el panel */ .muestra { border: 2px solid var(--linea); } .muestra.elegida { border-color: var(--texto); } /* ============ registro de masses ============ */ .resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 22px; } .resumen .dato { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; } .resumen .dato b { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 600; line-height: 1; color: var(--neon-texto); } .resumen .dato span { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); margin-top: 7px; } .registro { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; } .registro-lista { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px; position: sticky; top: 16px; max-height: calc(100vh - 40px); overflow-y: auto; } .registro-lista h2 { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); margin: 6px 8px 10px; } .mass-item { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radio); color: var(--texto); font-family: "Barlow Condensed", sans-serif; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; padding: 9px 10px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .mass-item:hover { background: rgba(var(--neon-rgb), 0.05); } .mass-item[aria-selected="true"] { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.4); background: var(--neon-tenue); } .mass-item small { display: block; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.05em; text-transform: none; color: var(--apagado); margin-top: 3px; } .mass-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--linea); margin-bottom: 20px; } .mass-cabecera h2 { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; } .mass-cabecera p { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--apagado); margin: 5px 0 0; } .mass-marcas { display: flex; gap: 6px; flex: none; } .mass-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .mass-rol { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; } .mass-rol h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: "Barlow Condensed", sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neon-texto); margin: 0 0 9px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); } .mass-rol h3 i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--apagado); } .mass-rol ul { list-style: none; margin: 0; padding: 0; } .mass-rol li { font-size: 13px; color: var(--texto); padding: 3px 0; } .mass-pie { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--linea); } @media (max-width: 820px) { .registro { grid-template-columns: 1fr; } .registro-lista { position: static; max-height: 260px; } } .campo-num { width: 110px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "JetBrains Mono", monospace; font-size: 15px; padding: 9px 11px; } .campo-num:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .campo-num:disabled { opacity: 0.5; } /* ============ barra lateral de herramientas ============ */ .abrir-herramientas { position: fixed; top: 14px; left: 14px; z-index: 35; display: grid; gap: 4px; width: 34px; height: 34px; align-content: center; justify-items: center; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); cursor: pointer; transition: border-color 0.15s ease; } .abrir-herramientas span { width: 15px; height: 1px; background: var(--apagado); transition: background 0.15s ease; } .abrir-herramientas:hover { border-color: rgba(var(--neon-rgb), 0.5); } .abrir-herramientas:hover span { background: var(--neon); } .abrir-herramientas[aria-expanded="true"] span { background: var(--neon); } .herramientas { position: fixed; top: 0; left: 0; bottom: 0; width: 218px; z-index: 34; overflow-y: auto; background: var(--superficie); border-right: 1px solid var(--linea); padding: 56px 14px 24px; animation: entrar-izq 0.2s ease-out; } .herramientas[hidden] { display: none; } @keyframes entrar-izq { from { transform: translateX(-16px); opacity: 0; } } body.con-herramientas .envoltorio { padding-left: 246px; } body.con-herramientas .banca { top: 16px; } .herramientas-cabecera { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .herramientas-cabecera h2 { font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); margin: 0; } .herramientas .grupo { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--linea); } .herramientas .grupo:last-of-type { border-bottom: none; } .herramientas .grupo > label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-texto); margin-bottom: 2px; } .herramientas .select2, .herramientas .fecha-neon { width: 100%; } .herramientas .select-neon { max-width: none; } .herramientas .interruptor { justify-content: flex-start; } .herramientas .ausentes { display: block; text-align: center; } .boton.ancho-total { width: 100%; margin-top: 0; } .boton.peligro { border-color: rgba(255, 61, 110, 0.28); } .boton.peligro:hover { color: var(--alerta); border-color: rgba(255, 61, 110, 0.55); background: rgba(255, 61, 110, 0.1); } body.limpio .abrir-herramientas, body.limpio .herramientas { display: none; } body.limpio.con-herramientas .envoltorio { padding-left: 24px; } @media (max-width: 900px) { body.con-herramientas .envoltorio { padding-left: 24px; } .herramientas { box-shadow: 12px 0 40px -18px rgba(0, 0, 0, 0.9); } } /* ============ roles de permiso: ficha + desplegable ============ */ .agregar-rol { margin-bottom: 8px; } .agregar-rol .select2 { width: 100%; } .agregar-rol[hidden] { display: none; } .rol-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 5px 5px 10px; } .quitar-rol { background: transparent; border: none; color: inherit; font-size: 14px; line-height: 1; cursor: pointer; opacity: 0.6; padding: 0 2px; } .quitar-rol:hover { opacity: 1; } /* ============ categorías de Gente ============ */ .categorias { align-items: center; } .categorias .select2 { min-width: 210px; } .categorias .select2.activa .select2-valor { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.55); background: var(--neon-tenue); } /* ============ ajustes finos del roster ============ */ /* Franjas suaves: con diez filas iguales la vista se pierde de renglón. */ .party-cuerpo .slot:nth-child(even) { background: rgba(255, 255, 255, 0.014); } [data-fondo="claro"] .party-cuerpo .slot:nth-child(even) { background: rgba(27, 34, 48, 0.03); } .slot:hover { background: rgba(var(--neon-rgb), 0.05); } /* Un lugar vacío tiene que pedirse a gritos: es lo que el caller busca. */ .slot-jugador:not(.lleno) { border-style: dashed; border-color: var(--linea); color: var(--apagado); font-style: italic; } .slot:hover .slot-jugador:not(.lleno) { border-color: rgba(var(--neon-rgb), 0.45); color: var(--neon-texto); } /* --- progreso de cada party --- */ .party-cabecera { position: relative; } .party-progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--linea); } .party-progreso::after { content: ""; display: block; width: var(--llenado, 0%); height: 100%; background: var(--neon); box-shadow: 0 0 8px rgba(var(--neon-rgb), 0.7); transition: width 0.35s ease; } /* --- banca --- */ .banca-pendientes { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alerta); margin: 7px 0 0; } .banca-pendientes:empty { display: none; } .banca-pendientes.todos { color: var(--ok); } .banca-canal { display: grid; gap: 6px; } .banca-buscar { width: 100%; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 12px; padding: 7px 9px; } .banca-buscar:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .banca-buscar::placeholder { color: var(--apagado); } /* los ya ubicados quedan al final y bien apagados */ .ficha.ubicado { opacity: 0.4; } .ficha.ubicado:hover { opacity: 0.85; } /* --- cabecera de party más clara --- */ .party-cabecera .cuenta { font-size: 12px; color: var(--texto); font-variant-numeric: tabular-nums; } .party-cuerpo { padding: 4px 4px 6px; } /* ============ ajustes de interfaz de esta tanda ============ */ /* --- barra de herramientas: sin titulo ni X, la abre su propio boton --- */ .herramientas { padding-top: 58px; } .grupo-fondo { border-bottom: none !important; margin-bottom: 0 !important; } /* --- menos aire entre el encabezado y el roster --- */ .barra { padding: 22px 0 14px; margin-bottom: 16px; } .tablero { gap: 16px; } /* --- desplegables planos: sin cuadro dentro de cuadro --- */ .ajuste .select2-valor, .campo-modal .select2-valor, .selector-categoria + .select2 .select2-valor, .select2.selector-categoria .select2-valor, .select2.selector-tipo .select2-valor, .herramientas .select2-valor { border-color: transparent; background: var(--superficie-alta); } .ajuste .select2:hover .select2-valor, .campo-modal .select2:hover .select2-valor, .select2.selector-categoria:hover .select2-valor, .select2.selector-tipo:hover .select2-valor, .herramientas .select2:hover .select2-valor { border-color: rgba(var(--neon-rgb), 0.35); } .ajuste .select2.abierto .select2-valor, .campo-modal .select2.abierto .select2-valor, .select2.selector-categoria.abierto .select2-valor, .select2.selector-tipo.abierto .select2-valor, .herramientas .select2.abierto .select2-valor { border-color: rgba(var(--neon-rgb), 0.6); } /* el tipo de rol, en mayúsculas y sin doble borde */ .select2.selector-tipo .select2-valor { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tipo-color, var(--texto)); } .select2.selector-tipo .select2-opcion { text-transform: uppercase; font-size: 11px; } /* --- categoría de Gente: un solo desplegable, ancho --- */ /* Del mismo porte que un boton, no un cuadro gigante. */ .select2.selector-categoria { width: auto; max-width: 320px; margin-bottom: 14px; } .select2.selector-categoria .select2-valor { height: 30px; display: inline-flex; align-items: center; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.4); background: var(--neon-tenue); padding: 0 26px 0 11px; } .select2.selector-categoria .select2-opcion { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; } /* --- buscador de roles en Ajustes --- */ .buscar-rol-caja { position: relative; margin-top: 10px; } .buscar-rol-caja[hidden] { display: none; } .buscador-chico { width: 100%; background: var(--superficie-alta); border: 1px solid transparent; border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 13px; padding: 9px 11px; } .buscador-chico:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .buscador-chico::placeholder { color: var(--apagado); } .sugerencias { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 220px; overflow-y: auto; background: var(--superficie-alta); border: 1px solid rgba(var(--neon-rgb), 0.35); border-radius: var(--radio); padding: 4px; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.9); } .sugerencias[hidden] { display: none; } .sugerencia { display: block; width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radio); color: var(--texto); font-size: 13px; padding: 8px 10px; cursor: pointer; } .sugerencia:hover { background: rgba(var(--neon-rgb), 0.1); } /* --- arrastrar roles en Builds --- */ .fila-num[draggable="true"] { cursor: grab; } .fila-num[draggable="true"]:active { cursor: grabbing; } .fila.arrastrando { opacity: 0.4; } .fila.encima { box-shadow: inset 0 2px 0 0 var(--neon); background: rgba(var(--neon-rgb), 0.06); } /* --- modales de crear y compartir --- */ .pestanas-anchas { margin-bottom: 16px; } .pestanas-anchas button { padding: 9px 18px; font-size: 11px; } .campo-modal { padding: 16px; display: grid; gap: 8px; } .campo-modal > label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neon-texto); } .campo-modal input[type="text"], .campo-modal textarea { width: 100%; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--texto); font-family: "Inter", sans-serif; font-size: 14px; padding: 10px 12px; resize: vertical; } .campo-modal textarea { font-family: "JetBrains Mono", monospace; font-size: 11px; line-height: 1.5; word-break: break-all; } .campo-modal input:focus, .campo-modal textarea:focus { border-color: rgba(var(--neon-rgb), 0.5); outline: none; } .campo-modal small { color: var(--apagado); font-size: 12px; line-height: 1.5; } .campo-modal .select2 { width: 100%; } /* --- registro: más aire entre las dos columnas --- */ .registro-lista .buscador-chico { margin-bottom: 8px; } /* ============ modos de vista ============ */ .modos { display: flex; gap: 3px; } .modos button { flex: 1; height: 30px; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); color: var(--apagado); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 8px; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .modos button:hover { color: var(--texto); } .modos button[aria-selected="true"] { color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); background: var(--neon-tenue); } /* --- amplio: una party por fila, con habilidades --- */ body.modo-amplio { --ancho-party: 900px; --icono: 28px; } /* --- compacto: mas parties por fila, el espacio de las habilidades pasa a los nombres, que es lo que se lee y se arrastra en plena call --- */ /* 545: es lo maximo que deja entrar dos parties por fila en 1108px. */ body.modo-compacto { --ancho-party: 545px; --icono: 24px; } body.modo-compacto .slot-habs { display: none; } body.modo-compacto .slot-equipo { grid-template-columns: var(--ancho-items); } body.modo-compacto .slot { grid-template-columns: 22px 115px max-content 145px 22px; gap: 8px; } body.modo-compacto .party-cuerpo { padding: 3px; } body.modo-compacto .slot { padding: 4px 5px; } /* el nombre respira: es la columna protagonista en este modo */ body.modo-compacto .slot-jugador { padding: 7px 10px; font-size: 13px; } /* ============ quién se fue de la mass ============ */ /* Registro nada mas: no toca puntos ni asistencia. */ .mass-rol li.se-fue { color: var(--apagado); } .mass-rol li.se-fue i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alerta); border: 1px solid rgba(255, 61, 110, 0.35); border-radius: 2px; padding: 1px 4px; margin-left: 6px; vertical-align: middle; } .stat-idos { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.06em; color: var(--alerta); border: 1px solid rgba(255, 61, 110, 0.4); border-radius: 2px; padding: 3px 6px; } /* el aviso de ausentes vive en la banca, no en la barra lateral */ .banca-cabecera .ausentes { display: block; margin: 6px 0 0; padding: 0; background: none; border: none; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alerta); } /* la cuenta en la vista, alineada con el resto de la cabecera */ body.vista .cuenta { margin-left: 0; } /* ============ acceso y suscripción ============ */ .tarjeta-acceso { border: 1px solid var(--linea); border-left-width: 3px; border-radius: var(--radio); padding: 16px 18px; margin-bottom: 20px; background: var(--superficie); } .tarjeta-acceso.ok { border-left-color: var(--ok); } .tarjeta-acceso.alerta { border-left-color: var(--alerta); } .tarjeta-acceso b { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 22px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .tarjeta-acceso.ok b { color: var(--ok); } .tarjeta-acceso.alerta b { color: var(--alerta); } .tarjeta-acceso p { font-size: 13px; color: var(--texto); margin: 5px 0 8px; } .tarjeta-acceso small { color: var(--apagado); font-size: 12px; line-height: 1.5; } .cinta-acceso { background: rgba(255, 61, 110, 0.1); border: 1px solid rgba(255, 61, 110, 0.35); border-radius: var(--radio); color: var(--texto); font-size: 13px; padding: 10px 14px; margin: 14px 0 0; } .cinta-acceso b { color: var(--alerta); font-weight: 500; } .cinta-acceso a { color: var(--neon-texto); margin-left: 8px; } /* ============ pie y enlace al Discord ============ */ .pie { display: flex; gap: 18px; padding: 30px 0 44px; margin-top: 26px; border-top: 1px solid var(--linea); font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .pie a { color: var(--apagado); text-decoration: none; } .pie a:hover { color: var(--neon-texto); } .link-discord { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); text-decoration: none; border-bottom: 1px solid var(--linea); padding-bottom: 2px; } .link-discord:hover { color: var(--neon-texto); border-color: var(--neon); } /* el equipo se centra en el espacio que le toca */ .slot-equipo { justify-content: center; } /* ============ enlace al Discord ============ */ .discord-link { position: fixed; right: 12px; bottom: 10px; z-index: 25; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--apagado); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 6px 10px; opacity: 0.65; transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .discord-link:hover { opacity: 1; color: var(--neon-texto); border-color: rgba(var(--neon-rgb), 0.5); } body.limpio .discord-link { display: none; }