/* Panel de la emisora: oscuro, sobrio y legible en celular. */

:root {
  --amarillo-colforce: #ffb400;   /* "amarillo colForce": el amarillo de la marca */
  --fondo: #0d0d0f;
  --superficie: #17171a;
  --superficie-2: #202024;
  --linea: #2c2c31;
  --texto: #f1f1f3;
  --texto-2: #a7a7b0;
  --acento: var(--amarillo-colforce);
  --acento-oscuro: #e09900;
  --ok: #3ccf7e;
  --alerta: var(--amarillo-colforce);
  --error: #ff5d5d;
  --radio: 14px;
  color-scheme: dark;
}
/* Barras de desplazamiento: fondo transparente y barra en amarillo colForce (en todo el sistema) */
:root { scrollbar-color: var(--amarillo-colforce) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--amarillo-colforce) padding-box; border-radius: 999px; border: 2px solid transparent; }
::-webkit-scrollbar-thumb:hover { background: #ffcb47 padding-box; }


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--fondo); color: var(--texto);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--acento); }
h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin: 0 0 .4em; }
h2 { font-size: 1.1rem; margin: 1.6em 0 .6em; }
.tarjeta > h2:first-child { margin-top: 0; }
code { background: var(--superficie-2); padding: .1em .35em; border-radius: 5px; font-size: .9em; }

/* ── Barra del panel ── */
.barra {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 12px clamp(16px, 4vw, 40px); background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.barra-marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 700; text-decoration: none; }
.barra-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px rgba(255, 180, 0, .18); flex: none; }
.barra-menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.barra-menu a, .barra-pronto { padding: 6px 12px; border-radius: 999px; color: var(--texto-2); text-decoration: none; font-size: .95rem; }
.barra-menu a:hover { color: var(--texto); background: var(--superficie-2); }
.barra-menu a[aria-current="page"] { color: #111; background: var(--acento); font-weight: 600; }
.barra-pronto { opacity: .45; cursor: default; }
.barra-usuario { display: flex; align-items: center; gap: 14px; font-size: .95rem; }
.barra-usuario a { color: var(--texto); text-decoration: none; }
.barra-usuario form { margin: 0; display: flex; align-items: center; gap: 14px; }
.barra-usuario form::before { content: '|'; color: var(--texto-2); opacity: .5; }

/* ── Contenido ── */
.contenido { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px); }
.tipo-admin .contenido { max-width: none; }   /* el superadmin usa todo el ancho: sus tablas tienen muchas columnas */
.tipo-simple .contenido { display: flex; flex-direction: column; justify-content: center; }
.pie { text-align: center; color: var(--texto-2); font-size: .8rem; padding: 16px; }
.nota { color: var(--texto-2); }
.centrada { text-align: center; }

.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(18px, 3vw, 28px); margin-bottom: 20px; }
.tarjeta-estrecha { width: 100%; max-width: 440px; margin-left: auto; margin-right: auto; }
.tarjeta-media { max-width: 720px; margin-left: auto; margin-right: auto; }
/* Página de una sola columna (todas sus tarjetas son angostas): el título y los avisos se alinean con ella, centrados */
.contenido:has(> .tarjeta-media):not(:has(> .tarjeta:not(.tarjeta-media))) { max-width: calc(720px + 2 * clamp(16px, 4vw, 40px)); }
/* Si la página también tiene contenido ancho (tablas), la tarjeta angosta usa todo el ancho y queda alineada */
.contenido:has(> .tarjeta:not(.tarjeta-media)) > .tarjeta-media { max-width: none; }
.tipo-simple .tarjeta-media { width: 100%; margin-left: auto; margin-right: auto; }
.marca-acceso { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 0 0 18px; }
.centrada .marca-acceso { justify-content: center; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 20px; }
.rejilla .tarjeta { margin: 0; }
.rejilla > * { min-width: 0; }   /* una tabla ancha usa su propio scroll en vez de empujar la página */
.tarjeta-pronto { position: relative; }
.tarjeta-pronto p { color: var(--texto-2); }
.etiqueta { display: inline-block; white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--linea); }

/* ── Avisos ── */
.aviso { padding: 12px 16px; border-radius: 10px; border: 1px solid; margin: 0 0 18px; }
.aviso ul { margin: 0; padding-left: 18px; }
.aviso-ok { color: var(--ok); border-color: rgba(60, 207, 126, .35); background: rgba(60, 207, 126, .08); }
.aviso-alerta { color: var(--alerta); border-color: rgba(255, 180, 0, .35); background: rgba(255, 180, 0, .08); }
.aviso-error { color: var(--error); border-color: rgba(255, 93, 93, .35); background: rgba(255, 93, 93, .08); }

/* ── Listas de estado y requisitos ── */
.requisitos, .estado { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.requisitos .si span, .estado .si::before { color: var(--ok); }
.requisitos .no, .estado .no { color: var(--error); }
.requisitos .aviso-texto { color: var(--alerta); }
.texto-env { width: 100%; font: .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 12px; margin: 6px 0 18px; resize: vertical; }
.estado li::before { content: '●'; margin-right: 8px; font-size: .8em; }
.estado .no::before { color: var(--error); }

/* ── Formularios ── */
.formulario { display: grid; gap: 16px; }
.formulario h2 { margin-bottom: 0; }
label { display: grid; gap: 6px; align-content: start; font-weight: 600; font-size: .95rem; }
label small { font-weight: 400; color: var(--texto-2); }
input, select {
  width: 100%; font: inherit; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px; padding: 11px 13px;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
input:disabled { color: var(--texto-2); }
.dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
/* Dos campos lado a lado: títulos arriba y campos alineados abajo, con su alto normal (aunque solo uno tenga texto de ayuda) */
.dos > label { display: flex; flex-direction: column; gap: 6px; }
.dos > label > input, .dos > label > select { margin-top: auto; }

.boton {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  font: inherit; font-weight: 700; color: #111; background: var(--acento);
  border: 0; border-radius: 999px; padding: 12px 24px; cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--acento-oscuro); }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton:disabled:hover { background: var(--acento); }
/* Trabajando (por ejemplo, "Leyendo…"): indicador que gira dentro del botón */
.boton-ocupado::before { content: ''; width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, .25); border-top-color: #111; border-radius: 50%; animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.enlace { font: inherit; color: var(--acento); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.enlace.peligro { color: var(--error); }
.barra-usuario .enlace { color: var(--texto-2); text-decoration: none; }
.barra-usuario a:hover, .barra-usuario .enlace:hover { color: var(--acento); }

/* ── Tablas ── */
.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla th { color: var(--texto-2); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.tabla select { width: auto; padding: 6px 10px; }
.en-linea { display: inline; margin: 0; }
.acciones { white-space: nowrap; }
.acciones > * + * { margin-left: 8px; }
/* Acciones dentro de las tablas: botones pequeños de contorno (amarillo, o rojo si borran algo) */
.tabla .enlace, .tabla .acciones a {
  display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 180, 0, .45); background: transparent; color: var(--acento);
  font-weight: 600; font-size: .85rem; line-height: 1.2; text-decoration: none;
}
.tabla .enlace:hover, .tabla .acciones a:hover { background: rgba(255, 180, 0, .12); border-color: var(--acento); }
.tabla .enlace.peligro { border-color: rgba(255, 93, 93, .5); color: var(--error); }
.tabla .enlace.peligro:hover { background: rgba(255, 93, 93, .12); border-color: var(--error); }
.tabla .enlace:disabled { opacity: .35; cursor: default; background: transparent; }

/* ── Piezas de la emisora ── */
.contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--error); color: #fff; font-size: .72rem; font-weight: 700; }
.destacada { border-color: rgba(255, 180, 0, .45); background: linear-gradient(180deg, rgba(255, 180, 0, .07), transparent), var(--superficie); }
.progreso { height: 8px; background: var(--superficie-2); border-radius: 8px; overflow: hidden; margin: 14px 0 6px; }
.progreso span { display: block; height: 100%; width: 0; background: var(--acento); transition: width .4s; }
.texto-error { color: var(--error); }
.etiqueta-ok { color: var(--ok); border-color: rgba(60, 207, 126, .35); }
.etiqueta-alerta { color: var(--alerta); border-color: rgba(255, 180, 0, .4); }
.etiqueta-error { color: var(--error); border-color: rgba(255, 93, 93, .4); }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.filtros input { flex: 1 1 240px; width: auto; }
.filtros select { flex: 0 1 220px; width: auto; }
.boton-sec { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--linea); }
.boton-sec:hover { background: var(--linea); }
.boton-peq { padding: 7px 14px; font-size: .9rem; }
.sin-caratula { display: block; width: 40px; height: 40px; border-radius: 8px; background: radial-gradient(circle, var(--acento) 0 14%, var(--superficie-2) 16%); }
.paginas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.paginas a { min-width: 36px; padding: 6px 10px; text-align: center; border-radius: 8px; background: var(--superficie-2); color: var(--texto-2); text-decoration: none; }
.paginas a[aria-current="page"] { background: var(--acento); color: #111; font-weight: 700; }
.casilla { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.casilla input { width: auto; }
.dias { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.lista-scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--linea); border-radius: 10px; }
.mini { font-size: .85rem; }
textarea { width: 100%; font: inherit; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; padding: 11px 13px; }
.codigo { font: .85rem/1.5 ui-monospace, Menlo, Consolas, monospace; }

/* Parrilla semanal: columnas por día, franjas ubicadas por hora */
.semana { display: grid; grid-template-columns: 44px repeat(7, minmax(90px, 1fr)); gap: 6px; min-width: 760px; }
.semana-dia { text-align: center; font-weight: 700; font-size: .85rem; color: var(--texto-2); padding-bottom: 6px; }
.semana-col { position: relative; height: 576px; background: repeating-linear-gradient(to bottom, var(--superficie-2) 0 1px, transparent 1px 48px); border-radius: 8px; border: 1px solid var(--linea); }
.semana-horas { position: relative; height: 576px; font-size: .7rem; color: var(--texto-2); }
.semana-horas span { position: absolute; right: 4px; transform: translateY(-50%); }
.franja { position: absolute; left: 3px; right: 3px; border-radius: 6px; background: rgba(255, 180, 0, .2); border: 1px solid rgba(255, 180, 0, .55); padding: 3px 6px; font-size: .72rem; line-height: 1.25; overflow: hidden; color: var(--texto); }
.franja strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja-relleno { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 6px, transparent 6px 12px); border-style: dashed; border-color: var(--linea); color: var(--texto-2); }
.ahora-suena { display: flex; gap: 16px; align-items: center; }
.ahora-suena img, .ahora-suena .sin-caratula { width: 72px; height: 72px; border-radius: 12px; flex: none; }
.ahora-suena .logo-ahora { object-fit: contain; background: var(--superficie-2); padding: 6px; box-sizing: border-box; }
.ahora-suena p { margin: 0; }

@media (max-width: 640px) {
  .barra { gap: 12px; }
  .barra-menu { order: 3; flex-basis: 100%; }
}

/* ── En vivo y ajustes ── */
.punto-vivo { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 3px rgba(255, 77, 77, .25); vertical-align: middle; animation: latido 1.6s ease-in-out infinite; }
.franja-vivo { background: #3a1010; border-bottom: 1px solid rgba(255, 77, 77, .45); color: #ffd0d0; text-align: center; padding: 9px 16px; font-size: .92rem; }
.franja-vivo a { color: #fff; font-weight: 700; }
.franja-prueba { background: rgba(255, 180, 0, .1); border-bottom: 1px solid rgba(255, 180, 0, .35); color: var(--texto); text-align: center; padding: 9px 16px; font-size: .92rem; }
.franja-admin { background: #10243a; border-bottom: 1px solid rgba(80, 160, 255, .45); color: #d0e6ff; text-align: center; padding: 9px 16px; font-size: .92rem; }
.franja-admin a { color: #fff; font-weight: 700; }
/* Plataforma: estados de las emisoras en el superadmin */
.etiqueta-prueba { background: rgba(255, 180, 0, .15); color: var(--acento); }
.etiqueta-activa { background: rgba(60, 207, 126, .15); color: var(--ok); }
.etiqueta-suspendida { background: rgba(255, 93, 93, .15); color: var(--error); }
.inicio-plataforma { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; }
.inicio-plataforma .tarjeta { margin: 0; }
.marca-plataforma { text-align: center; margin: 10px 0 28px; }
.marca-plataforma h1 { margin: 0 0 6px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.marca-plataforma p { color: var(--texto-2); margin: 0; }
.ventajas { margin: 0; padding-left: 1.2em; color: var(--texto-2); }
.ventajas li { margin: 6px 0; }
.reproductor-privado { display: block; width: 100%; max-width: 560px; height: 96px; border: 0; border-radius: 18px; margin: 14px 0 6px; background: transparent; }
.filtros-estado { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.filtros-estado a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto-2); text-decoration: none; font-size: .9rem; }
.filtros-estado a[aria-current] { border-color: var(--acento); color: var(--acento); }
.borrar-emisora { display: inline-block; margin-left: 8px; vertical-align: middle; white-space: normal; }
.borrar-emisora summary { list-style: none; cursor: pointer; }
.borrar-emisora summary::-webkit-details-marker { display: none; }
.borrar-emisora[open] form { margin-top: 10px; min-width: 240px; }
.prefijo { display: flex; align-items: stretch; }
.prefijo > span { display: flex; align-items: center; padding: 0 10px; background: var(--superficie-2); border: 1px solid var(--linea); border-right: 0; border-radius: 10px 0 0 10px; color: var(--texto-2); font-weight: 400; font-size: .9rem; white-space: nowrap; }
.prefijo input { border-radius: 0 10px 10px 0; }
.registro { max-height: 420px; overflow: auto; margin: 0; padding: 12px; background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; font: .78rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; color: var(--texto-2); }
.campo-oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.al-aire { border-color: rgba(255, 77, 77, .55); background: linear-gradient(180deg, rgba(255, 77, 77, .09), transparent), var(--superficie); }
.video-panel { aspect-ratio: 16 / 9; max-width: 560px; border-radius: 12px; overflow: hidden; background: #000; margin: 12px 0; }
.video-panel iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.boton-peligro { background: var(--error); color: #fff; }
.boton-peligro:hover { background: #e04848; }
/* Acción destructiva secundaria (por ejemplo, "Quitar logo" debajo de "Cambiar logo") */
.boton-contorno-peligro { width: 100%; background: transparent; color: var(--error); border: 1px solid rgba(255, 93, 93, .5); }
.boton-contorno-peligro:hover { background: rgba(255, 93, 93, .12); border-color: var(--error); }
.form-quitar { margin-top: 12px; }

/* ── Estadísticas ── */
.rejilla-estadisticas { grid-template-columns: minmax(190px, 1fr) 3fr; }
@media (max-width: 860px) { .rejilla-estadisticas { grid-template-columns: 1fr; } }
.cifra-ahora .cifra { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; line-height: 1; margin: 6px 0 4px; }
.grafico { margin: 0; }
.grafico figcaption { margin-bottom: 18px; }
.grafico figcaption .nota { margin-left: 6px; }
.grafico-vacio { margin: 8px 0 0; }
.grafico-area { position: relative; height: 190px; margin: 26px 0 0 40px; }
.grafico-linea { position: absolute; left: 0; right: 0; border-top: 1px solid var(--linea); }
.grafico-linea span { position: absolute; right: calc(100% + 8px); top: -.6em; font-size: .72rem; color: var(--texto-2); white-space: nowrap; }
.grafico-columnas { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.grafico-col { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.grafico-barra { width: 100%; max-width: 24px; background: var(--amarillo-colforce); border-radius: 4px 4px 0 0; }
.grafico-col:hover .grafico-barra, .grafico-col:focus-visible .grafico-barra { background: #ffcb47; }
.grafico-col:hover, .grafico-col:focus-visible { background: rgba(255, 255, 255, .03); }
.grafico-pico { position: absolute; left: 50%; transform: translate(-50%, -4px); font-size: .75rem; font-weight: 700; color: var(--texto); white-space: nowrap; pointer-events: none; }
.grafico-col::after {
  content: attr(data-tip); position: absolute; top: 0; left: 50%; transform: translate(-50%, calc(-100% - 6px)); z-index: 2;
  background: var(--superficie-2); color: var(--texto); border: 1px solid var(--linea); border-radius: 8px; padding: 5px 9px;
  font-size: .78rem; white-space: nowrap; pointer-events: none; display: none;
}
.grafico-col:nth-child(-n+4)::after { left: 0; transform: translate(0, calc(-100% - 6px)); }
.grafico-col:nth-last-child(-n+4)::after { left: auto; right: 0; transform: translate(0, calc(-100% - 6px)); }
.grafico-col:hover::after, .grafico-col:focus-visible::after { display: block; }
.grafico-eje { display: flex; gap: 2px; margin: 6px 0 0 40px; }
.grafico-eje span { flex: 1; text-align: center; font-size: .72rem; color: var(--texto-2); white-space: nowrap; overflow: visible; min-width: 0; }
.grafico-tabla { margin-top: 14px; }
.grafico-tabla summary { cursor: pointer; color: var(--texto-2); font-size: .85rem; }
.boton-vivo { background: #e53935; color: #fff; }
.boton-vivo:hover { background: #c62828; }
.logo-actual { width: 160px; height: 160px; border-radius: 16px; background: var(--fondo); border: 1px solid var(--linea); display: grid; place-items: center; margin: 12px 0; overflow: hidden; }
.logo-actual img { max-width: 100%; max-height: 100%; object-fit: contain; }
@keyframes latido { 50% { opacity: .35; } }

/* Inicio del panel: códigos para incrustar el reproductor (barra fija y tarjeta) */
.codigos-embed h3 { font-size: 1rem; margin: 22px 0 2px; }
.codigos-embed details { margin: 6px 0 4px; }
.codigos-embed summary { cursor: pointer; }
.codigos-embed summary:hover { color: var(--acento); }
.codigos-embed details .codigo { margin-top: 8px; }

/* ── Mi página ── */
.mi-pagina { gap: 0; }
.mi-pagina .tarjeta { display: grid; gap: 16px; }
.mi-pagina .tarjeta h2 { margin: 0; }
.colores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 220px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .colores { grid-template-columns: 1fr; } }
.color-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.color-campo legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 10px; display: grid; gap: 4px; }
.color-campo legend small { font-weight: 400; color: var(--texto-2); }
.muestras { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muestra { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--linea); cursor: pointer; padding: 0; }
.muestra:hover { transform: scale(1.08); }
.muestra[aria-pressed="true"] { outline: 2px solid var(--texto); outline-offset: 2px; }
.muestra-personal { display: block; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px dashed var(--texto-2); position: relative; cursor: pointer; background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red); }
.muestra-personal input { position: absolute; inset: -8px; width: 50px; height: 50px; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.vista-colores { --v-acento: #ffb400; --v-acento-texto: #ffb400; --v-sobre: #111; --v-fondo: #0b0b0d; background: var(--v-fondo); border: 1px solid var(--linea); border-radius: 14px; padding: 22px; display: grid; place-items: center; }
.vista-colores-tarjeta { width: 100%; max-width: 170px; background: #151518; border: 1px solid #26262b; border-radius: 16px; padding: 14px; display: grid; gap: 12px; justify-items: center; }
.vista-colores-envivo { justify-self: end; font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--v-acento-texto); border: 1px solid color-mix(in srgb, var(--v-acento-texto) 40%, transparent); border-radius: 999px; padding: 2px 8px; }
.vista-colores-barra { width: 100%; height: 4px; border-radius: 4px; background: #26262b; overflow: hidden; }
.vista-colores-barra span { display: block; width: 40%; height: 100%; background: var(--v-acento-texto); }
.vista-colores-boton { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--v-acento); color: var(--v-sobre); font-size: 1rem; }
.vista-colores-aviso { margin: 10px 2px 0; }
.vista-colores-aviso:empty { display: none; }
.red-etiqueta { display: inline-flex; align-items: center; gap: 8px; }
.red-etiqueta svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.opcion { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; }
.opcion input { width: auto; accent-color: var(--acento); }
.acciones-pagina { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.form-restaurar { margin-bottom: 20px; }
.fuentes { border: 0; margin: 0; padding: 0; min-width: 0; }
.fuentes legend { font-weight: 600; font-size: .95rem; padding: 0; margin-bottom: 10px; display: grid; gap: 4px; }
.fuentes legend small { font-weight: 400; color: var(--texto-2); }
.fuentes-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fuente-opcion { position: relative; display: grid; gap: 6px; align-content: space-between; min-height: 92px; padding: 14px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo); cursor: pointer; overflow: hidden; }
.fuente-opcion:hover { border-color: var(--texto-2); }
.fuente-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fuente-opcion:has(input:checked) { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.fuente-opcion:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }
.fuente-muestra { line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--texto); }
.fuente-nombre { font-size: .8rem; font-weight: 500; color: var(--texto-2); }
.fuente-opcion:has(input:checked) .fuente-nombre { color: var(--acento); }