/* Fecha: 2026-09-19 */
/* Ruta: /var/www/kdaprojects/public/css/estilos.css */
/* Estilos de KDA Projects: tema oscuro carbón con el verde Kadena Community (#63e038, kda-chain.org) */
/* Todo va por clases porque la CSP no permite estilos inline */

:root {
    --fondo: #121212;
    --panel: #1a1b1e;
    --panel-2: #242529;
    --borde: #2a2b2f;
    --texto: #f5f5f5;
    --texto-2: #9a9a9a;
    --acento: #63e038;
    --acento-2: #7ff05a;
    --sobre-acento: #121212;
    --ok: #2fbf71;
    --aviso: #f2b134;
    --error: #ff5c5c;
    --radio: 12px;
}

/* Tema claro: mismo esquema que el panel de kda-mcp. Se activa con data-theme="light"
   (botón de la cabecera) o por preferencia del sistema si el usuario no ha elegido. */
:root[data-theme="light"] {
    --fondo: #f5f5f5;
    --panel: #ffffff;
    --panel-2: #ededed;
    --borde: #e3e3e3;
    --texto: #1e1f23;
    --texto-2: #6b6b6b;
    --acento: #3f9e22;
    --acento-2: #63e038;
    --sobre-acento: #ffffff;
    --ok: #2a9d5c;
    --aviso: #b8860b;
    --error: #d14343;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --fondo: #f5f5f5;
        --panel: #ffffff;
        --panel-2: #ededed;
        --borde: #e3e3e3;
        --texto: #1e1f23;
        --texto-2: #6b6b6b;
        --acento: #3f9e22;
        --acento-2: #63e038;
        --sobre-acento: #ffffff;
        --ok: #2a9d5c;
        --aviso: #b8860b;
        --error: #d14343;
    }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--fondo);
    color: var(--texto);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--acento-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.35rem; }
p { margin: 0 0 1em; }

.cabecera {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--borde);
    background: var(--panel);
    flex-wrap: wrap;
}
.logo { font-weight: 700; font-size: 1.15rem; color: var(--texto); display: flex; align-items: center; gap: 8px; }
.logo:hover { text-decoration: none; }
.logo-k {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--acento); color: var(--sobre-acento); font-weight: 800;
}
.nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.nav a { padding: 6px 10px; border-radius: 8px; color: var(--texto-2); }
.nav a:hover, .nav a.activo { background: var(--panel-2); color: var(--texto); text-decoration: none; }
.en-proyecto .nav { display: none; }
.en-proyecto .idiomas { margin-left: auto; }
.idiomas { display: flex; gap: 4px; }
.btn-idioma {
    background: transparent; border: 1px solid var(--borde); color: var(--texto-2);
    padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: .8rem;
}
.btn-idioma.activo { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn-tema { background: transparent; border: 1px solid var(--borde); color: var(--texto-2); padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: .9rem; line-height: 1; }
.btn-tema:hover { color: var(--texto); border-color: var(--acento); }

.contenido { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px; }
.pie { text-align: center; color: var(--texto-2); font-size: .85rem; padding: 20px 16px; border-top: 1px solid var(--borde); }
.pixel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Botones y formularios */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--acento); color: var(--sobre-acento); border: 0; padding: 9px 16px;
    border-radius: 8px; cursor: pointer; font-size: .95rem; font-weight: 600;
}
.btn:hover { background: var(--acento-2); text-decoration: none; }
.btn-peligro, .btn-ok { color: #fff; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-sec { background: var(--panel-2); color: var(--texto); border: 1px solid var(--borde); }
.btn-sec:hover { background: var(--borde); }
.btn-peligro { background: var(--error); }
.btn-ok { background: var(--ok); }
.btn-peq { padding: 5px 10px; font-size: .82rem; }

.formulario { max-width: 480px; margin: 0 auto; background: var(--panel); padding: 24px; border-radius: var(--radio); border: 1px solid var(--borde); }
.formulario-ancho { max-width: 800px; }
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .85rem; color: var(--texto-2); margin-bottom: 4px; }
.campo input, .campo textarea, .campo select {
    width: 100%; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde);
    border-radius: 8px; padding: 9px 11px; font: inherit;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: none; border-color: var(--acento); }
.campo textarea { min-height: 140px; resize: vertical; }
.campo small { display: block; color: var(--texto-2); font-size: .78rem; margin-top: 3px; }
.oculto { position: absolute; left: -9999px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fila > .campo { flex: 1; min-width: 160px; }
.acciones-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.enlace-sec { font-size: .9rem; color: var(--texto-2); margin-top: 14px; text-align: center; }

.mensaje { padding: 10px 14px; border-radius: 8px; margin: 12px 0; font-size: .92rem; }
.mensaje-error { background: rgba(255, 92, 92, .12); border: 1px solid var(--error); color: var(--error); }
.mensaje-ok { background: rgba(47, 191, 113, .12); border: 1px solid var(--ok); color: var(--ok); }
.mensaje-aviso { background: rgba(242, 177, 52, .12); border: 1px solid var(--aviso); color: var(--aviso); }
.oculto-bloque { display: none; }

/* Listado */
.portada { margin-bottom: 24px; }
.portada p { color: var(--texto-2); font-size: 1.05rem; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.tarjeta {
    background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; display: flex; flex-direction: column; color: var(--texto);
    transition: transform .15s, border-color .15s;
}
.tarjeta:hover { transform: translateY(-2px); border-color: var(--acento); text-decoration: none; }
.tarjeta-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--panel-2); display: block; }
.tarjeta-sin-img { width: 100%; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--panel-2), var(--borde)); display: flex; align-items: center; justify-content: center; color: var(--texto-2); font-size: 2rem; }
.tarjeta-cuerpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tarjeta h3 { margin: 0; font-size: 1.05rem; }
.tarjeta .autor { color: var(--texto-2); font-size: .82rem; }
.tarjeta .resumen { color: var(--texto-2); font-size: .9rem; flex: 1; }

/* Ficha proyecto */
.ficha { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.ficha-texto { white-space: pre-line; }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 16px 0; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--borde); }
.galeria img:hover { border-color: var(--acento); }
.grande { width: 100%; max-height: 520px; object-fit: contain; border-radius: var(--radio); background: #000; margin-bottom: 8px; }
.donar { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; position: sticky; top: 16px; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr svg { border-radius: 8px; width: 200px; height: 200px; }
.wallet { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; word-break: break-all; background: var(--fondo); padding: 10px; border-radius: 8px; border: 1px solid var(--borde); }
.chain-etq { display: inline-block; background: var(--panel-2); padding: 3px 10px; border-radius: 999px; font-size: .82rem; margin: 8px 0; }
.aviso-donacion { font-size: .78rem; color: var(--texto-2); margin-top: 12px; }

.enlace-bloque { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; }
.enlace-texto { margin: 6px 0; }

/* Meta de donación: barra de progreso por clases de 10 en 10 (la CSP no permite style inline) */
.meta-bloque { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 12px; margin-bottom: 14px; }
.meta-fila { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; margin: 4px 0; }
.meta-sub { color: var(--texto-2); font-size: .75rem; margin-bottom: 6px; }
.barra { height: 8px; background: var(--panel-2); border-radius: 999px; overflow: hidden; margin: 8px 0; }
.barra-relleno { height: 100%; background: var(--acento); border-radius: 999px; transition: width .4s; }
.barra-0 { width: 2%; } .barra-10 { width: 10%; } .barra-20 { width: 20%; } .barra-30 { width: 30%; }
.barra-40 { width: 40%; } .barra-50 { width: 50%; } .barra-60 { width: 60%; } .barra-70 { width: 70%; }
.barra-80 { width: 80%; } .barra-90 { width: 90%; } .barra-100 { width: 100%; }
.donaciones-lista { margin-bottom: 14px; }
.donacion { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; font-size: .8rem; padding: 4px 0; border-bottom: 1px dashed var(--borde); }
.donacion b { text-align: right; }
.meta-compacta { font-size: .78rem; color: var(--texto-2); margin-top: 4px; }
.meta-compacta .barra { margin: 4px 0; height: 6px; }
.meta { color: var(--texto-2); font-size: .88rem; margin-bottom: 12px; }

/* Mis proyectos / editor */
.lista { display: flex; flex-direction: column; gap: 12px; }
.item { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.item-info { flex: 1; min-width: 200px; }
.item-info h3 { margin: 0 0 4px; font-size: 1.05rem; }
.item-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.etq { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.etq-borrador { background: var(--panel-2); color: var(--texto-2); }
.etq-pendiente { background: rgba(242, 177, 52, .2); color: var(--aviso); }
.etq-publicado { background: rgba(47, 191, 113, .2); color: var(--ok); }
.etq-rechazado, .etq-despublicado, .etq-bloqueado { background: rgba(255, 92, 92, .2); color: var(--error); }
.etq-aprobado { background: rgba(47, 191, 113, .2); color: var(--ok); }
.etq-pendiente_admin, .etq-pendiente_email { background: rgba(242, 177, 52, .2); color: var(--aviso); }
.cabecera-seccion { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.miniaturas { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.mini { position: relative; width: 120px; }
.mini img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); display: block; }
.mini button { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, .7); color: #fff; border: 0; border-radius: 6px; cursor: pointer; padding: 2px 7px; font-size: .8rem; }
.mini button:hover { background: var(--error); }

/* Panel master */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.pestana { background: transparent; color: var(--texto-2); border: 0; padding: 10px 14px; cursor: pointer; font: inherit; border-bottom: 2px solid transparent; }
.pestana.activo { color: var(--texto); border-bottom-color: var(--acento); }
.filtros { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tabla-envoltorio { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--texto-2); font-weight: 600; font-size: .8rem; text-transform: uppercase; }
td .item-acciones { gap: 6px; }
.resumen-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 20px; }
.caja { background: var(--panel); border: 1px solid var(--borde); border-radius: 10px; padding: 12px; }
.caja b { display: block; font-size: 1.4rem; }
.caja span { color: var(--texto-2); font-size: .8rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
.texto-legal { max-width: 760px; white-space: pre-line; color: var(--texto-2); }

@media (max-width: 800px) {
    .ficha { grid-template-columns: 1fr; }
    .donar { position: static; }
    .cabecera { gap: 10px; }
}