/* ═══════════════════════════════════════════════════════════════════
   CCC · TEMA N.3 PARA LAS PÁGINAS INTERNAS
   ───────────────────────────────────────────────────────────────────
   Una sola piel para cuenta, miembro, admin, editor de contenido,
   panel de ministerio, grupo, grupos, ministerio, blog y certificado.

   Todas esas páginas nacieron del mismo molde y usan los mismos
   nombres de variables (--papel, --tinta, --oro, --hair…), así que
   basta con volver a definirlas aquí para que las diez cambien a la
   vez. Debajo solo se corrigen los pocos casos donde el valor estaba
   escrito a mano o donde el contraste se invierte al oscurecer.

   Oscuro por defecto (como la portada); el botón ☾/☀ alterna y la
   elección se recuerda, compartida con la portada (clave ccc-tema).
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&display=swap');

:root{
  /* Los mismos nombres de siempre, con los valores del N.3 */
  --papel:#08141A;            /* fondo de la página        */
  --panel:#0F1F26;            /* tarjetas y encabezados    */
  --tinta:#ECF5F4;            /* títulos                   */
  --cuerpo:#A9BFC2;           /* texto de lectura          */
  --oro:#2FE0C6;              /* acento (turquesa)         */
  --oro-vivo:#62EDD8;
  --hair:rgba(236,245,244,.14);
  --ok:#6FE3A8;
  --error:#FF9A9A;
  --serif:'Bricolage Grotesque','Segoe UI',sans-serif;
  --caps:'Bricolage Grotesque','Segoe UI',sans-serif;
  --body:'Instrument Sans','Segoe UI',sans-serif;

  /* Propias de esta piel */
  --sobre-oro:#04211D;        /* texto sobre el turquesa   */
  --campo:#16262E;            /* fondo de los campos       */
  --elevado:#172C34;          /* hover de filas y tarjetas */
  --sombra:0 18px 44px rgba(0,0,0,.38);
}

:root[data-tema="claro"]{
  --papel:#F2F7F6;
  --panel:#FFFFFF;
  --tinta:#0D2226;
  --cuerpo:#4E6A6E;
  --oro:#0B8A78;
  --oro-vivo:#0A7263;
  --hair:rgba(13,34,38,.14);
  --ok:#0F7A4C;
  --error:#C0392B;
  --sobre-oro:#F2FFFC;
  --campo:#FFFFFF;
  --elevado:#E4EEEC;
  --sombra:0 14px 36px rgba(13,34,38,.10);
}

/* ── Base ─────────────────────────────────────────────────────── */
body{background:var(--papel);color:var(--cuerpo);}

/* El fondo de nubes celestes era del diseño viejo: fuera. El N.3
   usa fondo plano (el enjambre vive solo en la portada). */
.cloud-bg{display:none!important;}

/* Respiración de los paneles: el molde viejo dejaba huecos enormes
   entre el título, la barra y los contenedores. Se compacta. */
.wrap,.a-wrap,.m-wrap,.p-wrap{padding-top:clamp(20px,3vh,34px)!important;}
section.bloque{margin-top:clamp(20px,3vh,32px)!important;}
.a-titulo,.m-titulo,.p-titulo{font-size:clamp(1.6rem,3.5vw,2.3rem)!important;margin-bottom:6px!important;}
.a-label,.m-label{color:var(--oro);}
.card,.p-card,.anuncio-card,.a-card,.m-card{margin-bottom:16px!important;}
h1,h2,h3,h4,b,strong{color:var(--tinta);}

/* Los títulos del molde viejo eran serif finos; aquí van con la
   display del N.3, más presente. */
.a-titulo,.m-titulo,.p-titulo,h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;}

/* ── Superficies escritas a mano ──────────────────────────────────
   Cada página tenía sus tarjetas con el crema puesto a mano; sobre
   fondo oscuro quedaban como bloques blancos con texto ilegible.
   Se listan todas para que hereden la superficie del tema. */
.card,.p-card,.anuncio-card,.a-card,.m-card,.b-card,.g-card,
.st-card,.stat-card,.mt-tile,.cert,.join-caja,.agr-msg,
.m-modal-frame,.m-modal-panel,.hero-perfil,.lider-hero,
.apertura-bar,.rol-toggle,.qr-box,.campo,.estado{
  background:var(--panel)!important;
  color:var(--cuerpo);
  border-color:var(--hair);
}
.card,.p-card,.anuncio-card,.a-card,.m-card,.b-card,.g-card,
.st-card,.stat-card,.cert,.join-caja{
  border-radius:18px;
  box-shadow:var(--sombra);
}
/* Dentro de esas tarjetas, los títulos siguen siendo la tinta */
.card h1,.card h2,.card h3,.p-card h1,.p-card h2,.p-card h3,
.b-card h1,.b-card h2,.b-card h3,.g-card h2,.g-card h3,
.b-card-tit,.b-card-ex{color:var(--tinta);}
.b-card-ex,.b-card-meta{color:var(--cuerpo);}
/* El botón de Google conserva su marca: fondo claro y texto oscuro */
.btn-google{background:#fff!important;color:#1F1F1F!important;border-color:rgba(0,0,0,.18)!important;}

/* ── Botones ──────────────────────────────────────────────────────
   En el molde viejo el botón usaba la tinta de fondo con texto
   claro; al aclarar la tinta quedaría claro sobre claro, así que
   pasa a llevar el acento con texto oscuro. */
.btn{
  background:var(--oro)!important;
  border-color:var(--oro)!important;
  color:var(--sobre-oro)!important;
  border-radius:999px!important;
  font-family:var(--body);
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
  font-size:.88rem;
  transition:transform .18s,filter .2s,background .2s;
}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.btn:active{transform:translateY(1px);}
.btn.ghost,.btn-sec,.btn.btn-sec{
  background:transparent!important;
  color:var(--oro)!important;
  border-color:var(--hair)!important;
}
.btn.ghost:hover,.btn-sec:hover{background:var(--elevado)!important;}
.btn.danger{
  background:transparent!important;
  color:var(--error)!important;
  border-color:rgba(255,154,154,.45)!important;
}
.btn.danger:hover{background:rgba(255,154,154,.10)!important;}
.btn[disabled],.btn.spin{opacity:.55;}

/* Otros controles del molde viejo con el mismo problema: usaban la
   tinta de fondo con texto claro (quedaría claro sobre claro), o el
   acento de fondo con texto casi blanco (poco contraste). Todos
   pasan al acento con texto oscuro. */
.g-toggle-mapa,.join-btn,.rol-toggle.on,.stat-card.destacada,
.p-btn,.st-badge,.b-chip.activo,.rep-toggle button.on,
.hp-camara,.lh-camara,.nivel-tit .paso{
  background:var(--oro)!important;
  color:var(--sobre-oro)!important;
  border-color:var(--oro)!important;
}
.g-toggle-mapa,.join-btn,.p-btn{border-radius:999px!important;}
/* Los avisos flotantes sí llevan superficie oscura y texto claro */
.a-toast,.p-toast{background:var(--panel)!important;color:var(--tinta)!important;}

/* ── Campos ───────────────────────────────────────────────────── */
input[type=text],input[type=url],input[type=number],input[type=date],
input[type=email],input[type=tel],input[type=password],input[type=search],
textarea,select{
  background:var(--campo)!important;
  color:var(--tinta)!important;
  border:1px solid var(--hair)!important;
  border-radius:12px!important;
}
input::placeholder,textarea::placeholder{color:rgba(169,191,194,.55);}
:root[data-tema="claro"] input::placeholder,
:root[data-tema="claro"] textarea::placeholder{color:rgba(78,106,110,.6);}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--oro)!important;
  box-shadow:0 0 0 3px rgba(47,224,198,.18)!important;
}
label.field,.field{color:var(--oro);}
input[type=file]{color:var(--cuerpo);}

/* ── Tablas ───────────────────────────────────────────────────── */
table{color:var(--cuerpo);}
th{background:var(--panel);color:var(--oro);border-bottom:1px solid var(--hair);}
td{border-bottom:1px solid var(--hair);}
tbody tr:hover{background:var(--elevado);}
.tabla-wrap{border-radius:16px;overflow:hidden;border:1px solid var(--hair);}

/* ── Estados y avisos ─────────────────────────────────────────── */
.estado-on,.an-estado.on{color:var(--ok);background:rgba(111,227,168,.12);}
.estado-off,.an-estado.off{color:var(--error);background:rgba(255,154,154,.12);}
.an-estado{padding:3px 10px;border-radius:999px;}
.msg.ok,.an-msg.ok,.sus-msg.ok{color:var(--ok);}
.msg.err,.an-msg.err,.sus-msg.err{color:var(--error);}
.hint,.a-intro,.filehint,.p-hint{color:var(--cuerpo);}

/* ── Barras de navegación y laterales ─────────────────────────── */
.a-nav,.m-nav,.p-nav{
  background:color-mix(in srgb,var(--papel) 88%,transparent);
  border-bottom:1px solid var(--hair);
  backdrop-filter:blur(10px);
}
.a-logo-txt,.m-logo-txt,.a-volver,.m-volver{color:var(--cuerpo);}
.a-volver:hover,.m-volver:hover{color:var(--oro);}
/* El logo es azul oscuro: sobre fondo oscuro va en pastilla clara */
:root:not([data-tema="claro"]) .a-logo-img,
:root:not([data-tema="claro"]) .m-logo-img{
  background:#fff;border-radius:999px;padding:5px 9px;
}

/* Barra lateral de los paneles (la que ya existía) */
[data-panel-nav],.panel-nav,.nav-lateral{border-right:1px solid var(--hair);}
[data-panel-link],.panel-link{
  color:var(--cuerpo);border-radius:12px;transition:background .18s,color .18s;
}
[data-panel-link]:hover,.panel-link:hover{background:var(--elevado);color:var(--tinta);}
[data-panel-link].activo,.panel-link.activo{
  background:rgba(47,224,198,.14);color:var(--oro);font-weight:700;
}
:root[data-tema="claro"] [data-panel-link].activo,
:root[data-tema="claro"] .panel-link.activo{background:rgba(11,138,120,.12);}

/* ── Menú lateral de los paneles en el celular ────────────────────
   El botón que abre el menú venía con fondo blanco fijo: sobre el
   tema oscuro quedaba blanco sobre blanco y parecía que el menú
   había desaparecido. */
.pl-abrir{
  background:var(--panel)!important;
  color:var(--tinta)!important;
  border:1px solid var(--hair)!important;
  border-radius:999px!important;
}
.pl-abrir b{color:var(--oro)!important;}
.pl-abrir::before{background:var(--tinta)!important;box-shadow:0 5px 0 var(--tinta),0 -5px 0 var(--tinta)!important;}
.pl-side{background:var(--papel)!important;border-color:var(--hair)!important;}
.pl-tapa{background:rgba(0,0,0,.55)!important;}
.pl-link.activo{background:rgba(47,224,198,.14)!important;color:var(--oro)!important;box-shadow:inset 3px 0 0 var(--oro)!important;}
.pl-link:hover{background:var(--elevado)!important;color:var(--tinta)!important;}

/* ── Desplegables de las listas largas (anuncios, actividades…) ── */
.desple{
  background:var(--panel);border:1px solid var(--hair);border-radius:14px;
  margin-bottom:10px;overflow:hidden;
}
.desple > summary{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 16px;cursor:pointer;list-style:none;
  color:var(--tinta);font-weight:600;
}
.desple > summary::-webkit-details-marker{display:none;}
.desple > summary::after{
  content:"⌄";margin-left:auto;color:var(--oro);font-size:1.1rem;
  transition:transform .2s;
}
.desple[open] > summary::after{transform:rotate(180deg);}
.desple > summary:hover{background:var(--elevado);}
.desple-fecha{
  font-size:.74rem;font-weight:800;letter-spacing:.06em;
  color:var(--sobre-oro);background:var(--oro);border-radius:999px;padding:4px 10px;
}
.desple-nuevo{font-size:.72rem;font-style:normal;color:var(--error);}
.desple-estado{font-size:.72rem;color:var(--cuerpo);}
.desple-cuerpo{padding:4px 16px 18px;border-top:1px solid var(--hair);}

/* ── Botón de tema (lo inserta ccc-tema.js) ───────────────────── */
.ccc-tema-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;flex-shrink:0;
  background:var(--panel);border:1px solid var(--hair);
  color:var(--tinta);font-size:1rem;cursor:pointer;line-height:1;
  transition:transform .2s,background .2s,color .2s;
}
.ccc-tema-btn:hover{transform:rotate(15deg);background:var(--oro);color:var(--sobre-oro);}
.ccc-tema-btn.suelto{position:fixed;right:18px;bottom:18px;z-index:90;box-shadow:var(--sombra);}

/* ── Detalles ─────────────────────────────────────────────────── */
::selection{background:var(--oro);color:var(--sobre-oro);}
.a-toast,.toast{background:var(--panel);color:var(--tinta);border:1px solid var(--hair);border-radius:14px;}
hr{border-color:var(--hair);}
a{color:inherit;}