/* =====================================================
   Panel de administración: estilo portal
   (barra superior + menú con iconos + página de inicio)
   Usa los colores del sitio definidos en styles.css
   ===================================================== */
.admin { background: #eef1f6; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ico--sm { width: 16px; height: 16px; }

/* ---------- Barra superior ---------- */
.admin__barra { background: linear-gradient(90deg, var(--navy-deep), var(--navy)); position: sticky; top: 0; z-index: 40; box-shadow: 0 2px 12px rgba(17,28,48,.25); }
.admin__barra-inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.usuario-chip { position: relative; }
.usuario-chip__boton {
  display: flex; align-items: center; gap: .75rem; font: inherit; color: #fff; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: .45rem .8rem .45rem .5rem;
  transition: background .2s, border-color .2s;
}
.usuario-chip__boton:hover, .usuario-chip.is-abierto .usuario-chip__boton { background: rgba(255,255,255,.12); border-color: var(--gold-soft); }
.usuario-chip__avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold), #e3c27a); color: var(--navy-deep); font-weight: 700; font-size: 1rem;
}
.usuario-chip__texto { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; text-align: left; }
.usuario-chip__texto strong { font-size: .9rem; }
.usuario-chip__texto small { font-size: .74rem; color: var(--gold-soft); }
.usuario-chip__flecha { opacity: .75; transition: transform .2s; }
.usuario-chip.is-abierto .usuario-chip__flecha { transform: rotate(180deg); }
.usuario-chip__menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: .4rem; z-index: 50;
  background: var(--paper); border-radius: 12px; box-shadow: 0 18px 40px rgba(17,28,48,.25);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s;
}
.usuario-chip.is-abierto .usuario-chip__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .18s; }
.usuario-chip__menu button, .usuario-chip__menu a {
  display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem .75rem; border: 0; border-radius: 8px;
  background: transparent; font: inherit; font-size: .92rem; color: var(--text); text-decoration: none; cursor: pointer; text-align: left;
}
.usuario-chip__menu button:hover, .usuario-chip__menu a:hover { background: #f1f3f8; }
.usuario-chip__menu .ico { width: 18px; height: 18px; color: var(--navy); }
.usuario-chip__menu .peligro { color: #b3261e; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: .3rem; }
.usuario-chip__menu .peligro .ico { color: #b3261e; }

/* ---------- Menú de módulos con iconos ---------- */
.admin-nav { background: var(--paper); border-bottom: 1px solid #e3e7ef; box-shadow: 0 2px 10px rgba(17,28,48,.05); position: sticky; top: 76px; z-index: 30; }
.admin-nav__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; gap: 1rem; }
.admin-nav__grupo { display: flex; gap: .3rem; }
.admin-nav__grupo--fin { border-left: 1px solid #e3e7ef; padding-left: 1rem; }
.admin-nav__item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; min-width: 96px;
  padding: .9rem .6rem .85rem; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 500; color: var(--muted); transition: color .2s;
}
.admin-nav__icono {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #eef1f7; color: var(--navy); transition: background .2s, color .2s, transform .2s;
}
.admin-nav__item:hover { color: var(--navy); }
.admin-nav__item:hover .admin-nav__icono { transform: translateY(-1px); background: #e3e8f2; }
.admin-nav__item.is-activa { color: var(--navy); font-weight: 600; }
.admin-nav__item.is-activa .admin-nav__icono { background: var(--navy); color: var(--gold-soft); }
.admin-nav__item.is-activa::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.admin-nav__item:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; border-radius: 10px; }
.admin-nav__item[data-accion="salir"]:hover .admin-nav__icono { background: #fbe9e8; color: #b3261e; }

/* ---------- Contenido ---------- */
.admin__main { max-width: 1180px; padding: 28px 0 64px; display: block; }
.pestana__panel:not([data-panel="inicio"]) { max-width: 900px; margin: 0 auto; }

/* ---------- Página de inicio ---------- */
.bienvenida {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.6rem;
  padding: 2.2rem 2.6rem; border-radius: 20px; color: #cfd6e4;
  background: radial-gradient(circle at 95% 0%, rgba(201,161,74,.22), transparent 38%), linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #2c4166);
  box-shadow: 0 16px 40px rgba(17,28,48,.22);
}
.bienvenida__logo { width: 84px; height: auto; padding: .7rem; border-radius: 18px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); }
.bienvenida__eyebrow { font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: .4rem; }
.bienvenida h1 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: .3rem; }
.bienvenida__texto { margin: 0; max-width: 620px; }

.resumen-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.6rem 0 2.4rem; }
.cifra { display: flex; align-items: center; gap: 1rem; background: var(--paper); border: 1px solid #e3e7ef; border-radius: 16px; padding: 1.1rem 1.2rem; box-shadow: 0 6px 18px rgba(17,28,48,.05); }
.cifra__icono { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #fbf4e3; color: #9a7521; flex-shrink: 0; }
.cifra strong { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--navy); font-variant-numeric: lining-nums; }
.cifra span { font-size: .82rem; color: var(--muted); }

.seccion-titulo { display: flex; align-items: center; gap: 1rem; font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--navy); margin: 0 0 1rem; }
.seccion-titulo::after { content: ""; flex: 1; height: 1px; background: #dde2eb; }
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); gap: 1rem; }
.acceso {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.1rem 1.1rem 1.15rem; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid #e3e7ef; border-radius: 16px; box-shadow: 0 6px 18px rgba(17,28,48,.05);
  font: inherit; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.acceso:hover { transform: translateY(-2px); border-color: var(--gold-soft); box-shadow: 0 12px 28px rgba(17,28,48,.1); }
.acceso:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.acceso__icono { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: #eef1f7; color: var(--navy); flex-shrink: 0; transition: background .2s, color .2s; }
.acceso:hover .acceso__icono { background: var(--navy); color: var(--gold-soft); }
.acceso__texto { flex: 1; min-width: 0; }
.acceso__texto strong { display: block; color: var(--navy); font-size: .98rem; margin-bottom: .15rem; }
.acceso__texto small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.acceso__flecha { color: #9aa3b5; transition: transform .2s, color .2s; }
.acceso:hover .acceso__flecha { transform: translateX(3px); color: var(--gold); }
.acceso[data-accion="salir"]:hover .acceso__icono { background: #fbe9e8; color: #b3261e; }

/* ---------- Inicio de sesión ---------- */
.admin--login .admin__main { min-height: calc(100vh - 76px); display: grid; place-items: center; padding: 32px 16px; }
.panel--login { margin: 0 auto; border: 1px solid #e3e7ef; box-shadow: 0 20px 50px rgba(17,28,48,.12); }
.login__marca { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.login__marca img { width: 54px; height: auto; padding: .45rem; border-radius: 14px; background: var(--navy); }
.login__marca small { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.login__marca strong { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); }
.btn--ancho { width: 100%; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .acceso, .acceso__flecha, .admin-nav__icono, .usuario-chip__menu, .usuario-chip__flecha { transition: none; }
}
@media (max-width: 980px) {
  .admin-nav__inner { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .admin-nav__inner::-webkit-scrollbar { display: none; }
  .admin-nav__item { min-width: 84px; }
}
@media (max-width: 640px) {
  .admin__barra-inner { padding: 0 14px; min-height: 64px; }
  .admin-nav { top: 64px; }
  .usuario-chip__texto { display: none; }
  .usuario-chip__boton { padding: .35rem .5rem .35rem .35rem; gap: .4rem; }
  .admin-nav__inner { padding: 0 6px; }
  .admin-nav__item { min-width: 72px; font-size: .74rem; padding: .7rem .3rem; }
  .admin-nav__icono { width: 38px; height: 38px; }
  .admin-nav__grupo--fin { padding-left: .4rem; }
  .bienvenida { flex-direction: column; align-items: flex-start; padding: 1.6rem; gap: 1rem; }
  .bienvenida__logo { width: 64px; }
  .resumen-cifras { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .cifra { flex-direction: column; align-items: flex-start; gap: .6rem; padding: 1rem; }
  .admin__main { padding: 18px 0 48px; }
}

/* =====================================================
   Componentes de los módulos (formularios estilo portal)
   ===================================================== */
.pestana__panel:not([data-panel="inicio"]) { max-width: 1180px; display: grid; gap: 20px; }

/* Encabezado del módulo: antetítulo, título, subtítulo y sello a la derecha */
.modulo-cabeza {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  background: var(--paper); border: 1px solid #e3e7ef; border-radius: 16px 16px 0 0; border-bottom: 0;
  padding: 1.6rem 2rem 1.3rem; margin-bottom: -20px;
}
.modulo-cabeza__eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0 0 .35rem; }
.modulo-cabeza h1 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin: 0 0 .2rem; }
.modulo-cabeza p:last-child { margin: 0; color: var(--muted); font-size: .95rem; }
.sello {
  flex-shrink: 0; align-self: center; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); background: #f4f1e8; border-left: 3px solid var(--gold); padding: .55rem 1rem; border-radius: 0 8px 8px 0;
}

/* Hoja blanca que contiene la barra de acciones y el formulario */
.hoja { background: var(--paper); border: 1px solid #e3e7ef; border-radius: 0 0 16px 16px; padding: 1.2rem 2rem 1.8rem; box-shadow: 0 8px 24px rgba(17,28,48,.05); }
.modulo-cabeza + .hoja { border-top: 1px solid #e3e7ef; }
.hoja + .hoja { border-radius: 16px; }

/* Barra de acciones con botones tipo píldora */
.barra-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding-bottom: 1.1rem; margin-bottom: 1.4rem; border-bottom: 1px solid #e8ebf1; }
.barra-acciones__estado { margin-left: auto; font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--navy); }
.pill {
  display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  color: var(--navy); background: var(--paper); border: 1px solid #d9dee8; border-radius: 999px; padding: .55rem 1.1rem;
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s; text-decoration: none;
}
.pill:hover { border-color: var(--navy); box-shadow: 0 4px 12px rgba(17,28,48,.08); }
.pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pill .ico { width: 19px; height: 19px; }
.pill--primario .ico { color: var(--navy); }
.pill--primario { border-color: var(--navy); }
.pill--primario:hover { background: var(--navy); color: #fff; }
.pill--primario:hover .ico { color: var(--gold-soft); }
.pill--peligro { color: #b3261e; }
.pill--peligro .ico { color: #b3261e; }
.pill--peligro:hover { border-color: #b3261e; background: #fdf1f0; }
.pill--chico { font-size: .82rem; padding: .38rem .8rem; gap: .35rem; }
.pill:disabled { opacity: .55; cursor: wait; }

/* Formulario con pasos a la izquierda */
.con-pasos { display: grid; grid-template-columns: 210px 1fr; gap: 1.6rem; align-items: start; }
.pasos { position: sticky; top: 190px; display: grid; gap: .4rem; border-right: 1px solid #e8ebf1; padding-right: 1rem; }
.paso { display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: .93rem; border: 1px solid transparent; }
.paso small { display: block; font-size: .72rem; font-weight: 400; color: #9aa3b5; }
.paso__num { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: #eef1f7; color: var(--navy); font-size: .8rem; font-weight: 700; }
.paso:hover { background: #f6f7fa; color: var(--navy); }
.paso.is-activo { background: var(--paper); border-color: #e3e7ef; box-shadow: 0 4px 14px rgba(17,28,48,.07); color: var(--navy); font-weight: 600; }
.paso.is-activo .paso__num { background: var(--navy); color: var(--gold-soft); }

/* Franja superior (campos en línea + ficha de resumen) */
.franja { display: grid; grid-template-columns: auto auto minmax(220px, 1fr); align-items: center; gap: 1rem 1.6rem; background: #f8f9fb; border: 1px solid #e8ebf1; border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.franja__campo { display: flex; align-items: center; gap: .6rem; font-size: .82rem; font-weight: 600; color: var(--muted); }
.franja__campo select, .franja__campo input { font: inherit; font-size: .95rem; font-weight: 500; color: var(--text); background: var(--paper); border: 1px solid #cfd6e2; border-radius: 8px; padding: .55rem .8rem; }
.ficha-info { justify-self: end; display: grid; gap: .15rem; background: var(--paper); border: 1px solid #e3e7ef; border-radius: 10px; padding: .6rem .9rem; font-size: .8rem; color: var(--muted); box-shadow: 0 3px 10px rgba(17,28,48,.05); max-width: 340px; }
.ficha-info strong { color: var(--navy); }

/* Secciones con título en mayúsculas y línea de acento */
.form-moderno { display: grid; gap: 1.2rem; }
.secciones-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.secciones-dos--angosta { grid-template-columns: 1fr 1.3fr; }
.seccion, .seccion.ingles { margin: 0; padding: 0; border: 0; background: transparent; min-width: 0; }
.seccion__titulo {
  display: flex; align-items: center; gap: .55rem; padding: 0; margin: 0 0 .7rem;
  font-family: var(--sans); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
}
.seccion__titulo::before { content: ""; width: 3px; height: 1.05em; border-radius: 2px; background: var(--gold); }
.seccion__titulo small { font-size: .7rem; letter-spacing: .04em; text-transform: none; color: var(--muted); font-weight: 500; }
.seccion__titulo--suelto { font-size: .82rem; margin-bottom: 1rem; }
.seccion__cuerpo { display: grid; gap: 1.1rem; background: var(--paper); border: 1px solid #e3e7ef; border-radius: 12px; padding: 1.4rem 1.2rem 1.2rem; }
.seccion.ingles .seccion__cuerpo { background: #fbfaf6; }

/* Campo con la etiqueta sobre el borde */
.campo { position: relative; display: block; margin: 0; }
.campo__etiqueta {
  position: absolute; top: 0; left: .7rem; transform: translateY(-50%); z-index: 1; padding: 0 .35rem;
  background: var(--paper); font-size: .72rem; font-weight: 600; color: var(--muted); line-height: 1.2; pointer-events: none; transition: color .2s;
}
.seccion.ingles .campo__etiqueta { background: #fbfaf6; }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%; font: inherit; font-size: .97rem; color: var(--text); background: transparent;
  border: 1px solid #cfd6e2; border-radius: 8px; padding: .85rem .9rem .7rem; transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 90px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,69,.1); }
.campo:focus-within .campo__etiqueta { color: var(--navy); }
.campo input:disabled { background: #f3f4f7; color: var(--muted); }
.campos-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* Interruptor de dos opciones (como Read / Write) */
.campo-linea { display: flex; align-items: center; gap: .9rem; }
.campo-linea__etiqueta { font-size: .82rem; font-weight: 600; color: var(--muted); }
.segmentado { position: relative; display: inline-flex; padding: 3px; border-radius: 10px; background: #eef1f7; border: 1px solid #e3e7ef; cursor: pointer; }
.segmentado input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmentado span { padding: .45rem 1.1rem; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--muted); transition: background .2s, color .2s; }
.segmentado input:checked ~ .segmentado__on { background: var(--navy); color: #fff; box-shadow: 0 2px 8px rgba(17,28,48,.2); }
.segmentado input:not(:checked) ~ .segmentado__off { background: #b3261e; color: #fff; }
.segmentado:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Zona para subir fotos con botón de nube */
.zona-fotos { border: 1.5px dashed #cfd6e2; border-radius: 12px; background: #f8f9fb; margin: 0; }
.zona-fotos.is-encima { background: #f4f1e8; border-color: var(--gold); }
.zona-fotos__label { display: flex !important; align-items: center; gap: 1rem; text-align: left; padding: 1.1rem 1.2rem; }
.zona-fotos__label strong { display: block; color: var(--navy); }
.zona-fotos__label > span:last-child > span { font-size: .84rem; color: var(--muted); }
.boton-icono { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--navy); color: var(--gold-soft); box-shadow: 0 6px 14px rgba(17,28,48,.25); transition: transform .2s; }
.zona-fotos:hover .boton-icono { transform: translateY(-2px); }
.miniaturas { margin-bottom: 0; }

/* Listas de registros */
.hoja .lista-admin__item { padding: .95rem .2rem; border-bottom-color: #eef0f4; }
.hoja .lista-admin__item:last-child { border-bottom: 0; }
.lista-admin__botones { gap: .5rem; }
.form-moderno .aviso { margin: 0; min-height: 0; }
.form-moderno .aviso:empty { display: none; }
.hoja .cuenta { grid-template-columns: 1fr; margin: 0; }

@media (max-width: 980px) {
  .con-pasos { grid-template-columns: 1fr; }
  .pasos { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e8ebf1; padding: 0 0 .6rem; }
  .secciones-dos, .secciones-dos--angosta { grid-template-columns: 1fr; }
  .franja { grid-template-columns: 1fr; }
  .ficha-info { justify-self: stretch; max-width: none; }
}
@media (max-width: 640px) {
  .modulo-cabeza { flex-direction: column; align-items: flex-start; padding: 1.2rem 1.1rem 1rem; }
  .sello { align-self: flex-start; }
  .hoja { padding: 1rem 1.1rem 1.4rem; }
  .barra-acciones__estado { width: 100%; margin-left: 0; order: -1; font-size: 1.2rem; }
  .campos-fila { grid-template-columns: 1fr; }
  .franja__campo { width: 100%; justify-content: space-between; }
  .lista-admin__botones .pill__texto { display: none; }
}

/* =====================================================
   Compras: solicitudes de compra financiera
   ===================================================== */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  padding: .45rem .95rem; border-radius: 999px; border: 1px solid #d9dee8; background: var(--paper); color: var(--muted);
}
.chip:hover { border-color: var(--navy); color: var(--navy); }
.chip.is-activo { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip__n { min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 999px; display: inline-grid; place-items: center; font-size: .74rem; background: var(--gold); color: var(--navy-deep); }

.tabla-envoltura { overflow-x: auto; border: 1px solid #e3e7ef; border-radius: 12px; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: #f8f9fb; padding: .75rem .9rem; border-bottom: 1px solid #e3e7ef; white-space: nowrap; }
.tabla td { padding: .8rem .9rem; border-bottom: 1px solid #eef0f4; vertical-align: middle; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr[data-abrir] { cursor: pointer; transition: background .15s; }
.tabla tbody tr[data-abrir]:hover, .tabla tbody tr[data-abrir]:focus-visible { background: #f6f7fa; outline: none; }
.tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla__num { color: var(--muted); font-weight: 600; }
.tabla__desc strong { display: block; color: var(--navy); font-weight: 600; }
.tabla__desc small { color: var(--muted); font-size: .8rem; }
.tabla__accion { text-align: right; }
.tabla__vacia { text-align: center; color: var(--muted); padding: 2rem !important; }

.estado { display: inline-block; white-space: nowrap; font-size: .76rem; font-weight: 700; padding: .3em .75em; border-radius: 999px; border: 1px solid transparent; }
.estado--pendiente { background: #fff6e0; color: #8a5a00; border-color: #f1d999; }
.estado--autorizada { background: #e8eefb; color: #1f3d7a; border-color: #c4d2f0; }
.estado--aprobada { background: #e6f4f1; color: #13584c; border-color: #b5ddd4; }
.estado--pagada { background: #e3f3e6; color: #1d6b32; border-color: #b6dcbf; }
.estado--rechazada { background: #fdecea; color: #a1221a; border-color: #f2c2bd; }
.estado--cancelada { background: #eef0f4; color: var(--muted); border-color: #dde1e8; }

/* Formulario */
.opciones-pago { display: flex; flex-wrap: wrap; gap: .6rem; }
.opcion { position: relative; cursor: pointer; margin: 0 !important; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border: 1px solid #cfd6e2; border-radius: 10px; font-weight: 600; font-size: .92rem; color: var(--muted); background: var(--paper); }
.opcion span::before { content: ""; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #9aa3b5; display: inline-block; }
.opcion input:checked + span { border-color: var(--navy); color: var(--navy); background: #f4f6fb; box-shadow: 0 0 0 3px rgba(27,42,69,.08); }
.opcion input:checked + span::before { background: var(--navy); border-color: var(--navy); box-shadow: inset 0 0 0 3px #fff; }
.opcion input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.avisos:empty { display: none; }
.aviso-regla { margin: .4rem 0 0; padding: .6rem .9rem; border-left: 3px solid var(--gold); background: #fbf6e8; border-radius: 0 8px 8px 0; font-size: .88rem; color: #6b5317; }
.form-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.aviso--ok { color: #1d6b32; background: #e3f3e6; border-radius: 10px; padding: .7rem 1rem; margin: 0 0 1rem; }

/* Detalle */
.detalle-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.detalle-cabeza__nota { font-size: .85rem; color: var(--muted); align-self: center; }
.progreso-pasos { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); counter-reset: none; }
.progreso-pasos li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; font-size: .82rem; font-weight: 600; color: var(--muted); }
.progreso-pasos li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: #dde2eb; z-index: 0; }
.progreso-pasos li:first-child::before { display: none; }
.progreso-pasos li.is-hecho::before, .progreso-pasos li.is-actual::before { background: var(--navy); }
.progreso-pasos__punto { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #eef1f7; border: 2px solid #dde2eb; color: var(--muted); font-size: .85rem; }
.progreso-pasos li.is-hecho { color: var(--navy); }
.progreso-pasos li.is-hecho .progreso-pasos__punto { background: var(--navy); border-color: var(--navy); color: var(--gold-soft); }
.progreso-pasos li.is-actual .progreso-pasos__punto { border-color: var(--gold); background: #fff; color: var(--navy); box-shadow: 0 0 0 4px rgba(201,161,74,.2); }
.progreso-pasos li.is-actual { color: var(--navy); }
.progreso-pasos--detenido li .progreso-pasos__punto { opacity: .5; }

.detalle-cuerpo { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.detalle-lateral { display: grid; gap: 1.2rem; min-width: 0; }

/* Vista en pantalla del formulario (parecida al papel) */
.formato { border: 1px solid #d9dee8; border-radius: 12px; padding: 1.4rem 1.5rem; background: #fff; box-shadow: 0 8px 20px rgba(17,28,48,.05); }
.formato__titulo { text-align: center; border-bottom: 2px solid var(--navy); padding-bottom: .7rem; margin-bottom: 1rem; }
.formato__titulo strong { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--navy); letter-spacing: .03em; }
.formato__titulo span { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.formato__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dato { padding: .45rem 0 .5rem; border-bottom: 1px solid #e8ebf1; }
.dato--ancho { grid-column: 1 / -1; }
.dato__etq { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.dato__val { color: var(--text); font-size: .95rem; overflow-wrap: anywhere; }
.dato__vacio { color: #b6bdca; }
.condiciones { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; }
.casilla-form { width: 16px; height: 16px; border: 1.5px solid #5f6674; border-radius: 3px; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; color: var(--navy); }
.casilla-form.is-marcada { border-color: var(--navy); background: #eef1f7; }
.formato__finanzas { margin-top: 1.1rem; border: 1.5px solid var(--navy); border-radius: 10px; padding: .4rem 1rem .8rem; background: #fafbfd; }
.formato__subtitulo { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); margin: .5rem 0 .3rem; }
.formato__rechazo { margin: 1rem 0 0; padding: .7rem 1rem; border-radius: 10px; background: #fdecea; color: #a1221a; font-size: .9rem; }

.accion-caja { border: 1px solid #e3e7ef; border-left: 4px solid var(--gold); border-radius: 12px; padding: 1.1rem 1.2rem; background: #fffdf7; display: grid; gap: 1rem; }
.accion-caja h3 { font-size: 1.25rem; margin: 0; }
.accion-caja p { margin: 0; color: var(--muted); font-size: .9rem; }
.accion-caja .campo__etiqueta { background: #fffdf7; }
.accion-caja--info { border-left-color: #9aa3b5; background: #f6f7fa; }

.adjuntos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.adjuntos li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .55rem .7rem; border: 1px solid #eef0f4; border-radius: 8px; }
.adjuntos__texto { display: grid; gap: .15rem; min-width: 0; }
.adjuntos li .ico { color: var(--navy); width: 18px; height: 18px; }
.adjuntos__abrir { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--navy); text-decoration: underline; cursor: pointer; text-align: left; overflow-wrap: anywhere; line-height: 1.35; }
.adjuntos small { color: var(--muted); font-size: .76rem; }
.subir-archivo { display: flex !important; align-items: center; gap: .8rem; padding: .7rem .8rem; border: 1.5px dashed #cfd6e2; border-radius: 10px; cursor: pointer; font-weight: 600; color: var(--navy); margin: 0; }
.subir-archivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subir-archivo small { color: var(--muted); font-weight: 400; }
.subir-archivo .boton-icono { width: 40px; height: 40px; }
.subir-archivo:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }

.historial { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid #e3e7ef; display: grid; gap: .8rem; }
.historial li { position: relative; display: grid; gap: .1rem; font-size: .88rem; }
.historial li::before { content: ""; position: absolute; left: calc(-1rem - 6px); top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; }
.historial strong { color: var(--navy); }
.historial span { color: var(--muted); font-size: .78rem; }
.historial em { color: var(--text); font-size: .84rem; }

/* Catálogos */
.agregar-linea { display: grid; grid-template-columns: 1fr auto; gap: .7rem; align-items: center; }
.agregar-linea--doble { grid-template-columns: 110px 1fr auto; }
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lista-simple li { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .55rem .7rem; border: 1px solid #eef0f4; border-radius: 8px; }
.lista-simple li.is-inactivo { opacity: .6; }
.lista-simple code { font-size: .8rem; background: #f3f4f7; padding: .1em .4em; border-radius: 4px; color: var(--navy); }

@media (max-width: 980px) {
  .detalle-cuerpo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .progreso-pasos li { font-size: .7rem; }
  .formato { padding: 1rem; }
  .formato__fila { grid-template-columns: 1fr; gap: 0; }
  .agregar-linea, .agregar-linea--doble { grid-template-columns: 1fr; }
  .tabla th:nth-child(4), .tabla td:nth-child(4), .tabla th:nth-child(2), .tabla td:nth-child(2) { display: none; }
}

/* Los chips de filtro del panel no usan el estilo de categorías del sitio */
.chips .chip { text-transform: none; letter-spacing: normal; font-size: .86rem; }

/* =====================================================
   Menú de módulos: grupos con desplegable (Finanzas, Administración…)
   ===================================================== */
.admin-nav__grupo-menu { position: relative; display: flex; }
.admin-nav__etiqueta { display: inline-flex; align-items: center; gap: .2rem; }
.admin-nav__flecha { width: 13px; height: 13px; opacity: .7; transition: transform .2s; }
.admin-nav__grupo-menu.is-abierto .admin-nav__flecha { transform: rotate(180deg); }
.admin-nav__grupo-menu.is-activa > .admin-nav__item { color: var(--navy); font-weight: 600; }
.admin-nav__grupo-menu.is-activa > .admin-nav__item .admin-nav__icono { background: var(--navy); color: var(--gold-soft); }
.admin-nav__grupo-menu.is-activa > .admin-nav__item::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.admin-nav__grupo-menu.is-abierto > .admin-nav__item .admin-nav__icono { background: #e3e8f2; }

.admin-nav__desplegable {
  position: fixed; z-index: 60; padding: .45rem; display: grid; gap: .15rem;
  background: var(--paper); border: 1px solid #e3e7ef; border-radius: 14px; box-shadow: 0 18px 40px rgba(17,28,48,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .16s, transform .16s, visibility 0s .16s;
}
.admin-nav__grupo-menu.is-abierto .admin-nav__desplegable { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }
.admin-nav__desplegable::before {
  content: ""; position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px;
  background: var(--paper); border-left: 1px solid #e3e7ef; border-top: 1px solid #e3e7ef; transform: rotate(45deg);
}
.admin-nav__subitem {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; cursor: pointer;
  padding: .6rem .65rem; border: 0; border-radius: 10px; background: transparent; font: inherit; color: var(--text);
}
.admin-nav__subitem .admin-nav__icono { width: 38px; height: 38px; flex-shrink: 0; }
.admin-nav__subitem strong { display: block; font-size: .92rem; color: var(--navy); }
.admin-nav__subitem small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.3; }
.admin-nav__subitem:hover, .admin-nav__subitem:focus-visible { background: #f3f5f9; outline: none; }
.admin-nav__subitem:hover .admin-nav__icono, .admin-nav__subitem:focus-visible .admin-nav__icono { background: var(--navy); color: var(--gold-soft); }
.admin-nav__subitem.is-activa { background: #f4f1e8; }
.admin-nav__subitem.is-activa .admin-nav__icono { background: var(--navy); color: var(--gold-soft); }
.admin-nav__subitem.is-activa strong::after { content: " ✓"; color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .admin-nav__desplegable, .admin-nav__flecha { transition: none; }
}

/* Contraseña temporal */
.aviso-temporal { margin: 0 0 1.2rem; padding: .9rem 1.1rem; border-radius: 12px; background: #fff6e0; border: 1px solid #f1d999; color: #6b4a00; }
.etiqueta--aviso { background: #fff6e0; color: #8a5a00; border: 1px solid #f1d999; }

/* Firma digital */
.seccion--firma { margin-top: 1.2rem; }
.firma-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
.firma-actual, .firma-nueva { display: grid; gap: .6rem; align-content: start; justify-items: start; }
.firma-actual__marco { width: 100%; min-height: 120px; display: grid; place-items: center; border: 1px solid #e3e7ef; border-radius: 10px; background: #fff; padding: .6rem; }
.firma-actual__marco img { max-width: 100%; max-height: 110px; }
.firma-vacia { color: var(--muted); font-size: .92rem; text-align: center; }
.firma-lienzo { position: relative; width: 100%; height: 180px; border: 1.5px dashed #cfd6e2; border-radius: 10px; background: #fff; }
.firma-lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; z-index: 1; }
.firma-lienzo__linea { position: absolute; left: 6%; right: 6%; bottom: 38px; border-top: 1px solid #b9c2d0; font-size: .72rem; color: var(--muted); padding-top: 2px; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.firma-nueva .form-botones label.pill { cursor: pointer; }
.firma-nota-accion { font-size: .85rem; color: var(--muted); margin: 0; display: flex; gap: .4rem; align-items: center; }
.firma-nota-accion img { max-height: 34px; max-width: 120px; background: #fff; border: 1px solid #e3e7ef; border-radius: 6px; padding: 2px 4px; }
@media (max-width: 760px) { .firma-cuerpo { grid-template-columns: 1fr; } }

/* Administración de una solicitud */
.accion-caja--admin { border-style: dashed; }
.accion-caja--admin h3 { display: flex; align-items: center; gap: .4rem; }

/* Emular usuario */
.banda-emulacion { background: #fff3d6; border-bottom: 2px solid var(--gold); color: #5a3d00; }
.banda-emulacion__inner { display: flex; align-items: center; gap: .8rem; padding-top: .6rem; padding-bottom: .6rem; flex-wrap: wrap; }
.banda-emulacion__inner > .ico { width: 22px; height: 22px; color: #8a5a00; flex: none; }
.banda-emulacion p { margin: 0; flex: 1 1 280px; font-size: .95rem; }
.usuario-chip--emulando .usuario-chip__boton { box-shadow: 0 0 0 2px var(--gold); }
.dialogo { border: 0; border-radius: 16px; padding: 0; width: min(480px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(17,28,48,.35); }
.dialogo::backdrop { background: rgba(17,28,48,.45); }
.dialogo__cuerpo { display: grid; gap: 1rem; padding: 1.6rem 1.5rem 1.3rem; }
.dialogo h2 { margin: 0; font-family: var(--serif); color: var(--navy); font-size: 1.6rem; }
.dialogo .form-botones { justify-content: flex-end; }

/* Servicios: órdenes de servicio */
.os-form { display: grid; gap: 1.2rem; }
.os-secciones { display: grid; gap: 1rem; }
.os-seccion { border: 1px solid #e3e7ef; border-left: 4px solid var(--gold); border-radius: 12px; padding: 1rem 1rem .9rem; background: #fff; display: grid; gap: .7rem; justify-items: start; }
.os-seccion__cabeza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: .8rem; align-items: end; width: 100%; }
.os-seccion__mover { display: flex; gap: .3rem; padding-bottom: .35rem; }
.os-puntos { display: grid; gap: .45rem; width: 100%; }
.os-punto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; padding-left: .4rem; }
.os-punto__vineta { color: var(--gold); font-size: 1.3rem; line-height: 1; }
.os-punto input, .os-tarea input { width: 100%; padding: .55rem .75rem; border: 1px solid #d5dbe5; border-radius: 9px; font: inherit; background: #fff; }
.os-punto input:focus, .os-tarea input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.os-equipo { display: grid; gap: .5rem; }
.os-tarea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: .5rem; align-items: center; }
.os-boton { width: 34px; height: 34px; border-radius: 9px; border: 1px solid #dfe4ec; background: #f5f7fb; color: var(--navy); display: grid; place-items: center; cursor: pointer; flex: none; }
.os-boton:hover { background: #e9edf5; }
.os-boton--peligro { color: #b42318; }
.os-acciones { white-space: nowrap; }
.os-acciones .pill + .pill { margin-left: .35rem; }
.os-detalle { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.os-detalle__botones { display: grid; gap: .55rem; justify-items: start; }
.reporte-orden { background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; padding: 2rem 2.2rem; font-family: Lora, Georgia, serif; font-size: 1.08rem; line-height: 1.5; color: #111; box-shadow: 0 6px 20px rgba(17,28,48,.06); }
.reporte-orden .ro-cabeza { margin-bottom: 1.3rem; }
.reporte-orden h2 { font-family: Lora, Georgia, serif; font-size: 1.3rem; margin: 0; color: #111; }
.reporte-orden .ro-cabeza p { font-weight: 700; font-size: 1.2rem; margin: .1rem 0 0; }
.reporte-orden .ro-seccion { margin-bottom: 1rem; }
.reporte-orden p { margin: 0; }
.reporte-orden ul { margin: .15rem 0 0; padding-left: 2.2rem; }
.reporte-orden .ro-equipo { margin-top: 1.3rem; }
@media (max-width: 760px) {
  .os-seccion__cabeza { grid-template-columns: 1fr; }
  .os-seccion__mover { padding-bottom: 0; }
  .os-detalle { grid-template-columns: 1fr; }
  .reporte-orden { padding: 1.4rem 1.2rem; }
}
#osAgregarSeccion, #osAgregarEquipo { justify-self: start; }

/* Servicios: directorio de la iglesia */
.etiqueta--ok { background: #e3f3e6; color: #1d6b32; }
.dir-filtros { display: grid; gap: .8rem; margin-bottom: 1rem; }
.dir-buscar { max-width: 460px; }
.dir-tel { color: var(--navy); font-weight: 600; text-decoration: none; white-space: nowrap; }
.dir-tel:hover { text-decoration: underline; }
.dir-falta { color: #b8bfcc; }
.dir-inactivo td { opacity: .6; }
.dir-form { display: grid; gap: 1.2rem; }
.dir-ciudad { grid-template-columns: 1.6fr .7fr 1fr; }
.dir-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dir-casilla { display: flex; align-items: center; gap: .55rem; font-weight: 500; color: var(--navy); cursor: pointer; }
.dir-casilla input { width: 18px; height: 18px; accent-color: var(--navy); }
@media (max-width: 760px) { .dir-ciudad, .dir-tres { grid-template-columns: 1fr; } }

/* Finanzas: conteo de ofrendas */
.cnt-form { display: grid; gap: 1.2rem; }
.cnt-cabeza { grid-template-columns: .8fr repeat(3, 1fr); }
.cnt-tres { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
.seccion__titulo small { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: .3rem; }
.cnt-tabla { width: 100%; border-collapse: collapse; }
.cnt-tabla th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; padding: 0 .4rem .4rem; font-weight: 600; }
.cnt-tabla td { padding: .25rem .4rem; border-top: 1px solid #eef0f4; }
.cnt-tabla tfoot th { border-top: 2px solid #e3e7ef; padding-top: .55rem; color: var(--navy); font-size: .82rem; }
.cnt-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnt-tabla input { width: 100%; padding: .45rem .6rem; border: 1px solid #d5dbe5; border-radius: 8px; font: inherit; background: #fff; min-width: 70px; }
.cnt-tabla input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.cnt-tabla input.cnt-monto { text-align: right; font-variant-numeric: tabular-nums; }
.cnt-tabla input.cnt-concepto { font-size: .74rem; text-transform: none; font-weight: 600; color: var(--navy); padding: .35rem .5rem; }
.cnt-denom { font-weight: 700; color: var(--navy); width: 72px; }
.cnt-tabla--filas td:last-child, .cnt-tabla--filas th:last-child { width: 40px; }
.cnt-agregar { justify-self: start; }
.cnt-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.cnt-resumen__caja { border: 1px solid #e3e7ef; border-radius: 12px; padding: .9rem 1rem; background: #fbfaf6; }
.cnt-resumen__caja h3 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.cnt-resumen__caja table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cnt-resumen__caja td { padding: .22rem 0; border-bottom: 1px dashed #e3e7ef; }
.cnt-resumen__caja .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cnt-fuerte td { font-weight: 700; color: var(--navy); border-bottom: 0; border-top: 1px solid #cfd6e2; }
.cnt-negativo, .cnt-negativo td { color: #b42318 !important; }
.cnt-barra { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--navy); color: #fff; border-radius: 14px; padding: .8rem 1rem; box-shadow: 0 -6px 20px rgba(17,28,48,.15); }
.cnt-barra__cifras { display: flex; gap: 1.6rem; flex-wrap: wrap; font-size: .9rem; color: #d7deea; }
.cnt-barra__cifras strong { color: var(--gold-soft, #f1d999); font-size: 1.15rem; margin-left: .35rem; font-variant-numeric: tabular-nums; }
.cnt-barra .pill { background: #fff; }
.cnt-detalle-barra { display: grid; gap: .7rem; justify-items: start; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid #e3e7ef; border-left: 4px solid var(--gold); border-radius: 12px; background: #fffdf7; }
.cnt-detalle-barra p { margin: 0; color: var(--muted); }
.reporte-conteo { background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; padding: 1.4rem; font-size: .86rem; color: #111; overflow-x: auto; }
.reporte-conteo h2 { font-size: 1.15rem; margin: 0; font-family: var(--serif); color: var(--navy); }
.reporte-conteo h3 { font-size: .78rem; margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .04em; color: var(--navy); }
.reporte-conteo i { font-weight: normal; color: #667; font-size: .92em; }
.reporte-conteo table { width: 100%; border-collapse: collapse; }
.reporte-conteo th, .reporte-conteo td { border-bottom: 1px solid #e3e7ef; padding: .2rem .35rem; text-align: left; }
.reporte-conteo th { font-size: .7rem; text-transform: uppercase; color: var(--muted); }
.reporte-conteo .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.reporte-conteo tfoot th { border-top: 1px solid #cfd6e2; border-bottom: 0; color: var(--navy); }
.rc-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-bottom: 2px solid var(--navy); padding-bottom: .5rem; margin-bottom: .8rem; }
.rc-cabeza p { margin: .15rem 0 0; } .rc-fecha { text-align: right; } .rc-borrador { color: #b42318; }
.rc-fila { display: flex; gap: .8rem; } .rc-fila > .rc-bloque { flex: 1; min-width: 0; }
.rc-bloque { border: 1px solid #dfe4ec; border-radius: 8px; padding: .55rem .65rem; margin-bottom: .8rem; }
.rc-fuerte td { font-weight: 700; border-top: 1px solid #cfd6e2; } .rc-vacio { color: #99a; font-style: italic; }
.rc-iniciales { margin: .4rem 0 0; font-size: .74rem; color: #667; } .rc-notas { margin: 0 0 .8rem; }
.rc-firmas { display: flex; gap: 1.4rem; margin-top: 1.6rem; } .rc-firma { flex: 1; }
.rc-firma span { display: block; border-bottom: 1px solid #000; height: 28px; } .rc-firma small { display: block; margin-top: .2rem; }
.rc-pie { margin-top: .8rem; font-size: .76rem; color: #667; }
@media (max-width: 900px) {
  .cnt-cabeza, .cnt-tres, .cnt-resumen { grid-template-columns: 1fr; }
  .rc-fila { flex-direction: column; gap: 0; }
}
.cnt-tabla--filas td:first-child input[data-t="nombre"] { min-width: 130px; }
.cnt-tabla input.cnt-falta { border-color: #d92d20; background: #fff5f4; box-shadow: 0 0 0 2px rgba(217,45,32,.15); }
.cnt-tabla input.cnt-falta::placeholder { color: #d92d20; }
.oculto-vista { display: none !important; }

/* Finanzas: cartas de donativos */
.cartas-cabeza { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: end; justify-content: space-between; margin-bottom: .8rem; }
.cartas-anio { display: grid; gap: .35rem; }
.cartas-anio .campo__etiqueta { position: static; padding: 0; background: none; }
.cartas-cifras { display: flex; gap: .8rem; flex-wrap: wrap; }
.cartas-cifras div { background: #fbfaf6; border: 1px solid #e3e7ef; border-radius: 12px; padding: .55rem 1rem; display: grid; text-align: center; min-width: 120px; }
.cartas-cifras strong { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); line-height: 1.1; }
.cartas-cifras span { font-size: .78rem; color: var(--muted); }
.cartas-tabla td { vertical-align: top; }
.cartas-tabla textarea, .cartas-tabla select { width: 100%; min-width: 170px; padding: .45rem .6rem; border: 1px solid #d5dbe5; border-radius: 8px; font: inherit; font-size: .9rem; background: #fff; resize: vertical; }
.cartas-tabla select { margin-top: .3rem; }
.cartas-detalle { display: block; margin-top: .3rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.cartas-detalle .os-boton { width: 22px; height: 22px; display: inline-grid; vertical-align: middle; }
.cartas-excluida td { opacity: .45; }
.cartas-excluida td:first-child { opacity: 1; }
.cartas-config { margin: 1.2rem 0; border: 1px solid #e3e7ef; border-radius: 12px; background: #fff; }
.cartas-config summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; color: var(--navy); }
.cartas-config__form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; padding: 0 1rem 1rem; }
.cartas-config__ancho { grid-column: 1 / -1; }
.cartas-barra { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.4rem; justify-content: space-between; padding: 1rem; border-radius: 12px; background: #fbfaf6; border: 1px solid #e3e7ef; }
.cartas-fecha { min-width: 180px; }
@media (max-width: 760px) { .cartas-config__form { grid-template-columns: 1fr; } }

/* Conteo: filtro de la lista */
.cnt-filtros { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .8rem; align-items: end; margin-bottom: 1rem; }
#cntLimpiar { margin-bottom: .35rem; }
.cnt-dieron { display: block; margin-top: .15rem; }
@media (max-width: 760px) { .cnt-filtros { grid-template-columns: 1fr 1fr; } .cnt-buscar { grid-column: 1 / -1; } }

/* Alabanzas: cancionero de la banda */
.bc-buscar { max-width: 460px; margin-bottom: 1rem; }
.bc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; }
.bc-tarjeta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; text-align: left; padding: .75rem .9rem; border: 1px solid #e3e7ef; border-radius: 12px; background: #fff; cursor: pointer; font: inherit; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bc-tarjeta:hover, .bc-tarjeta:focus-visible { border-color: var(--gold); box-shadow: 0 6px 18px rgba(17,28,48,.08); transform: translateY(-1px); }
.bc-tarjeta__no { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--navy); color: var(--gold-soft, #f1d999); font-weight: 700; font-size: .9rem; }
.bc-tarjeta__txt { display: grid; min-width: 0; }
.bc-tarjeta__txt strong { color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-tarjeta__txt small, .bc-tarjeta__meta small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-tarjeta__meta { display: grid; justify-items: end; gap: .15rem; }
.bc-tono { font-size: .78rem; font-weight: 700; color: #8a5a00; background: #fff6e0; border: 1px solid #f1d999; border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }

.bc-herramientas { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid #e3e7ef; border-radius: 14px; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(17,28,48,.06); }
.bc-grupo { display: flex; align-items: center; gap: .35rem; }
.bc-grupo__titulo { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: .2rem; }
.bc-grupo--acciones { margin-left: auto; gap: .4rem; }
.bc-grupo--escenario { display: none; }
.bc-boton { min-width: 38px; height: 36px; padding: 0 .6rem; border-radius: 9px; border: 1px solid #d5dbe5; background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.bc-boton:hover { border-color: var(--gold); }
.bc-boton--texto { font-weight: 600; font-size: .85rem; }
.bc-boton.is-activo { background: var(--navy); color: #fff; border-color: var(--navy); }
#bcTono { height: 36px; border-radius: 9px; border: 1px solid #d5dbe5; padding: 0 .5rem; font: inherit; font-weight: 700; color: var(--navy); background: #fff; }
.bc-aviso-tono { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; padding: .7rem 1rem; margin-bottom: 1rem; border-radius: 12px; background: #fff6e0; border: 1px solid #f1d999; color: #6b4a00; font-size: .92rem; }

.bc-cancion { --bc-escala: 1; background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; padding: 1.4rem 1.6rem; }
.bc-cabeza { border-bottom: 2px solid var(--gold); padding-bottom: .8rem; margin-bottom: .6rem; }
.bc-no { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a5a00; }
.bc-cabeza h2 { margin: .1rem 0 0; font-family: var(--serif); font-size: calc(2rem * var(--bc-escala)); color: var(--navy); line-height: 1.1; }
.bc-artista { margin: .15rem 0 0; color: var(--muted); }
.bc-datos { display: flex; gap: 1.2rem; margin: .5rem 0 0; color: var(--muted); font-size: .9rem; }
.bc-datos b { color: var(--navy); font-size: 1.05rem; }
.bc-progresion, .bc-texto { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; }
.bc-progresion { margin: .5rem 0 0; font-size: calc(.95rem * var(--bc-escala)); font-weight: 700; color: #8a5a00; white-space: pre-wrap; }
.bc-notas { margin: .4rem 0 0; font-size: .88rem; color: var(--muted); font-style: italic; }
.bc-hoja { display: grid; }
.bc-seccion { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed #e3e7ef; }
.bc-seccion:last-child { border-bottom: 0; }
.bc-etiqueta { display: grid; align-content: start; gap: .2rem; padding-top: .1rem; }
.bc-etiqueta strong { color: var(--navy); font-size: .92rem; }
.bc-repite { justify-self: start; font-size: .74rem; font-weight: 700; color: #fff; background: var(--gold); border-radius: 999px; padding: .05rem .5rem; }
.bc-etiqueta em { font-size: .76rem; color: var(--muted); }
.bc-texto { margin: 0; font-size: calc(1rem * var(--bc-escala)); line-height: 1.35; color: #1b2233; white-space: pre; overflow-x: auto; }
.bc-acordes { color: #b07a10; font-weight: 700; }

/* Modo escenario (pantalla completa) */
.bc-escenario { background: #0d1424; color: #e8ecf3; overflow: auto; padding: 1rem 2rem 40vh; }
.bc-escenario .bc-herramientas { background: rgba(13,20,36,.94); border-color: #26324d; }
.bc-escenario .bc-grupo--acciones, .bc-escenario .bc-aviso-tono { display: none; }
.bc-escenario .bc-grupo--escenario { display: flex; margin-left: auto; }
.bc-escenario .bc-grupo__titulo { color: #8a96ad; }
.bc-escenario .bc-boton, .bc-escenario #bcTono { background: #18233b; color: #fff; border-color: #2d3b5c; }
.bc-escenario .bc-boton.is-activo { background: var(--gold); color: #0d1424; border-color: var(--gold); }
.bc-escenario .bc-cancion { background: transparent; border: 0; padding: 0; --bc-escala: 1.35; }
.bc-escenario .bc-cabeza h2, .bc-escenario .bc-etiqueta strong, .bc-escenario .bc-datos b { color: #fff; }
.bc-escenario .bc-texto { color: #e8ecf3; }
.bc-escenario .bc-acordes, .bc-escenario .bc-progresion { color: #f2c35b; }
.bc-escenario .bc-seccion { border-color: #26324d; }

/* Editor */
.bc-form { display: grid; gap: 1rem; }
.bc-form__datos { display: grid; grid-template-columns: 80px minmax(0, 2fr) minmax(0, 1.4fr) 90px 110px; gap: .8rem; }
.bc-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace !important; }
.bc-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.bc-editor__barra { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bc-editor__barra span { margin-right: auto; }
.bc-editor__texto { width: 100%; min-height: 560px; padding: .8rem; border: 1px solid #d5dbe5; border-radius: 10px; font-size: .9rem; line-height: 1.35; resize: vertical; white-space: pre; overflow: auto; tab-size: 4; }
.bc-editor__texto:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: transparent; }
.bc-editor__vista { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; border: 1px solid #e3e7ef; border-radius: 10px; padding: .6rem .8rem; background: #fff; }
.bc-editor__vista .bc-texto { font-size: .85rem; }
.bc-editor__vista .bc-seccion { grid-template-columns: 6rem minmax(0, 1fr); }
.bc-ayuda code { background: #f1f3f7; border-radius: 4px; padding: 0 .3rem; }
@media (max-width: 900px) {
  .bc-editor, .bc-form__datos { grid-template-columns: 1fr; }
  .bc-editor__vista { position: static; max-height: none; }
  .bc-seccion { grid-template-columns: 1fr; gap: .3rem; }
  .bc-etiqueta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
  .bc-grupo--acciones { margin-left: 0; }
  .bc-cancion { padding: 1rem; }
}
/* vista previa del editor: la sección arriba y la letra más chica, para que quepa sin barras */
.bc-editor__vista .bc-seccion { grid-template-columns: 1fr; gap: .2rem; }
.bc-editor__vista .bc-etiqueta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.bc-editor__vista .bc-texto { font-size: .74rem; }
/* Notas de melodía: otro color que los acordes */
.bc-melodia { color: #0e7c70; font-weight: 600; font-style: italic; }
.bc-etiqueta em .bc-melodia, .bc-notas .bc-melodia { font-weight: 700; }
.bc-leyenda { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; font-size: .78rem; }
.bc-leyenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-left: .4rem; }
.bc-leyenda__acorde { background: #b07a10; }
.bc-leyenda__nota { background: #0e7c70; }
.bc-escenario .bc-melodia { color: #6fe0cf; }
.bc-escenario .bc-leyenda__acorde { background: #f2c35b; }
.bc-escenario .bc-leyenda__nota { background: #6fe0cf; }

/* Cancionero: set de práctica */
.bc-set { margin-bottom: 1.4rem; padding: 1rem 1.1rem; border-radius: 14px; background: linear-gradient(135deg, #14213d, #1d2f55); color: #fff; box-shadow: 0 8px 22px rgba(17,28,48,.18); }
.bc-set__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin-bottom: .7rem; }
.bc-set__cabeza > .ico { width: 22px; height: 22px; color: var(--gold); }
#bcSetNombre { flex: 1 1 200px; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: #fff; font-family: var(--serif); font-size: 1.45rem; font-weight: 600; padding: .1rem .4rem; }
#bcSetNombre:hover, #bcSetNombre:focus { border-color: rgba(255,255,255,.3); outline: none; background: rgba(255,255,255,.06); }
.bc-set__cuenta { font-size: .8rem; color: #c6cfdf; }
.bc-set__acciones { display: flex; gap: .4rem; margin-left: auto; }
.bc-set__acciones .pill { background: #fff; }
.bc-set__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.bc-set__fila { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; padding: .55rem .7rem; border-radius: 10px; background: #fff; color: #1b2233; cursor: pointer; }
.bc-set__fila:hover, .bc-set__fila:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.bc-set__fila.is-arrastrando { opacity: .45; }
.bc-set__arrastre { color: #a3adbf; cursor: grab; letter-spacing: -2px; font-weight: 700; user-select: none; }
.bc-set__pos { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #14213d; font-weight: 800; font-size: .85rem; }
.bc-set__botones { display: flex; gap: .25rem; }
.bc-set__botones .os-boton { width: 30px; height: 30px; }
.bc-set__botones .os-boton:disabled { opacity: .35; cursor: default; }
.bc-set__vacio { margin: 0; color: #c6cfdf; font-size: .92rem; }
.bc-titulo-demas { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bc-tarjeta { cursor: pointer; position: relative; }
.bc-tarjeta__agregar { grid-column: 2 / -1; justify-self: end; margin-top: -.2rem; padding: .2rem .65rem; border-radius: 999px; border: 1px solid #d5dbe5; background: #f5f7fb; color: var(--navy); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.bc-tarjeta__agregar:hover { background: var(--gold); border-color: var(--gold); color: #14213d; }
.bc-grupo--set { gap: .4rem; }
.bc-set__posicion { font-weight: 700; color: var(--navy); font-size: .85rem; min-width: 3.4rem; text-align: center; }
.bc-escenario .bc-set__posicion { color: #fff; }
.bc-boton:disabled { opacity: .35; cursor: default; }
@media (max-width: 760px) {
  .bc-set__fila { grid-template-columns: auto minmax(0, 1fr) auto; }
  .bc-set__arrastre, .bc-set__fila .bc-tono { display: none; }
}
.bc-set__escenario { display: inline-flex; align-items: center; gap: .3rem; height: 30px; padding: 0 .65rem; border-radius: 9px; border: 1px solid var(--navy); background: var(--navy); color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; margin-right: .25rem; }
.bc-set__escenario:hover { background: var(--gold); border-color: var(--gold); color: #14213d; }
@media (max-width: 760px) { .bc-set__escenario span { display: none; } }
/* Set: historial de versiones */
.bc-set__acciones .pill.is-activo { background: var(--gold); border-color: var(--gold); }
.bc-set__historial { margin-top: .8rem; padding: .8rem; border-radius: 10px; background: rgba(255,255,255,.08); }
.bc-set__historial-ayuda { margin: 0 0 .6rem; font-size: .82rem; color: #c6cfdf; }
.bc-set__versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: 320px; overflow: auto; }
.bc-set__versiones li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .55rem .7rem; border-radius: 9px; background: #fff; color: #1b2233; }
.bc-set__versiones small { display: block; color: var(--muted); font-size: .76rem; }
.bc-set__titulos { display: block; font-size: .8rem; color: #4a5468; margin-top: .15rem; }
.bc-set__versiones .pill { background: #fff; flex: none; }
/* Orden de servicio: botones de la sección (agregar punto / traer el set de la banda) */
.os-seccion__botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.os-traer-set { border-color: var(--gold); color: #6b4a00; background: #fff6e0; }
.os-traer-set:hover { background: var(--gold); color: #14213d; }
/* Cancionero: alabanzas en edición (solo las ve quien edita) */
.bc-editando { display: inline-block; margin-right: .4rem; padding: .02rem .45rem; border-radius: 999px; background: #fdecea; color: #b42318; border: 1px solid #f5c2bd; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.bc-editando--grande { font-size: .72rem; margin-left: .5rem; }
.bc-form__datos { grid-template-columns: 80px minmax(0, 2fr) minmax(0, 1.4fr) 90px minmax(0, 1.2fr) 110px; }
@media (max-width: 900px) { .bc-form__datos { grid-template-columns: 1fr; } }

/* Usuarios: varios roles */
.usu-roles { display: grid; gap: .45rem; }
.usu-roles__titulo { font-size: .78rem; font-weight: 600; color: var(--navy); }
.usu-roles__titulo small { font-weight: 400; color: var(--muted); }
.usu-roles__lista { display: grid; gap: .35rem; max-height: 300px; overflow: auto; padding: .2rem; }
.usu-rol { display: flex; align-items: flex-start; gap: .55rem; padding: .5rem .65rem; border: 1px solid #dfe4ec; border-radius: 9px; background: #fff; cursor: pointer; }
.usu-rol:hover { border-color: var(--gold); }
.usu-rol input { width: 17px; height: 17px; margin-top: .15rem; accent-color: var(--navy); flex: none; }
.usu-rol strong { display: block; font-size: .9rem; color: var(--navy); }
.usu-rol small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.3; }
.usu-rol:has(input:checked) { border-color: var(--navy); background: #f3f6fb; }
.usu-rol-etiqueta { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: #eef1f7; color: var(--navy); font-size: .74rem; font-weight: 600; }

/* Finanzas: asistencia */
.asi-titulo { font-family: var(--serif); color: var(--navy); font-size: 1.35rem; margin: 1.4rem 0 .6rem; }
#asiAviso:empty { display: none; }
.asi-resumen th, .asi-resumen td { padding: .45rem .55rem; }
.asi-resumen td small { margin-left: .25rem; font-size: .66rem; color: var(--muted); vertical-align: super; }
.asi-resumen .asi-otra { background: #f8f9fb; color: #4a5568; }
.asi-resumen tfoot th { border-top: 2px solid #e3e7ef; color: var(--navy); background: #fbfaf6; }
.asi-resumen .asi-vacio td, .asi-resumen .asi-vacio .asi-mes { color: #b3b9c6; }
.asi-mes { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--navy); cursor: pointer; text-align: left; }
.asi-mes:not(:disabled):hover { text-decoration: underline; }
.asi-mes:disabled { cursor: default; }
.asi-dia { color: var(--muted); font-size: .76rem; }
.asi-lista tr.asi-resaltada td { background: #fbf6e8; }
.asi-form { display: grid; gap: 1rem; }
.asi-fecha { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.asi-fecha .campo { max-width: 220px; }
.asi-tabla input { max-width: 120px; margin-left: auto; display: block; text-align: right; }
.asi-tabla td.num, .asi-tabla tfoot .num { font-weight: 700; color: var(--navy); }
.asi-subtitulo { margin: .2rem 0 0; color: var(--navy); font-size: 1rem; } .asi-subtitulo small { color: var(--muted); font-weight: 400; }
.asi-nuevos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 640px) { .asi-nuevos { grid-template-columns: 1fr; } }

/* Directorio: casilla alineada con los campos de la misma fila */
.dir-casilla--campo { align-self: center; }

/* Cancionero: logo en la cabecera y escenario con fondo blanco */
.bc-cabeza::after { content: ""; display: block; clear: both; }
.bc-logo { float: right; width: calc(56px * var(--bc-escala)); max-width: 90px; margin: 0 0 .4rem 1rem; }
.bc-escenario.bc-claro { background: #fff; color: #111827; }
.bc-escenario.bc-claro .bc-herramientas { background: rgba(255,255,255,.95); border-color: #e3e7ef; }
.bc-escenario.bc-claro .bc-grupo__titulo { color: var(--muted); }
.bc-escenario.bc-claro .bc-boton, .bc-escenario.bc-claro #bcTono { background: #fff; color: var(--navy); border-color: #d5dbe5; }
.bc-escenario.bc-claro .bc-boton.is-activo { background: var(--navy); color: #fff; border-color: var(--navy); }
.bc-escenario.bc-claro .bc-cabeza h2, .bc-escenario.bc-claro .bc-etiqueta strong, .bc-escenario.bc-claro .bc-datos b, .bc-escenario.bc-claro .bc-set__posicion { color: var(--navy); }
.bc-escenario.bc-claro .bc-texto { color: #111827; }
.bc-escenario.bc-claro .bc-acordes, .bc-escenario.bc-claro .bc-progresion { color: #a15c00; }
.bc-escenario.bc-claro .bc-melodia { color: #0b7a6c; }
.bc-escenario.bc-claro .bc-leyenda__acorde { background: #a15c00; }
.bc-escenario.bc-claro .bc-leyenda__nota { background: #0b7a6c; }
.bc-escenario.bc-claro .bc-seccion { border-color: #e3e7ef; }

/* Congregación: pedidos de oración */
.ora-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.ora-cifra { background: #fbfaf6; border: 1px solid #e3e7ef; border-radius: 14px; padding: .8rem 1rem; display: grid; }
.ora-cifra strong { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--navy); }
.ora-cifra span { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.ora-cifra--nuevo { background: #fff6e0; border-color: #f1d999; }
.ora-cifra--oro { background: linear-gradient(135deg, #fbf3dc, #fff); border-color: #e6cf8f; }
.ora-filtros { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: end; justify-content: space-between; margin-bottom: 1rem; }
.ora-filtros .chips { margin: 0; }
.ora-buscar { min-width: 240px; flex: 0 1 320px; }
.ora-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ora-tarjeta { --ora-color: var(--gold); position: relative; display: flex; flex-direction: column; gap: .45rem; background: #fff; border: 1px solid #e3e7ef; border-top: 4px solid var(--ora-color); border-radius: 14px; padding: 1rem 1.1rem .9rem; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.ora-tarjeta:hover, .ora-tarjeta:focus-visible { box-shadow: 0 8px 22px rgba(20,33,61,.1); transform: translateY(-2px); outline: none; }
.ora-tarjeta--nuevo::after { content: ""; position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #e76f51; box-shadow: 0 0 0 4px rgba(231,111,81,.18); }
.ora-tarjeta--nuevo .ora-tarjeta__cabeza { padding-right: 1rem; }
.ora-tarjeta--contestada { background: linear-gradient(180deg, #fffbef, #fff 60%); }
.ora-tarjeta--archivado { opacity: .7; }
.ora-tarjeta__cabeza { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ora-cat { font-size: .78rem; font-weight: 700; color: var(--ora-color); text-transform: uppercase; letter-spacing: .04em; }
.ora-tarjeta h3 { margin: 0; font-family: var(--serif); font-size: 1.35rem; color: var(--navy); }
.ora-tarjeta__mensaje { margin: 0; color: #2b3448; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.ora-testimonio { margin: 0; padding: .55rem .7rem; background: #fbf3dc; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; font-size: .9rem; color: #5b4510; }
.ora-tarjeta__meta { display: flex; flex-wrap: wrap; gap: .35rem .8rem; margin: 0; font-size: .78rem; color: var(--muted); }
.ora-priv { font-weight: 600; color: #0f766e; }
.ora-priv--conf { color: #8a5a00; }
.ora-contactar { color: #b45309; font-weight: 600; }
.ora-tarjeta__pie { margin-top: auto; padding-top: .55rem; border-top: 1px dashed #e3e7ef; display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ora-contactos { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .82rem; }
.ora-contactos a { color: var(--navy); text-decoration: none; white-space: nowrap; }
.ora-contactos a:hover { text-decoration: underline; }
.ora-contactos--col { flex-direction: column; margin: 0; }
.ora-orar { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid #d5dbe5; background: #fff; border-radius: 999px; padding: .35rem .55rem .35rem .75rem; font: inherit; font-size: .86rem; font-weight: 600; color: var(--navy); cursor: pointer; transition: background .15s, border-color .15s; }
.ora-orar b { min-width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center; background: #eef1f7; font-size: .76rem; padding: 0 .35rem; }
.ora-orar:hover { border-color: var(--gold); background: #fffbef; }
.ora-orar.is-orado { background: #fbf3dc; border-color: #e6cf8f; color: #6b4a00; }
.ora-orar.is-orado b { background: var(--gold); color: var(--navy); }
.ora-orar.is-latiendo span { display: inline-block; animation: ora-latido .6s ease; }
@keyframes ora-latido { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.ora-orar--grande { font-size: 1rem; padding: .55rem .7rem .55rem 1rem; }
.ora-etq--orando { background: #e6f4f1; color: #0f766e; }
.ora-vacio { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.ora-vacio div { font-size: 2.4rem; }

.ora-detalle { --ora-color: var(--gold); display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.4rem; align-items: start; }
.ora-detalle__principal { background: #fff; border: 1px solid #e3e7ef; border-top: 5px solid var(--ora-color); border-radius: 16px; padding: 1.3rem 1.5rem; }
.ora-detalle__cat { margin: 0; font-size: .82rem; font-weight: 700; color: var(--ora-color); text-transform: uppercase; letter-spacing: .04em; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ora-detalle__cat .etiqueta, .ora-detalle__cat .ora-priv { text-transform: none; letter-spacing: normal; }
.ora-detalle h2 { margin: .3rem 0 0; font-family: var(--serif); font-size: 2rem; color: var(--navy); }
.ora-detalle__fecha { margin: .2rem 0 1rem; color: var(--muted); font-size: .88rem; }
.ora-detalle__mensaje { margin: 0 0 1.1rem; padding: 1rem 1.2rem; background: #fbfaf6; border-left: 4px solid var(--ora-color); border-radius: 0 12px 12px 0; font-size: 1.08rem; line-height: 1.6; white-space: pre-line; color: #1b2233; }
.ora-detalle__orar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.ora-detalle__orar small { color: var(--muted); }
.ora-respondida { margin-top: 1.1rem; padding: 1rem 1.2rem; border-radius: 14px; background: linear-gradient(135deg, #fbf3dc, #fffdf6); border: 1px solid #e6cf8f; }
.ora-respondida span { font-family: var(--serif); font-size: 1.35rem; color: #6b4a00; margin-right: .6rem; }
.ora-respondida small { color: #8a6d24; }
.ora-respondida p { margin: .4rem 0 0; color: #3d2f0b; white-space: pre-line; }
.ora-contestar { margin-top: 1.1rem; border: 1px dashed #e6cf8f; border-radius: 12px; padding: .7rem 1rem; background: #fffdf6; }
.ora-contestar summary { cursor: pointer; font-weight: 700; color: #6b4a00; }
.ora-contestar[open] summary { margin-bottom: .8rem; }
.ora-contestar .pill { margin-top: .6rem; }
.ora-detalle__lado { display: grid; gap: .9rem; }
.ora-caja { background: #fff; border: 1px solid #e3e7ef; border-radius: 14px; padding: .9rem 1rem; }
.ora-caja h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ora-caja h3:not(:first-child) { margin-top: .9rem; }
.ora-caja select { width: 100%; padding: .5rem .6rem; border: 1px solid #d5dbe5; border-radius: 8px; font: inherit; }
.ora-estados { display: flex; flex-wrap: wrap; gap: .4rem; }
.ora-estados .chip { margin: 0; font-size: .8rem; padding: .3rem .7rem; }
.form-botones--inicio { justify-content: flex-start; margin: 0; }
.ora-seguimiento { margin-top: 1.6rem; }
.ora-seguimiento h3 { font-family: var(--serif); color: var(--navy); font-size: 1.3rem; margin: 0 0 .7rem; }
.ora-nota { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1rem; }
.ora-nota textarea { flex: 1; padding: .6rem .75rem; border: 1px solid #d5dbe5; border-radius: 10px; font: inherit; resize: vertical; }
.ora-linea { list-style: none; margin: 0 0 0 1rem; padding: 0; border-left: 2px solid #e3e7ef; }
.ora-linea li { display: flex; gap: .7rem; padding: .45rem 0; margin-left: -16px; }
.ora-linea__icono { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #e3e7ef; font-size: .95rem; }
.ora-linea li div { padding-top: .25rem; font-size: .9rem; color: #2b3448; }
.ora-linea li p { margin: .25rem 0; padding: .5rem .7rem; background: #f6f7fa; border-radius: 10px; white-space: pre-line; }
.ora-linea small { display: block; color: var(--muted); font-size: .76rem; }
.ora-linea__estado .ora-linea__icono { background: #fbf3dc; border-color: #e6cf8f; }
.ora-avisos { max-width: 640px; }

/* Celebración al marcar contestada */
.ora-celebra { position: fixed; inset: 0; pointer-events: none; z-index: 400; overflow: hidden; }
.ora-celebra span { position: absolute; bottom: -40px; animation: ora-sube 2.2s ease-out forwards; }
@keyframes ora-sube { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-85vh) scale(1.1) rotate(20deg); opacity: 0; } }

/* Tiempo de oración */
body.ora-modo-abierto { overflow: hidden; }
.ora-modo { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 4.5rem 1.5rem 2rem; overflow-y: auto; background: radial-gradient(ellipse at top, #22355e 0%, #101a30 55%, #0a1020 100%); color: #eef1f7; }
.ora-modo[hidden] { display: none; }
.ora-modo__barra { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; font-size: .9rem; color: #aab4c8; }
.ora-modo__puntos { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.ora-modo__puntos i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.ora-modo__puntos i.is-hecho { background: var(--gold); }
.ora-modo__puntos i.is-actual { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.ora-modo__cerrar { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
.ora-modo__tarjeta { width: min(760px, 100%); text-align: center; animation: ora-entra .5s ease; }
@keyframes ora-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ora-modo__cat { margin: 0; color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.ora-modo__tarjeta h2 { margin: .5rem 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; }
.ora-modo__mensaje { margin: 0; font-size: clamp(1.15rem, 2.4vw, 1.55rem); line-height: 1.6; color: #e8ecf3; white-space: pre-line; }
.ora-modo__meta { margin: 1.1rem 0 0; color: #8f9bb3; font-size: .9rem; }
.ora-modo__verso { width: min(620px, 100%); margin: 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: #c9d1e2; }
.ora-modo__verso cite { display: block; margin-top: .3rem; font-style: normal; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.ora-modo__acciones { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.ora-modo__boton { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-weight: 600; padding: .75rem 1.3rem; border-radius: 999px; cursor: pointer; }
.ora-modo__boton:disabled { opacity: .35; cursor: default; }
.ora-modo__boton--amen { background: var(--gold); border-color: var(--gold); color: #101a30; font-size: 1.1rem; padding: .85rem 2rem; box-shadow: 0 8px 26px rgba(201,162,74,.35); }
.ora-modo__fin { text-align: center; max-width: 560px; animation: ora-entra .5s ease; }
.ora-modo__fin h2 { font-family: var(--serif); font-size: 3rem; margin: .4rem 0; color: #fff; }
.ora-modo__fin p { font-size: 1.15rem; color: #d6dcea; }
.ora-modo__fin blockquote { font-family: var(--serif); font-style: italic; color: #c9d1e2; margin: 1.4rem 0 1.6rem; }
.ora-modo__fin cite { display: block; font-style: normal; color: var(--gold); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-top: .3rem; }
.ora-modo__icono { font-size: 3.4rem; }

@media (max-width: 900px) { .ora-detalle { grid-template-columns: 1fr; } .ora-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ora-lista { grid-template-columns: 1fr; } .ora-nota { flex-direction: column; } .ora-nota .pill { align-self: flex-end; } }
.ora-cifra strong, .ora-modo__verso cite, .ora-modo__fin cite, .ora-respondida small { font-variant-numeric: lining-nums; }
.ora-cifra strong { font-family: inherit; font-weight: 700; font-size: 1.8rem; }

/* Cancionero en pantalla con el formato de la hoja impresa (mapa de secciones, cajas y acordes sobre la sílaba) */
.bc-hoja { display: block; font-size: calc(1rem * var(--bc-escala)); }
.bc-hoja .hc-mapa { display: flex; flex-wrap: wrap; gap: .7em .5em; margin: .4em 0 1.2em; }
.bc-hoja .hc-circ { --c: #6b7280; position: relative; width: 2.05em; height: 2.05em; border-radius: 50%; border: 2px solid var(--c); color: var(--c);
  display: inline-grid; place-items: center; font-size: .78em; font-weight: 700; line-height: 1; background: #fff; }
.bc-hoja .hc-circ sup { position: absolute; top: -.55em; right: -.4em; font-size: .78em; color: var(--navy); font-weight: 700; }
.bc-hoja .hc-cols { column-width: 27em; column-gap: 1.6em; }
.bc-hoja .hc-sec { --c: #6b7280; display: inline-block; width: 100%; vertical-align: top; break-inside: avoid; position: relative;
  border: 1px solid #dfe3ea; border-radius: 12px; padding: 1.25em 1em .7em; margin: .9em 0 1em; background: #fff; }
.bc-hoja .hc-tit { position: absolute; top: -.8em; left: .8em; display: flex; align-items: center; gap: .4em; background: #fff; padding: 0 .45em; }
.bc-hoja .hc-tit .hc-circ { width: 1.75em; height: 1.75em; font-size: .64em; }
.bc-hoja .hc-tit strong { font-size: .95em; letter-spacing: .05em; text-transform: uppercase; color: var(--navy); }
.bc-hoja .hc-tit sup { font-size: .72em; color: #8a6d24; font-weight: 700; }
.bc-hoja .hc-nota { text-align: right; font-size: .8em; color: var(--muted); margin: -.3em 0 .35em; }
.bc-hoja .hc-sec--vacia { padding: .9em 1em .3em; }
/* cada pedazo reserva su fila de acordes: si la línea se parte en una pantalla angosta, nada se encima */
.bc-hoja .hc-l { display: flex; flex-wrap: wrap; align-items: flex-end; line-height: 1.25; margin-bottom: .45em; color: #1b2233; }
.bc-hoja .hc-p { display: inline-flex; align-items: flex-end; }
.bc-hoja .hc-s { position: relative; display: inline-block; padding-top: 1.2em; }
.bc-hoja .hc-l--sin .hc-s { padding-top: 0; }
.bc-hoja .hc-a { position: absolute; left: 0; top: 0; font-weight: 700; font-size: .94em; color: #b07a10; white-space: nowrap; line-height: 1.25; }
.bc-hoja .hc-t { white-space: pre; }
.bc-hoja .hc-solo { display: flex; flex-wrap: wrap; gap: .3em 1.1em; font-weight: 700; color: #b07a10; margin-bottom: .45em; }
.bc-hoja .hc-texto { color: #1b2233; margin-bottom: .45em; white-space: pre-wrap; }
.bc-hoja .hc-vacio { height: .45em; }
.bc-hoja .hc-a sup, .bc-hoja .hc-solo sup { font-size: .68em; vertical-align: .55em; line-height: 0; margin-left: .03em; }
.bc-hoja .mel { color: #0e7c70; font-style: italic; font-weight: 600; }
.bc-editor__vista .bc-hoja { font-size: .82rem; }
.bc-editor__vista .bc-hoja .hc-cols { column-width: 24em; }
/* Escenario oscuro */
.bc-escenario .bc-hoja .hc-sec, .bc-escenario .bc-hoja .hc-tit, .bc-escenario .bc-hoja .hc-circ { background: #0d1424; }
.bc-escenario .bc-hoja .hc-sec { border-color: #2a3756; }
.bc-escenario .bc-hoja .hc-tit strong, .bc-escenario .bc-hoja .hc-circ sup { color: #fff; }
.bc-escenario .bc-hoja .hc-circ { filter: brightness(1.6) saturate(1.1); }
.bc-escenario .bc-hoja .hc-l, .bc-escenario .bc-hoja .hc-texto { color: #e8ecf3; }
.bc-escenario .bc-hoja .hc-a, .bc-escenario .bc-hoja .hc-solo { color: #f2c35b; }
.bc-escenario .bc-hoja .mel { color: #6fe0cf; }
.bc-escenario .bc-hoja .hc-nota { color: #8f9bb3; }
/* Escenario con fondo blanco */
.bc-escenario.bc-claro .bc-hoja .hc-sec, .bc-escenario.bc-claro .bc-hoja .hc-tit, .bc-escenario.bc-claro .bc-hoja .hc-circ { background: #fff; }
.bc-escenario.bc-claro .bc-hoja .hc-sec { border-color: #dfe3ea; }
.bc-escenario.bc-claro .bc-hoja .hc-tit strong, .bc-escenario.bc-claro .bc-hoja .hc-circ sup { color: var(--navy); }
.bc-escenario.bc-claro .bc-hoja .hc-circ { filter: none; }
.bc-escenario.bc-claro .bc-hoja .hc-l, .bc-escenario.bc-claro .bc-hoja .hc-texto { color: #111827; }
.bc-escenario.bc-claro .bc-hoja .hc-a, .bc-escenario.bc-claro .bc-hoja .hc-solo { color: #a15c00; }
.bc-escenario.bc-claro .bc-hoja .mel { color: #0b7a6c; }
.bc-escenario.bc-claro .bc-hoja .hc-nota { color: var(--muted); }

/* Calendario: imagen o volante del evento */
.cal-imagen { display: flex; gap: 1rem; align-items: center; padding: .8rem; border: 1px dashed #d5dbe5; border-radius: 12px; background: #fbfaf6; }
.cal-imagen__vista { width: 110px; height: 110px; flex-shrink: 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #eef1f7; color: var(--muted); font-size: .78rem; text-align: center; }
.cal-imagen__vista img { width: 100%; height: 100%; object-fit: cover; }
.cal-imagen__lado { display: grid; gap: .35rem; min-width: 0; }
.cal-imagen__lado strong { color: var(--navy); font-size: .9rem; }
.cal-imagen__lado strong small { color: var(--muted); font-weight: 400; }
.cal-imagen__lado .form__nota { margin: 0; }
.cal-imagen__botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.cal-imagen__botones label.pill { cursor: pointer; }

/* Cancionero: reproductor de pistas de playback */
.bc-con-pistas { color: #0f766e !important; font-weight: 700; }
.pb { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #dfe3ea; border-radius: 14px; background: linear-gradient(180deg, #f8fafc, #fff); }
.pb[hidden], .pb:empty { display: none; }
.pb__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.pb__cabeza strong { color: var(--navy); }
.pb__info { font-size: .82rem; color: var(--muted); }
.pb__acciones { display: flex; gap: .35rem; margin-left: auto; flex-wrap: wrap; }
.pb__chico { border: 1px solid #d5dbe5; background: #fff; color: var(--navy); border-radius: 999px; padding: .25rem .7rem; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.pb__chico.is-activo { background: var(--navy); border-color: var(--navy); color: #fff; }
.pb__nota { margin: .5rem 0 0; font-size: .8rem; color: var(--muted); }
.pb__error { margin: .5rem 0 0; font-size: .85rem; font-weight: 600; color: #b42318; }
.pb__ok { margin: 0 0 .5rem; font-size: .85rem; font-weight: 600; color: #1d6b32; }
.pb__transporte { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .7rem; }
.pb__boton { min-width: 40px; height: 38px; border-radius: 10px; border: 1px solid #d5dbe5; background: #fff; color: var(--navy); font: inherit; font-weight: 700; cursor: pointer; }
.pb__boton:disabled { opacity: .45; cursor: default; }
.pb__play { min-width: 56px; height: 44px; border-radius: 999px; background: var(--navy); border-color: var(--navy); color: #fff; font-size: 1.05rem; }
.pb__play.is-sonando { background: var(--gold); border-color: var(--gold); color: #14213d; }
.pb__actual, .pb__total { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--navy); min-width: 2.6rem; text-align: center; }
.pb__barra { flex: 1 1 180px; accent-color: var(--gold); }
.pb__maestro { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }
.pb__maestro input { width: 90px; accent-color: var(--navy); }
.pb__carga { position: relative; margin-top: .6rem; height: 26px; border-radius: 8px; background: #eef1f7; overflow: hidden; font-size: .78rem; }
.pb__carga span { position: relative; z-index: 1; line-height: 26px; padding: 0 .7rem; color: var(--navy); font-weight: 600; }
.pb__carga i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f3d98f, var(--gold)); transition: width .2s; }
.pb__pistas { display: grid; gap: .3rem; margin-top: .7rem; }
.pb__pista { display: grid; grid-template-columns: minmax(120px, 1.3fr) auto auto auto minmax(80px, 2fr) auto; gap: .45rem; align-items: center; padding: .3rem .5rem; border-radius: 9px; background: #fff; border: 1px solid #eef0f4; }
.pb__pista.is-apagada { opacity: .5; }
/* Ícono de instrumento en cada pista */
.pb__titulo { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.pb__titulo > .pb__nombre, .pb__titulo > .pb__nombre-edit { flex: 1; min-width: 0; }
.pb__icono { --c: #5c677d; flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.pb__icono svg { width: 21px; height: 21px; }
.pb__icono--voz { --c: #0f9b8e; }
.pb__icono--bateria { --c: #e8590c; }
.pb__icono--bajo { --c: #7048e8; }
.pb__icono--guitarra { --c: #d6336c; }
.pb__icono--piano { --c: #1c7ed6; }
.pb__icono--teclado { --c: #0c8599; }
.pb__icono--cuerdas { --c: #a0522d; }
.pb__icono--click { --c: #b7791f; }
.pb__icono--guia { --c: #2f9e44; }
.pb__icono--otros { --c: #5c677d; }
.pb__pista.is-apagada .pb__icono { filter: grayscale(1); }
.bc-escenario .pb__icono { background: color-mix(in srgb, var(--c) 22%, transparent); filter: brightness(1.45) saturate(1.1); }
.bc-escenario .pb__pista.is-apagada .pb__icono { filter: grayscale(1) brightness(1.3); }
.bc-escenario.bc-claro .pb__icono { background: color-mix(in srgb, var(--c) 13%, transparent); filter: none; }
.pb__nombre { font-weight: 600; font-size: .86rem; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb__nombre-edit { width: 100%; min-width: 0; padding: .3rem .5rem; border: 1px solid #d5dbe5; border-radius: 7px; font: inherit; font-size: .85rem; }
.pb__ms { width: 30px; height: 28px; border-radius: 7px; border: 1px solid #d5dbe5; background: #fff; font: inherit; font-size: .75rem; font-weight: 800; color: #5a6275; cursor: pointer; }
.pb__ms.is-mute { background: #b42318; border-color: #b42318; color: #fff; }
.pb__ms.is-solo { background: var(--gold); border-color: var(--gold); color: #14213d; }
.pb__lados { display: inline-flex; border: 1px solid #d5dbe5; border-radius: 7px; overflow: hidden; }
.pb__lados button { width: 26px; height: 26px; border: 0; background: #fff; font: inherit; font-size: .7rem; font-weight: 700; color: #5a6275; cursor: pointer; }
.pb__lados button + button { border-left: 1px solid #e3e7ef; }
.pb__lados button.is-activo { background: var(--navy); color: #fff; }
.pb__vol { width: 100%; accent-color: var(--navy); }
.pb__gestion { display: inline-flex; gap: .2rem; }
.pb__gestion button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid #d5dbe5; background: #fff; cursor: pointer; font: inherit; }
.pb__gestion button:disabled { opacity: .35; cursor: default; }
.pb__gestion .pb__borrar { color: #b42318; }
.pb__subir { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed #dfe3ea; }
.pb__subir label.pill { cursor: pointer; }
.pb__subir .pb__nota { margin: 0; flex-basis: 100%; }
.pb__subiendo { position: relative; flex-basis: 100%; font-size: .8rem; }
.pb__subiendo:empty { display: none; }
.pb__subiendo span { position: relative; z-index: 1; }
.pb__subiendo i { position: absolute; left: 0; bottom: -4px; height: 3px; background: var(--gold); }
@media (max-width: 640px) {
  .pb__pista { grid-template-columns: minmax(0, 1fr) auto auto auto; }
  .pb__vol { grid-column: 1 / -1; }
  .pb__gestion { grid-column: 1 / -1; justify-content: flex-end; }
}
/* En el escenario oscuro */
.bc-escenario .pb { background: #131c31; border-color: #2a3756; }
.bc-escenario .pb__cabeza strong, .bc-escenario .pb__actual, .bc-escenario .pb__total, .bc-escenario .pb__nombre { color: #fff; }
.bc-escenario .pb__boton, .bc-escenario .pb__chico, .bc-escenario .pb__ms, .bc-escenario .pb__lados button, .bc-escenario .pb__pista { background: #18233b; border-color: #2d3b5c; color: #e8ecf3; }
.bc-escenario .pb__play { background: var(--gold); border-color: var(--gold); color: #0d1424; }
.bc-escenario .pb__chico.is-activo, .bc-escenario .pb__lados button.is-activo { background: var(--gold); border-color: var(--gold); color: #0d1424; }
.bc-escenario .pb__ms.is-mute { background: #b42318; color: #fff; }
.bc-escenario .pb__ms.is-solo { background: var(--gold); color: #0d1424; }
.bc-escenario .pb__info, .bc-escenario .pb__nota { color: #8f9bb3; }
/* En el escenario con fondo blanco se ve como en la vista normal */
.bc-escenario.bc-claro .pb { background: #fff; border-color: #dfe3ea; }
.bc-escenario.bc-claro .pb__cabeza strong, .bc-escenario.bc-claro .pb__actual, .bc-escenario.bc-claro .pb__total, .bc-escenario.bc-claro .pb__nombre { color: var(--navy); }
.bc-escenario.bc-claro .pb__boton, .bc-escenario.bc-claro .pb__chico, .bc-escenario.bc-claro .pb__ms, .bc-escenario.bc-claro .pb__lados button, .bc-escenario.bc-claro .pb__pista { background: #fff; border-color: #d5dbe5; color: var(--navy); }
.bc-escenario.bc-claro .pb__play { background: var(--navy); border-color: var(--navy); color: #fff; }
.bc-escenario .pb__vol, .bc-escenario .pb__maestro input, .bc-escenario .pb__barra { accent-color: var(--gold); }
.bc-escenario.bc-claro .pb__vol, .bc-escenario.bc-claro .pb__maestro input { accent-color: var(--navy); }
/* Metrónomo generado */
.pb__pista--met { background: #fbf7ee; border-color: #efe3c4; }
.pb__nombre--met small { font-weight: 500; color: var(--muted); font-size: .74rem; margin-left: .2rem; }
.pb__met { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .8rem; padding: .7rem .8rem; border: 1px dashed #e6cf8f; border-radius: 10px; background: #fffdf6; font-size: .85rem; }
.pb__met label { display: inline-flex; align-items: center; gap: .3rem; color: var(--navy); }
.pb__met select, .pb__met input[type=number] { padding: .25rem .4rem; border: 1px solid #d5dbe5; border-radius: 7px; font: inherit; }
.pb__met input[data-met="bpm"] { width: 5.2rem; } .pb__met input[data-met="inicio"] { width: 5rem; }
.pb__met .pb__nota { flex-basis: 100%; margin: 0; }
.pb__casilla input { width: 17px; height: 17px; accent-color: var(--navy); }
.pb__mini { width: 26px; height: 26px; border-radius: 7px; border: 1px solid #d5dbe5; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.bc-escenario .pb__pista--met { background: #1f2a44; border-color: #3a4870; }
.bc-escenario .pb__met { background: #18233b; border-color: #3a4870; }
.bc-escenario .pb__met label { color: #e8ecf3; }
/* Conteo antes de entrar (count-in): números grandes en pantalla */
.pb__conteo { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }
.pb__conteo select { padding: .3rem .4rem; border: 1px solid #d5dbe5; border-radius: 8px; font: inherit; font-size: .8rem; background: #fff; color: var(--navy); }
.bc-escenario .pb__conteo select { background: #18233b; border-color: #2d3b5c; color: #fff; }
.pb-conteo { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; pointer-events: none; }
.pb-conteo span { font-family: var(--serif); font-weight: 700; font-size: min(42vh, 46vw); line-height: 1; color: rgba(20, 33, 61, .85);
  text-shadow: 0 6px 40px rgba(255,255,255,.6); animation: pb-golpe .45s ease-out both; font-variant-numeric: lining-nums; }
.pb-conteo span.is-uno { color: var(--gold); }
.bc-escenario .pb-conteo span { color: rgba(255,255,255,.9); text-shadow: 0 6px 40px rgba(0,0,0,.6); }
.bc-escenario .pb-conteo span.is-uno { color: #f2c35b; }
.bc-escenario.bc-claro .pb-conteo span { color: rgba(20, 33, 61, .85); text-shadow: 0 6px 40px rgba(255,255,255,.6); }
@keyframes pb-golpe { from { transform: scale(1.35); opacity: 0; } 30% { opacity: 1; } to { transform: scale(1); opacity: .9; } }
/* Escenario en el teléfono: la barra se acomoda en varias filas y "Salir" no se sale de la pantalla */
@media (max-width: 640px) {
  .bc-escenario { padding: .6rem .7rem 40vh; }
  .bc-escenario .bc-herramientas { gap: .5rem .7rem; padding: .55rem .6rem; }
  .bc-escenario .bc-grupo--escenario { flex-wrap: wrap; margin-left: 0; gap: .4rem; }
  .bc-escenario .bc-grupo--escenario input[type=range] { width: 110px; }
  .bc-escenario .bc-boton--texto { white-space: nowrap; }
}

/* Sincronía: acorde que suena, sección actual y modo de marcar */
.bc-hoja [data-ac] { cursor: pointer; border-radius: 5px; transition: background .12s, color .12s, box-shadow .12s; }
.bc-hoja .hc-sonando { background: var(--gold); color: #14213d !important; box-shadow: 0 0 0 3px var(--gold); }
.bc-hoja .hc-sonando .mel { color: #14213d; }
.bc-hoja .hc-siguiente { box-shadow: 0 0 0 3px #e76f51; animation: sinc-late .9s ease-in-out infinite; }
@keyframes sinc-late { 50% { box-shadow: 0 0 0 6px rgba(231,111,81,.35); } }
.bc-hoja .hc-sec { transition: border-color .2s, box-shadow .2s; }
.bc-hoja .hc-sec--sonando { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent); }
.bc-hoja .hc-circ.is-sonando { background: var(--c); color: #fff; transform: scale(1.12); }
.bc-hoja .hc-circ[data-mapa-sec] { cursor: pointer; transition: transform .15s, background .15s; }
.bc-hoja--seguir .hc-cols { columns: 1; column-width: auto; }
.bc-escenario .bc-hoja .hc-sonando { background: #f2c35b; color: #0d1424 !important; box-shadow: 0 0 0 3px #f2c35b; }
.sinc { margin: -.4rem 0 1rem; }
.sinc[hidden] { display: none; }
.sinc__barra { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; padding: .45rem .8rem; border: 1px dashed #dfe3ea; border-radius: 10px; font-size: .85rem; }
.sinc__seguir { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; color: var(--navy); cursor: pointer; }
.sinc__seguir input { width: 16px; height: 16px; accent-color: var(--navy); }
.sinc__aviso { color: #b45309; font-weight: 600; }
.sinc__ajuste { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .5rem; padding: .5rem .8rem; border-radius: 10px; background: #fffdf6; border: 1px dashed #e6cf8f; font-size: .85rem; }
.sinc__todos { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; }
.sinc__marcar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; padding: .8rem 1rem; border-radius: 12px; background: #14213d; color: #fff; position: sticky; top: .5rem; z-index: 7; }
.sinc__marcar .pill { background: #fff; }
.sinc__que { display: grid; min-width: 9rem; }
.sinc__que span { font-size: .75rem; color: #aab4c8; text-transform: uppercase; letter-spacing: .06em; }
.sinc__que strong { font-size: 1.6rem; color: var(--gold); line-height: 1.1; }
.sinc__que small { color: #d6dcea; }
.sinc__tocar { display: grid; place-items: center; min-width: 9rem; min-height: 64px; padding: .5rem 1.2rem; border: 0; border-radius: 14px; background: var(--gold); color: #14213d; font: inherit; font-size: 1.3rem; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(201,162,74,.4); }
.sinc__tocar:active { transform: scale(.97); }
.sinc__tocar small { font-size: .7rem; font-weight: 600; }
.sinc__nota { flex-basis: 100%; margin: 0; font-size: .8rem; color: #c6cfdf; }
.bc-escenario .sinc__barra { border-color: #2a3756; }
.bc-escenario .sinc__seguir { color: #e8ecf3; }
@media (max-width: 640px) { .sinc__tocar { flex: 1 1 100%; } }

/* Hoja: repetición de una parte ya escrita ([CORO 1 x2] sin contenido) */
.bc-hoja .hc-sec--ref { border-style: dashed; padding: 1.05em 1em .6em; background: color-mix(in srgb, var(--c) 5%, #fff); }
.bc-hoja .hc-ref { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .8em; }
.bc-hoja .hc-ref__ir { border: 1px solid #dfe3ea; background: #fff; border-radius: 999px; padding: .15em .7em; font: inherit; font-size: .78em; color: var(--muted); cursor: pointer; }
.bc-hoja .hc-ref__ir:hover { border-color: var(--c); color: var(--navy); }
.bc-hoja .hc-ref__acordes { display: flex; flex-wrap: wrap; gap: .3em .5em; }
.bc-hoja .hc-chip { font-weight: 700; color: #b07a10; padding: .05em .35em; border-radius: 6px; background: #fbf7ee; }
.bc-hoja .hc-sec--destello { animation: hc-destello 1.6s ease; }
@keyframes hc-destello { 20%, 60% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 45%, transparent); } }
.bc-escenario .bc-hoja .hc-sec--ref { background: #111a2e; }
.bc-escenario .bc-hoja .hc-chip { background: #1b2640; color: #f2c35b; }
.bc-escenario .bc-hoja .hc-ref__ir { background: #18233b; border-color: #2d3b5c; color: #aab4c8; }
.bc-escenario.bc-claro .bc-hoja .hc-sec--ref { background: #fff; }
.bc-escenario.bc-claro .bc-hoja .hc-chip { background: #fbf7ee; color: #a15c00; }
.bc-hoja .hc-chip.hc-sonando { background: var(--gold); color: #14213d; }
.bc-escenario .bc-hoja .hc-chip.hc-sonando { background: #f2c35b; color: #0d1424; }

/* Acordes sobre notas de melodía: ancho fijo, con los espacios tal como se escribieron */
.bc-hoja .hc-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: .92em; line-height: 1.4; white-space: pre; overflow-x: auto; margin-bottom: .45em; color: #1b2233; }
.bc-hoja .hc-a-fija { font-weight: 700; color: #b07a10; border-radius: 4px; }
.bc-escenario .bc-hoja .hc-mono { color: #e8ecf3; }
.bc-escenario .bc-hoja .hc-a-fija { color: #f2c35b; }
.bc-escenario.bc-claro .bc-hoja .hc-mono { color: #111827; }
.bc-escenario.bc-claro .bc-hoja .hc-a-fija { color: #a15c00; }
.sinc__vista { display: inline-flex; border: 1px solid #d5dbe5; border-radius: 999px; overflow: hidden; }
.sinc__vista button { border: 0; background: #fff; color: var(--navy); font: inherit; font-size: .78rem; font-weight: 600; padding: .25rem .7rem; cursor: pointer; }
.sinc__vista button + button { border-left: 1px solid #d5dbe5; }
.sinc__vista button.is-activo { background: var(--navy); color: #fff; }
.bc-escenario .sinc__vista, .bc-escenario .sinc__vista button + button { border-color: #2d3b5c; }
.bc-escenario .sinc__vista button { background: #18233b; color: #e8ecf3; }
.bc-escenario .sinc__vista button.is-activo { background: var(--gold); color: #0d1424; }

/* Repeticiones seguidas: una fila de etiquetas compactas */
.bc-hoja .hc-fila-refs { display: flex; flex-wrap: wrap; gap: .5em; margin: .6em 0 1em; break-inside: avoid; }
.bc-hoja .hc-fila-refs .hc-sec--ref { display: inline-flex; align-items: center; gap: .4em; width: auto; margin: 0; padding: .35em .5em .35em .6em; border-radius: 999px; }
.bc-hoja .hc-fila-refs .hc-tit { position: static; padding: 0; background: none; }
.bc-hoja .hc-fila-refs .hc-ref__ir { padding: .05em .45em; }
.bc-hoja .hc-fila-refs .hc-ref__txt { display: none; }

/* ===== Escenario en vivo (vivo.js): el líder dirige y las demás estaciones lo siguen ===== */
.vivo { margin: 0 0 .9rem; padding: .7rem .9rem; border: 1px solid #dfe5ee; border-radius: 12px; background: #f7f9fc; font-size: .88rem; color: var(--navy); }
.vivo__fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.vivo__fila strong { font-size: .95rem; }
.vivo__nota { color: var(--muted); font-size: .8rem; }
.vivo__invita { padding: .1rem 0; }
.vivo__punto { width: 10px; height: 10px; border-radius: 50%; background: #e03131; box-shadow: 0 0 0 0 rgba(224, 49, 49, .6); animation: vivo-pulso 1.6s infinite; flex: none; }
.vivo__punto.is-vivo { background: #e03131; }
@keyframes vivo-pulso { 0% { box-shadow: 0 0 0 0 rgba(224, 49, 49, .55); } 70% { box-shadow: 0 0 0 9px rgba(224, 49, 49, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 49, 49, 0); } }
.vivo__aviso { margin: .5rem 0 0; padding: .45rem .7rem; border-radius: 8px; background: #fff4e6; border: 1px solid #ffd8a8; color: #8a4b08; font-size: .84rem; }
.vivo__aviso .pb__chico { margin-left: .4rem; }
.vivo__activar { display: block; width: 100%; margin: .6rem 0 0; padding: .9rem; border: 0; border-radius: 10px; background: var(--gold); color: #14213d; font: inherit; font-size: 1.05rem; font-weight: 800; cursor: pointer; animation: vivo-llamar 1.2s ease-in-out infinite alternate; }
@keyframes vivo-llamar { from { filter: brightness(1); } to { filter: brightness(1.15); } }
.vivo__mios { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed #d5dbe5; }
.vivo__mios label { display: inline-flex; align-items: center; gap: .35rem; }
.vivo__mios select { padding: .25rem .4rem; border: 1px solid #d5dbe5; border-radius: 7px; font: inherit; background: #fff; }
.vivo__lat { min-width: 3.6em; text-align: center; font-variant-numeric: tabular-nums; }
.vivo__oigo, .vivo__control { display: inline-flex; align-items: center; gap: 0; }
.vivo__oigo { gap: .35rem; }
.vivo__oigo button, .vivo__control button { padding: .28rem .55rem; border: 1px solid #d5dbe5; background: #fff; font: inherit; font-size: .78rem; font-weight: 700; color: #5a6275; cursor: pointer; }
.vivo__oigo button + button, .vivo__control button + button { margin-left: -1px; }
.vivo__oigo button:first-of-type, .vivo__control button:first-child { border-radius: 7px 0 0 7px; }
.vivo__oigo button:last-of-type, .vivo__control button:nth-child(3) { border-radius: 0 7px 7px 0; }
.vivo__oigo button.is-activo, .vivo__control button.is-activo { background: var(--navy); border-color: var(--navy); color: #fff; }
.vivo__control button:last-child { margin-left: .4rem; border-radius: 7px; }
.vivo__control button.is-mudo { background: #b42318; border-color: #b42318; color: #fff; }
.vivo__estaciones { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .35rem; }
.vivo__estacion { display: grid; grid-template-columns: auto minmax(130px, 1.3fr) 150px minmax(110px, 1fr) auto; align-items: center; gap: .5rem .7rem; padding: .4rem .6rem; border-radius: 9px; background: #fff; border: 1px solid #eef0f4; }
.vivo__estacion--lider { background: #fbf7ee; border-color: #efe3c4; }
.vivo__quien { display: grid; min-width: 0; }
.vivo__quien strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vivo__quien small { color: var(--muted); font-weight: 500; }
.vivo__calidad { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.vivo__mal { color: #b42318; font-weight: 700; }
.vivo__chip { display: inline-block; padding: .15rem .5rem; border-radius: 999px; background: #edf2ff; color: #364fc7; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vivo__chip--ok { background: #ebfbee; color: #2b8a3e; }
.vivo__chip--aviso { background: #fff9db; color: #8a6d00; }
.vivo__chip--mal { background: #fff5f5; color: #c92a2a; }
.pb__vivo { margin: .4rem 0 0; padding: .4rem .65rem; border-radius: 8px; background: #fff0f0; border: 1px solid #ffc9c9; color: #8f1d1d; font-size: .8rem; }
.pb__transporte.is-bloqueado .pb__boton:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 720px) {
  .vivo__estacion { grid-template-columns: auto minmax(0, 1fr) auto; }
  .vivo__calidad, .vivo__control { grid-column: 1 / -1; }
}
.bc-escenario .vivo { background: #121a2e; border-color: #2d3b5c; color: #e8ecf3; }
.bc-escenario .vivo__nota, .bc-escenario .vivo__quien small, .bc-escenario .vivo__calidad { color: #9aa6bf; }
.bc-escenario .vivo__estacion { background: #18233b; border-color: #2d3b5c; }
.bc-escenario .vivo__estacion--lider { background: #1f2a44; border-color: #3a4870; }
.bc-escenario .vivo__oigo button, .bc-escenario .vivo__control button, .bc-escenario .vivo__mios select { background: #18233b; border-color: #2d3b5c; color: #e8ecf3; }
.bc-escenario .vivo__oigo button.is-activo, .bc-escenario .vivo__control button.is-activo { background: var(--gold); border-color: var(--gold); color: #0d1424; }
.bc-escenario .vivo__mios { border-top-color: #2d3b5c; }
.bc-escenario.bc-claro .vivo { background: #f7f9fc; border-color: #dfe5ee; color: var(--navy); }
.bc-escenario.bc-claro .vivo__estacion { background: #fff; border-color: #eef0f4; }
.bc-escenario.bc-claro .vivo__oigo button, .bc-escenario.bc-claro .vivo__control button, .bc-escenario.bc-claro .vivo__mios select { background: #fff; border-color: #d5dbe5; color: #5a6275; }
.bc-escenario.bc-claro .vivo__oigo button.is-activo, .bc-escenario.bc-claro .vivo__control button.is-activo { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ===== Pulso: en qué tiempo del compás va el click (cuadritos, como en un teclado) ===== */
.pb-pulso { display: flex; align-items: center; gap: 6px; margin-top: .55rem; }
.pb-pulso i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; background: #e6eaf1; border: 1px solid #d5dbe5; font-style: normal; font-size: .72rem; font-weight: 800; color: #8a94a8; }
.pb-pulso i.is-medio { margin-left: 8px; } /* 6/8: los dos grupos de tres, separados */
.pb-pulso i.is-activo { color: #fff; }
.pb-pulso i.is-uno.is-activo { color: #14213d; }
.pb-pulso i.is-uno { border-color: #c9a227; border-width: 2px; }
.pb-pulso i.is-medio { border-color: #b8c2d6; border-width: 2px; }
.pb-pulso i.is-activo { background: var(--navy); border-color: var(--navy); transform: scale(1.12); }
.pb-pulso i.is-uno.is-activo { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(212, 167, 44, .7); }
.pb-pulso__compas { margin-left: .5rem; font-size: .8rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 6.5em; }
/* en el escenario: también flota arriba a la derecha mientras suena */
.pb-pulso--flotante { display: none; }
.bc-escenario .pb-pulso--flotante:not([hidden]) { display: flex; position: fixed; top: 12px; right: 14px; z-index: 60; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(13, 20, 36, .88); border: 1px solid #2d3b5c; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.bc-escenario .pb-pulso i { background: #1f2a44; border-color: #3a4870; }
.bc-escenario .pb-pulso i.is-uno { border-color: var(--gold); }
.bc-escenario .pb-pulso i.is-medio { border-color: #7d8bab; }
.bc-escenario .pb-pulso i.is-activo { background: #e8ecf3; border-color: #e8ecf3; }
.bc-escenario .pb-pulso i.is-uno.is-activo { background: var(--gold); border-color: var(--gold); }
.bc-escenario .pb-pulso__compas { color: #c3cbe0; }
.bc-escenario.bc-claro .pb-pulso--flotante:not([hidden]) { background: rgba(255, 255, 255, .94); border-color: #d5dbe5; }
.bc-escenario.bc-claro .pb-pulso i { background: #e6eaf1; border-color: #d5dbe5; }
.bc-escenario.bc-claro .pb-pulso i.is-uno { border-color: #c9a227; }
.bc-escenario.bc-claro .pb-pulso i.is-activo { background: var(--navy); border-color: var(--navy); }
.bc-escenario.bc-claro .pb-pulso i.is-uno.is-activo { background: var(--gold); border-color: var(--gold); }
.bc-escenario.bc-claro .pb-pulso__compas { color: var(--muted); }
@media (max-width: 520px) { .bc-escenario .pb-pulso--flotante:not([hidden]) { top: auto; bottom: 12px; right: 50%; transform: translateX(50%); } }
.bc-escenario .pb-pulso--flotante i { width: 32px; height: 32px; border-radius: 6px; font-size: .95rem; }
.bc-escenario .pb-pulso i { color: #7d8bab; }
.bc-escenario .pb-pulso i.is-activo { color: #0d1424; }
.bc-escenario .pb-pulso--flotante .pb-pulso__compas { font-size: .95rem; }

/* ===== Proyector multimedia (proyector.js): solo la letra, para la congregación ===== */
.con-proyector, .con-proyector body { overflow: hidden; }
.py { position: fixed; inset: 0; z-index: 2147482000; background: #03060f; color: #fff; font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
.py:not(.py--consola):not(.py--controles) { cursor: none; }
.py-ventana { margin: 0; background: #000; overflow: hidden; }

/* --- La pantalla que ve la congregación (las medidas van según su tamaño: también sirve de vista previa) --- */
.py__escena { position: absolute; inset: 0; overflow: hidden; container-type: size;
  background: radial-gradient(120% 95% at 50% 30%, #17305f 0%, #0b1834 42%, #050a18 75%, #020409 100%); }
.py__escena::before { content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(40% 35% at 50% 18%, rgba(212, 167, 44, .16), transparent 70%), radial-gradient(60% 50% at 50% 110%, rgba(64, 110, 200, .18), transparent 70%); }
.py__escena::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.py__marca { position: absolute; right: 3.2cqw; bottom: 4.5cqh; width: 7cqh; min-width: 24px; opacity: .22; z-index: 1; filter: drop-shadow(0 0 1cqh rgba(212, 167, 44, .4)); }
.py--negro .py__escena { background: #000; }
.py--negro .py__escena::before, .py--negro .py__escena::after, .py--negro .py__marca { display: none; }
.py__pantalla { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12cqh 6cqw 9cqh; text-align: center; }
.py__pantalla > * { opacity: 0; transform: translateY(1.2cqh); transition: opacity .35s ease, transform .45s ease; }
.py__pantalla.is-visible > * { opacity: 1; transform: none; }
.py__pantalla.is-visible > .py__sec { transform: translateX(-50%); }
/* nombre de la parte: una etiqueta arriba al centro, con el color de la sección */
.py__sec { position: absolute; top: 5.5cqh; left: 50%; transform: translate(-50%, 1.2cqh); display: inline-flex; align-items: center; gap: .65em; white-space: nowrap;
  padding: .5em 1.25em; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(4px);
  font-size: clamp(10px, 2.5cqh, 30px); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #e9edf6; }
.py__sec i { width: .62em; height: .62em; border-radius: 50%; background: var(--c, #d4a72c); box-shadow: 0 0 .9em var(--c, #d4a72c); }
.py__sec--sola { position: static; font-size: clamp(14px, 4cqh, 46px); opacity: .7; transform: translateY(1.2cqh); }
.py__pantalla.is-visible > .py__sec--sola { transform: none; }
.py__letra { max-width: 88cqw; font-weight: 700; line-height: 1.24; letter-spacing: -.005em; color: #fff; text-wrap: balance;
  text-shadow: 0 .05em .3em rgba(0, 0, 0, .6), 0 0 1.2em rgba(70, 120, 220, .18); }
.py__letra p { margin: 0; }
.py__letra p + p { margin-top: .34em; }
/* el título de la canción (antes de que se cante) */
.py__titulo { display: flex; flex-direction: column; align-items: center; }
.py__titulo img { display: block; width: clamp(48px, 15cqh, 180px); filter: drop-shadow(0 0 2.5cqh rgba(212, 167, 44, .45)); }
.py__titulo h1 { margin: 3cqh 0 0; color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(24px, 10.5cqh, 128px); font-weight: 700; line-height: 1.02; letter-spacing: .005em; text-shadow: 0 .05em .4em rgba(0, 0, 0, .6); }
.py__raya { display: block; width: 14cqh; height: 2px; margin: 2.6cqh 0 0; background: linear-gradient(90deg, transparent, #d4a72c, transparent); }
.py__titulo p { margin: 2.2cqh 0 0; font-size: clamp(12px, 3.4cqh, 40px); letter-spacing: .08em; color: #c9d2e6; }

/* --- Una sola pantalla: los controles aparecen abajo al mover el mouse --- */
.py__cab { display: none; }
.py__panel { position: absolute; left: 50%; bottom: 16px; z-index: 5; transform: translate(-50%, 12px); width: min(1100px, calc(100vw - 32px)); display: grid; gap: 10px;
  padding: 12px; border-radius: 16px; background: rgba(10, 18, 38, .9); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 48px rgba(0, 0, 0, .5); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.py--controles .py__panel { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.py__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.py__barra button { border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; padding: 7px 12px; background: rgba(255, 255, 255, .06); color: #e8ecf3;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s; }
.py__barra button:hover { background: rgba(255, 255, 255, .12); }
.py__barra button.is-activo { background: #e8ecf3; color: #0b1222; border-color: #e8ecf3; }
.py__barra [data-py="ventana"], .py__barra [data-py="dejar"] { background: rgba(212, 167, 44, .16); border-color: rgba(212, 167, 44, .5); color: #f3d27a; }
.py__barra [data-py="salir"] { background: transparent; color: #ffb3b3; border-color: rgba(255, 120, 120, .35); }
.py__estado { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9aa6bf; font-size: 13px; padding: 0 4px; }
.py__adelanto { display: inline-flex; align-items: center; gap: 6px; color: #c3cbe0; font-size: 13px; }
.py__adelanto button { padding: 4px 10px; }
.py__adelanto b { min-width: 3.2em; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
/* las partes de la canción: un clic la proyecta */
.py__partes { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; scrollbar-color: #3a4870 transparent; }
.py__parte { --c: #6b7280; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 210px; padding: 8px 10px; text-align: left;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); color: #e8ecf3; font-family: inherit; cursor: pointer;
  border-left: 4px solid var(--c); transition: background .15s, transform .15s, box-shadow .15s; }
.py__parte:hover { background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.py__circ { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--c); color: var(--c); font-size: 11px; font-weight: 800; }
.py__ptxt { display: grid; min-width: 0; }
.py__ptxt b { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py__ptxt b sup { font-size: 10px; color: #9aa6bf; letter-spacing: 0; }
.py__ptxt small { font-size: 12px; color: #9aa6bf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.py__ptiempo { font-size: 11px; color: #7d8bab; font-variant-numeric: tabular-nums; }
.py__parte.is-actual { background: linear-gradient(135deg, rgba(212, 167, 44, .28), rgba(212, 167, 44, .1)); border-color: rgba(212, 167, 44, .7); border-left-color: #d4a72c;
  box-shadow: 0 0 0 1px rgba(212, 167, 44, .35), 0 8px 22px rgba(212, 167, 44, .18); }
.py__parte.is-actual .py__circ { background: #d4a72c; border-color: #d4a72c; color: #14213d; }
.py__parte.is-actual .py__ptxt small { color: #f3e3b5; }
.py__parte.is-siguiente { border-style: dashed; border-left-style: solid; }
.py__parte.is-siguiente::after { content: "Sigue"; grid-column: 1 / -1; justify-self: start; margin-top: -2px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7d8bab; }

/* --- Consola: con la ventana del proyector abierta, aquí se ve la vista previa y las partes siempre a la vista --- */
.py--consola { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: radial-gradient(120% 80% at 50% 0%, #121d38 0%, #070c19 70%); cursor: default; }
.py--consola .py__cab { display: flex; align-items: center; gap: 14px; padding: 14px 22px 0; }
.py__vivo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(224, 49, 49, .15); color: #ff8787; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.py__vivo i { width: 8px; height: 8px; border-radius: 50%; background: #e03131; animation: vivo-pulso 1.6s infinite; }
.py__cancion { font-family: "Cormorant Garamond", Georgia, serif; font-size: 26px; font-weight: 700; }
.py__ayuda { margin-left: auto; color: #7d8bab; font-size: 13px; }
.py--consola .py__escena { position: relative; inset: auto; align-self: center; justify-self: center; aspect-ratio: 16 / 9; height: calc(100% - 24px); width: auto; max-width: calc(100vw - 48px); margin: 12px 0;
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 6px rgba(212, 167, 44, .12), 0 24px 60px rgba(0, 0, 0, .6); }
.py--consola .py__panel { position: static; transform: none; width: auto; margin: 0 22px 18px; opacity: 1; pointer-events: auto; }
.py--consola .py__partes { flex-wrap: wrap; max-height: 150px; overflow-y: auto; }
/* --- La ventana del proyector --- */
.py--sola { cursor: none; }
.py__completa { position: absolute; left: 50%; bottom: 22px; z-index: 6; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; padding: 10px 18px;
  background: rgba(10, 18, 38, .85); color: #fff; font: 600 15px/1.2 "Inter", system-ui, sans-serif; cursor: pointer; }
.py--sola:hover .py__completa { cursor: pointer; }
.py__completa small { color: #9aa6bf; font-weight: 500; }
.py--en-ventana { position: fixed; inset: 0; }
.pb__icono--proyector { --c: #e8590c; }
/* Sincronía sin pistas: ajustar al tiempo y llenar por compases; avisos de la guía generada */
.sinc__casilla { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--navy); }
.sinc__llenar { font: inherit; font-size: .8rem; padding: .3rem .5rem; border-radius: 8px; cursor: pointer; }
.bc-escenario .sinc__casilla { color: #e8ecf3; }
.pb__avisos small { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Ir a una parte: el nombre de cada parte se puede tocar (con sincronía) */
.bc-hoja--saltar .hc-tit { cursor: pointer; border-radius: 6px; transition: background .15s; }
.bc-hoja--saltar .hc-tit:hover { background: #fff6dc; }
.bc-hoja--saltar .hc-tit:hover strong::after { content: "  ↪ ir aquí"; font-size: .72em; font-weight: 600; letter-spacing: .02em; text-transform: none; color: #b7791f; }
.bc-escenario .bc-hoja--saltar .hc-tit:hover { background: #2a3550; }
.bc-escenario .bc-hoja--saltar .hc-tit:hover strong::after { color: var(--gold); }
/* "↪ CORO 1": el líder lleva a la banda a otra parte (hasta que llega el salto) */
.vivo-salto { position: fixed; top: 18px; left: 50%; z-index: 70; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 14px;
  background: linear-gradient(135deg, #d4a72c, #f3d27a); color: #14213d; box-shadow: 0 12px 34px rgba(0, 0, 0, .35); animation: vivo-salto-entra .25s ease-out; transition: opacity .35s, transform .35s; }
.vivo-salto span { font-size: 28px; font-weight: 800; line-height: 1; }
.vivo-salto strong { font-size: 24px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.vivo-salto small { font-size: 13px; font-weight: 600; opacity: .8; }
.vivo-salto.is-fuera { opacity: 0; transform: translate(-50%, -10px); }
@keyframes vivo-salto-entra { from { opacity: 0; transform: translate(-50%, -12px) scale(.96); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 600px) { .vivo-salto { flex-wrap: wrap; justify-content: center; width: calc(100vw - 32px); } .vivo-salto small { width: 100%; text-align: center; } }

/* Duración de los acordes (DO:2): oculta; con "⏱ Duraciones" (y en la vista previa del editor) se ve chiquita */
.hc-dur { display: none; }
.hc-dur--fija { display: inline; visibility: hidden; }
.hc-ver-dur .hc-dur { display: inline-block; visibility: visible; margin-left: .15em; padding: 0 .3em; border-radius: 4px; background: #e8f1ff; color: #3b5b9a;
  font-size: .62em; font-weight: 700; line-height: 1.35; vertical-align: super; }
.hc-ver-dur .hc-dur--fija { display: inline; margin: 0; padding: 0; background: none; font-size: inherit; vertical-align: baseline; color: #6a8ac4; }
.bc-escenario .hc-ver-dur .hc-dur { background: #24345a; color: #b9cdf5; }
.bc-escenario .hc-ver-dur .hc-dur--fija { background: none; color: #8aa6e0; }
.bc-editor__dur { margin-left: auto; color: var(--muted); font-size: .75rem; font-weight: 500; }