/* Inspiracom · Al Aire — panel con el mismo estilo de InspiraLink
   Marca: primario #166FCD · hondo #14439D · cielo #5DACF9 (superficies) · verde #7EB526 (acentos)
   Texto #313233 · borde #E3E8EF · gris #7A8494 · Montserrat (títulos) · Inter (texto)
   La cabina tiene su propia hoja: assets/cabina.css */
:root {
  --marca: #166FCD; --marca-hondo: #14439D; --cielo: #5DACF9; --cielo-suave: #eaf3fd; --cielo-borde: #cfe3fa;
  --verde: #7EB526; --verde-texto: #3d5c10; --verde-suave: #eef7e1;
  --tinta: #313233; --suave: #5F6B7A; --gris: #7A8494; --linea: #E3E8EF; --campo: #d3dbe6;
  --fondo: #f5f8fc; --papel: #fff;
  --titulos: Montserrat, Inter, system-ui, sans-serif;
  --error: #8a1c1c; --error-bg: #fdecec; --aviso-bg: #fff5db; --aviso-tx: #7a5200;
  --oracion: #14439D; --oracion-texto: #14439D;
  --felicita: #5DACF9; --felicita-texto: #166FCD;
  --concurso: #7EB526; --concurso-texto: #3d5c10;
  --radio: 12px; --escala: 1;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--marca); }
h1, h2, h3, .btn { font-family: var(--titulos); }
h1 { font-size: 22px; font-weight: 700; color: var(--marca-hondo); letter-spacing: -.2px; margin: 0 0 14px; line-height: 1.25; }
h2 { font-size: 18px; font-weight: 700; color: var(--marca-hondo); letter-spacing: -.2px; margin: 0 0 12px; }
code { font-size: .85em; background: var(--cielo-suave); color: var(--marca-hondo); padding: .15em .4em; border-radius: 5px; word-break: break-all; }
[hidden] { display: none !important; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 16px 16px 48px; }
.angosto { max-width: 620px; }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; } }

.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; box-shadow: 0 1px 2px rgba(20,67,157,.05); }
.meta { color: var(--gris); font-size: 13px; }
.nota { color: var(--gris); font-size: 13px; margin-top: 14px; }
.intro { color: var(--suave); margin: -4px 0 16px; font-size: 15px; }

.aviso { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; font-size: 15px; }
.aviso.ok { background: var(--verde-suave); color: var(--verde-texto); }
.aviso.error { background: var(--error-bg); color: var(--error); }

/* Botones: principal azul, secundario blanco con borde */
.btn { display: inline-block; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--marca); background: var(--marca); color: #fff;
  font: inherit; font-family: var(--titulos); font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none; text-align: center; line-height: 1.2; }
.btn:hover { background: var(--marca-hondo); border-color: var(--marca-hondo); }
.btn.sec { background: #fff; color: var(--tinta); border-color: var(--campo); }
.btn.sec:hover { background: var(--cielo-suave); border-color: var(--marca); color: var(--marca-hondo); }
.btn.peligro { background: #fff; color: #a12020; border-color: #e3b4b4; }
.btn.peligro:hover { background: var(--error-bg); }
.btn:disabled { opacity: .6; cursor: wait; }
.grande-btn { width: 100%; padding: 13px 22px; font-size: 17px; }
.grande-btn span[hidden] { display: none; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Formularios */
.form label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 14px; }
.form label small { display: block; font-weight: 400; color: var(--gris); font-size: 13px; margin-top: 5px; }
.form input:not([type=radio]):not([type=checkbox]):not([type=color]):not([type=file]), .form select, .form textarea {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; font-size: 15px; font-weight: 400;
  border: 1px solid var(--campo); border-radius: 7px; background: #fff; color: var(--tinta); }
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid #bcdcfc; border-color: var(--marca); }
.form input[type=color] { display: block; margin-top: 5px; width: 64px; height: 42px; border: 1px solid var(--campo); border-radius: 7px; padding: 3px; }
.form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 500; }
.form .check input { margin-top: 3px; accent-color: var(--marca); }
.form .par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tipo de mensaje (captura telefónica) */
.tipos { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tipos.n4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .tipos.n4 { grid-template-columns: repeat(2, 1fr); } }
.tipos legend { font-weight: 600; font-size: 14px; margin-bottom: 8px; padding: 0; }
.tipos .tipo { margin: 0; }
.tipo input { position: absolute; opacity: 0; pointer-events: none; }
.tipo span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border: 1px solid var(--campo); border-radius: 8px; background: #fff; cursor: pointer; font-size: 15px; font-weight: 600; text-align: center; line-height: 1.2; }
.tipo span b { font-size: 1.1em; font-weight: 400; }
.tipo input:checked + span { border-color: var(--marca); background: var(--cielo-suave); color: var(--marca-hondo); box-shadow: inset 0 0 0 1px var(--marca); }
.tipo input:focus-visible + span { outline: 2px solid #bcdcfc; }
.sin-tipo .campos { display: none; }
.pregunta-caja { background: #f3f8fe; border: 1px solid var(--cielo-borde); border-radius: 8px; padding: 12px 14px; margin-bottom: 16px; }
.pregunta-caja .etq { text-transform: uppercase; letter-spacing: .05em; font-size: 12px; font-weight: 700; color: var(--marca); }
.pregunta-caja p { margin: 4px 0 0; font-family: var(--titulos); font-size: 17px; font-weight: 700; color: var(--marca-hondo); white-space: pre-wrap; }
.pregunta-caja .premio { margin-top: 6px; font-size: 14px; color: var(--verde-texto); font-weight: 600; }

/* ---------------- Barra superior (igual a InspiraLink) ---------------- */
.barra { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; padding: 10px 16px; background: linear-gradient(90deg, #14439D 0%, #166FCD 100%); color: #fff; }
.barra a { color: #dcebfb; text-decoration: none; }
.barra .marca-txt { display: flex; align-items: center; gap: 10px; color: #fff; font-family: var(--titulos); }
.barra .marca-logo { height: 28px; width: auto; display: block; }
.barra .marca-prod { font-weight: 600; font-size: 15px; opacity: .92; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.4); white-space: nowrap; }
.barra nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.barra nav a { color: #dcebfb; font-weight: 500; font-size: 15px; padding: 6px 10px; border-radius: 6px; }
.barra nav a.activo, .barra nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
.barra .quien { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: 14px; color: #dcebfb; }
.barra .quien a { text-decoration: underline; }

/* Encabezado de página: franja de estación (como la "campbar" de InspiraLink) */
.hero { max-width: 1180px; margin: 0 auto; padding: 16px 16px 0; }
.hero-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--cielo-suave); border: 1px solid var(--cielo-borde); border-radius: 10px; }
.hero .logo-hero { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; background: #fff; flex: none; padding: 2px; }
.hero-tit { flex: 1; min-width: 0; }
.hero .eyebrow { font-size: 14px; color: var(--gris); }
.hero h1 { margin: 0; font-size: 20px; }
.hero-sel { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--suave); }
.hero-sel select { font: inherit; font-weight: 600; color: var(--marca-hondo); background: #fff; border: 1px solid var(--campo); border-radius: 7px; padding: 8px 10px; min-width: 220px; cursor: pointer; }
.hero-sel select:focus { outline: 2px solid #bcdcfc; border-color: var(--marca); }
@media (max-width: 640px) { .hero-sel { width: 100%; } .hero-sel select { flex: 1; min-width: 0; } }

.titulo-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.titulo-fila h1, .titulo-fila h2 { margin: 0; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.filtros select, .filtros input { padding: 8px 10px; border: 1px solid var(--campo); border-radius: 7px; font: inherit; font-size: 14px; background: #fff; }

/* Estados de Mensajes: pastillas como el selector del Tablero */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.pestanas a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linea); background: #fff; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 14px; white-space: nowrap; }
.pestanas a:hover { border-color: var(--marca); }
.pestanas a b { margin-left: 4px; font-size: 12px; background: var(--cielo-suave); color: var(--marca-hondo); border-radius: 999px; padding: 1px 7px; }
.pestanas a.activo { background: var(--marca-hondo); border-color: var(--marca-hondo); color: #fff; }
.pestanas a.activo b { background: rgba(255,255,255,.2); color: #fff; }

.acciones-lote { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; position: sticky; top: 0; background: var(--fondo); padding: 8px 0; z-index: 2; }
.acciones-lote .todos { margin-right: auto; font-size: 14px; display: flex; gap: 6px; align-items: center; }

/* Listas */
.tabla { display: grid; gap: 8px; }
.fila { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--linea); border-radius: 8px; padding: 12px 14px; cursor: pointer; text-decoration: none; color: var(--tinta); box-shadow: 0 1px 2px rgba(20,67,157,.04); }
.fila:hover { background: #f7fafd; }
.fila input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--marca); }
.fila-cuerpo { flex: 1; min-width: 0; }
.fila-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 2px; }
.fila-txt { font-size: 15px; }
.fila-txt p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fila .tipo { font-weight: 700; font-size: 13px; font-family: var(--titulos); }
.t-oracion { border-left-color: var(--oracion); } .t-oracion .tipo { color: var(--oracion-texto); }
.t-cumpleanos, .t-saludo { border-left-color: var(--felicita); } .t-cumpleanos .tipo, .t-saludo .tipo { color: var(--felicita-texto); }
.t-concurso { border-left-color: var(--concurso); } .t-concurso .tipo { color: var(--concurso-texto); }
.chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cielo-suave); color: var(--marca-hondo); }
.chip.vivo { background: var(--verde-suave); color: var(--verde-texto); }
.chip.ganador-chip { background: var(--verde); color: #fff; }
.chip.editado { background: var(--aviso-bg); color: var(--aviso-tx); }
.btn-editar { margin-left: auto; font-size: 13px; font-weight: 700; font-family: var(--titulos); text-decoration: none; color: var(--tinta); background: #fff; border: 1px solid var(--campo); border-radius: 7px; padding: 4px 10px; }
.btn-editar:hover { border-color: var(--marca); background: var(--cielo-suave); color: var(--marca-hondo); }
.punto { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 5px; }
.logo-lista { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; flex: none; background: #fff; border: 1px solid var(--linea); padding: 2px; }
.vacio-panel { padding: 36px 20px; text-align: center; color: var(--gris); background: #fff; border: 1px dashed var(--campo); border-radius: 10px; }
.recientes { list-style: none; padding: 0; margin: 0; }
.recientes li { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: 15px; }
.recientes li:last-child { border-bottom: 0; }
.recientes small { color: var(--gris); }
.roles { margin-top: 16px; } .roles ul { padding-left: 18px; margin: 0; } .roles li { margin-bottom: 6px; font-size: 15px; }
.est-sel { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cielo-suave); border: 1px solid var(--cielo-borde); border-radius: 8px; margin-bottom: 14px; font-weight: 600; color: var(--marca-hondo); }
.est-sel .logo-lista { width: 30px; height: 30px; }
.enlaces { margin-top: 24px; }
.enlace { display: grid; gap: 4px; margin: 10px 0; }

/* Estaciones */
.logo-editor { display: flex; gap: 14px; align-items: center; margin: 6px 0 10px; }
.logo-prev { width: 84px; height: 84px; border-radius: 12px; border: 1px dashed var(--campo); background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; color: var(--gris); font-size: 12px; text-align: center; }
.logo-prev img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-editor input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
.logo-editor input[type=file]::file-selector-button { font: inherit; font-family: var(--titulos); font-weight: 700; border: 1px solid var(--campo); border-radius: 7px; padding: 7px 12px; margin-right: 10px; background: #fff; color: var(--tinta); cursor: pointer; }
.logo-editor input[type=file]::file-selector-button:hover { border-color: var(--marca); background: var(--cielo-suave); }
.enlaces-est { display: grid; gap: 4px; margin: -4px 0 16px; padding: 10px 12px; background: #f3f8fe; border: 1px solid var(--cielo-borde); border-radius: 8px; }
.enlaces-est code { background: #fff; }
.enlace-forma { display: grid; gap: 4px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--cielo-borde); }
.enlace-forma:first-of-type { border-top: 0; }
.enlace-par { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px; align-items: center; }
.enlace-par span { font-size: 11px; font-weight: 800; color: var(--marca-hondo); text-transform: uppercase; letter-spacing: .04em; }

/* Concursos (panel) */
.concurso-activo { border-left: 4px solid var(--verde); }
.concurso-activo .pregunta { font-family: var(--titulos); font-size: 18px; font-weight: 700; margin: 10px 0; white-space: pre-wrap; color: var(--marca-hondo); }
.stats { display: flex; gap: 12px; margin: 10px 0 16px; flex-wrap: wrap; }
.stats div { display: flex; flex-direction: column; padding: 10px 14px; background: #f3f8fe; border: 1px solid var(--cielo-borde); border-radius: 8px; min-width: 110px; }
.stats b { font-size: 24px; line-height: 1.1; color: var(--marca-hondo); font-family: var(--titulos); }
.stats span { color: var(--gris); font-size: 13px; }
h2.sep { margin-top: 24px; }
.enlaces-c { margin-top: 16px; display: grid; gap: 6px; }

/* Editar mensaje */
.editar-original { background: #f7f9fc; border: 1px dashed var(--campo); border-radius: 8px; padding: 10px 12px; margin-bottom: 16px; font-size: 14px; color: var(--suave); white-space: pre-wrap; overflow-wrap: anywhere; }
.editar-original b { color: var(--tinta); }

/* Entrar */
.login-top { justify-content: flex-start; }
.login-card { max-width: 420px; margin: 48px auto 0; padding: 26px 24px 22px; }
.login-logo { display: block; height: 44px; width: auto; max-width: 80%; margin: 0 auto 14px; }
.login-card h1 { text-align: center; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--gris); font-size: 14px; margin: 0 0 18px; }
.login-card .btn { width: 100%; padding: 12px 16px; font-size: 16px; }

/* Mensajes sueltos de la cabina (también se usan en el panel) */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--marca-hondo); color: #fff; padding: 10px 12px 10px 16px; border-radius: 10px; display: flex; gap: 12px; align-items: center; box-shadow: 0 8px 30px rgba(10,30,80,.35); font-weight: 600; z-index: 60; }
.toast button { background: #fff; color: var(--marca-hondo); border: 0; border-radius: 7px; padding: 7px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.sin-conexion { position: fixed; top: 0; left: 0; right: 0; background: #b42318; color: #fff; text-align: center; padding: 6px; font-weight: 700; z-index: 70; }

/* Tema de la oración */
.temas { border: 0; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.temas legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.temas legend em { font-style: normal; font-weight: 400; color: var(--gris); }
.tema { margin: 0 !important; }
.tema input { position: absolute; opacity: 0; pointer-events: none; }
.tema span { display: inline-block; padding: 6px 12px; border: 1px solid var(--campo); border-radius: 999px; font-size: 14px; font-weight: 500; cursor: pointer; background: #fff; }
.tema input:checked + span { border-color: var(--marca-hondo); background: var(--marca-hondo); color: #fff; }
.tema input:focus-visible + span { outline: 2px solid #bcdcfc; }
.chip.tema-chip { background: #f0f2f6; color: var(--suave); }

/* Página Temas */
.temas-lista { display: grid; gap: 6px; }
.tema-fila { display: grid; grid-template-columns: 1.3fr 1.3fr 64px 1fr auto; gap: 8px; align-items: center; }
.tema-fila input:not([type=checkbox]) { width: 100%; padding: 8px 10px; font: inherit; font-size: 14px; border: 1px solid var(--campo); border-radius: 7px; background: #fff; }
.tema-fila input:focus { outline: 2px solid #bcdcfc; border-color: var(--marca); }
.tema-fila .btn { padding: 7px 12px; font-size: 14px; }
.tema-cab { font-size: 12px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.tema-act { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.tema-act input { width: 18px; height: 18px; accent-color: var(--marca); }
.tema-fila.inactivo input:not([type=checkbox]) { color: var(--gris); background: #f5f7fa; }
@media (max-width: 640px) { .tema-fila { grid-template-columns: 1fr 1fr; } .tema-cab { display: none; } }

/* v16 · Muro de oración */
.bloque-codigo { display: block; white-space: pre-wrap; margin-top: 4px; padding: 8px 10px; font-size: 12px; }
.chip.muro-chip { background: var(--verde-suave); color: var(--verde-texto); }
.chip.sinpermiso-chip { background: #f0f2f6; color: var(--gris); }
.chip.pastoral-chip { background: var(--aviso-bg); color: var(--aviso-tx); border: 1px solid #e8c26a; }
.fila-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.btn-mini { font: inherit; font-size: 13px; font-weight: 700; font-family: var(--titulos); color: var(--marca-hondo); background: #fff; border: 1px solid var(--campo); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.btn-mini:hover { border-color: var(--marca); background: var(--cielo-suave); }
.btn-mini.on { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-mini.pastoral { color: var(--aviso-tx); border-color: #e8c26a; }
.btn-mini.pastoral.on { background: var(--aviso-tx); border-color: var(--aviso-tx); color: #fff; }
.pestanas a.pastoral-tab b { background: var(--aviso-bg); color: var(--aviso-tx); }
.form label.permiso-muro, .permiso-muro { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px dashed var(--marca); border-radius: 10px; background: var(--cielo-suave); font-weight: 500 !important; }
.permiso-muro input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--marca); }
.permiso-muro small { display: block; color: var(--gris); font-weight: 400; }
.btn-mini.suave { color: var(--gris); border-color: var(--linea); font-weight: 600; }
.btn-mini.suave:hover { color: var(--aviso-tx); border-color: #e8c26a; background: var(--aviso-bg); }

/* v16.2 · Enlaces */
.enl-tarjeta { margin-bottom: 16px; }
.enl-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; }
.enl-cab h2 { margin: 0; }
.enl-sub { font-family: var(--titulos); font-size: 14px; color: var(--marca-hondo); margin: 16px 0 6px; }
.enl-fila { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linea); }
.enl-tit { font-size: 13px; font-weight: 700; color: var(--tinta); }
.enl-url { min-width: 0; overflow-wrap: anywhere; }
.enl-btns { display: flex; gap: 6px; }
.enl-btns a.btn-mini { text-decoration: none; display: inline-block; }
.enl-bloque { align-items: start; }
@media (max-width: 640px) { .enl-fila { grid-template-columns: 1fr; gap: 4px; } }