/* =====================================================================
   styles.css — Sistema visual de "notacomidadiaria"
   Mobile-first · sin librerías · tema claro y cálido.
   Tipografías: Inter (cuerpo/UI) · Space Grotesk (marca y títulos).
   ===================================================================== */

:root {
    /* Paleta acordada */
    --verde:        #4B5A2F;  /* verde militar (primario) */
    --verde-prof:   #2E3A1C;  /* verde profundo (contraste) */
    --salvia:       #DCE3CC;  /* bordes y superficies suaves */
    --crema:        #F6F4EC;  /* fondo general */
    --oro:          #E0A431;  /* acento / destacados */
    --terracota:    #C25B3A;  /* pinceladas puntuales */
    --texto:        #23291A;  /* texto principal */
    --suave:        #5C634F;  /* texto suave */

    /* Variantes para estados (hover/active) */
    --verde-hover:  #3c4a26;
    --oro-hover:    #cf9526;
    --terra-hover:  #a84a2e;

    --radio:   16px;
    --radio-s: 11px;
    --sombra:  0 6px 20px rgba(46, 58, 28, 0.08);
    --sombra-suave: 0 2px 8px rgba(46, 58, 28, 0.06);
    --borde:   1px solid var(--salvia);

    --fuente-cuerpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fuente-marca:  'Space Grotesk', var(--fuente-cuerpo);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fuente-cuerpo);
    background-color: #F6F4EC;       /* crema cálido (fondo general) */
    color: var(--texto);
    line-height: 1.5;
}

/* ---------------- Enlaces (regla global: nada de azul ni subrayado) -------- */
a {
    color: inherit;
    text-decoration: none;
}
/* Solo los enlaces dentro de texto corrido van subrayados y en verde,
   pero nunca los que son botones ni los enlaces "volver". */
p a:not(.btn):not(.enlace-volver) {
    color: var(--verde);
    text-decoration: underline;
    font-weight: 600;
}

/* ---------------- Cabecera ---------------- */
.cabecera {
    background: var(--verde);
    color: var(--crema);
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--sombra-suave);
    padding-top: env(safe-area-inset-top);
}

.cabecera-contenido {
    max-width: 720px;
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Marca: única, a la izquierda, Space Grotesk, minúscula, crema, sin subrayado */
.marca {
    font-family: var(--fuente-marca);
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: lowercase;
    color: var(--crema);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.marca:hover { color: #fff; }

/* "Salir" a la derecha: botón sutil translúcido sobre el verde */
.cabecera-contenido .btn-ghost { margin-left: auto; }

/* ---------------- Contenedor ---------------- */
.contenedor {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 16px 40px;
}

.tarjeta-estrecha {
    max-width: 420px;
    margin: 24px auto;
}

/* ---------------- Títulos ---------------- */
.titulo,
.titulo-pagina {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    margin: 4px 0 6px;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.titulo { font-size: 1.55rem; }
.titulo-pagina { font-size: 1.45rem; }

.subtitulo,
.subtitulo-pagina {
    color: var(--suave);
    margin: 0 0 16px;
}

.seccion-titulo {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    font-size: 1.12rem;
    font-weight: 600;
    margin: 26px 4px 12px;
}

.seccion-mini {
    font-size: 0.95rem;
    color: var(--suave);
    margin: 16px 0 8px;
}

.saludo { font-size: 1.12rem; margin: 6px 4px 18px; }
.saludo strong { color: var(--verde-prof); }

/* ---------------- Tarjetas ---------------- */
.tarjeta {
    background: #fff;
    border: var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    margin-bottom: 16px;
}

/* Tarjeta destacada: sin barra lateral gruesa; acento sutil con
   un fino borde superior dorado + sombra suave. */
.tarjeta-destacada {
    border-top: 3px solid var(--oro);
    background: #fff;
}

.tarjeta-titulo {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    margin: 0 0 8px;
    font-size: 1.22rem;
    font-weight: 600;
}

.tarjeta-texto { margin: 0 0 16px; color: var(--suave); }

/* ---------------- Formularios ---------------- */
label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--verde-prof);
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select {
    width: 100%;
    padding: 12px 14px;
    border: var(--borde);
    border-radius: var(--radio-s);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--texto);
}

input:focus,
select:focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px rgba(75, 90, 47, 0.16);
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--texto);
    margin-top: 12px;
}
.checkbox input { width: auto; }

.campo-inline {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 12px;
    color: var(--verde-prof);
}
.campo-inline input { margin-top: 6px; }

.form-linea { margin-top: 8px; }

/* =====================================================================
   SISTEMA DE BOTONES (reutilizable en toda la app)
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.1;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .04s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }

/* Acción PRINCIPAL: dorado con texto verde profundo */
.btn-cta {
    background-color: var(--oro);
    color: var(--verde-prof);
    box-shadow: 0 4px 14px rgba(224, 164, 49, 0.35);
}
.btn-cta:hover { background-color: var(--oro-hover); }
.btn-cta:active { background-color: #bd8820; }

/* Acción primaria estándar: verde con texto crema */
.btn-primary {
    background-color: var(--verde);
    color: var(--crema);
}
.btn-primary:hover { background-color: var(--verde-hover); }
.btn-primary:active { background-color: #33401f; }

/* Acción secundaria / administración: contorno verde */
.btn-outline {
    background-color: transparent;
    border-color: var(--verde);
    color: var(--verde);
}
.btn-outline:hover { background-color: rgba(75, 90, 47, 0.08); }
.btn-outline:active { background-color: rgba(75, 90, 47, 0.16); }

/* Botón sutil para la cabecera (sobre el verde) */
.btn-ghost {
    background-color: rgba(246, 244, 236, 0.16);
    border-color: rgba(246, 244, 236, 0.45);
    color: var(--crema);
}
.btn-ghost:hover { background-color: rgba(246, 244, 236, 0.28); }

/* Acción destructiva: terracota */
.btn-danger {
    background-color: var(--terracota);
    color: #fff;
}
.btn-danger:hover { background-color: var(--terra-hover); }

/* Tamaños */
.btn-sm { padding: 8px 14px; font-size: 0.86rem; }
.btn-lg { padding: 15px 24px; font-size: 1.08rem; }
.btn-block { width: 100%; }

/* Botón principal de formularios a lo ancho por defecto */
form > .btn-primary,
form > .btn-cta { width: 100%; margin-top: 18px; }

/* Botonera genérica (fila que envuelve) */
.botonera { display: flex; flex-wrap: wrap; gap: 10px; }

/* Acciones de la tarjeta destacada: principal grande + secundario discreto */
.cta-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cta-actions .btn { width: 100%; }

/* Rejilla de administración: 2 columnas en móvil */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.admin-grid .btn { width: 100%; }

/* ---------------- Alertas ---------------- */
.alerta {
    border-radius: var(--radio-s);
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    border: 1px solid transparent;
}
.alerta-error { background: #f7e2dc; color: #8a3318; border-color: #e6b8a8; }
.alerta-ok    { background: #e7efd6; color: #3f5320; border-color: #c8d8a6; }
.alerta-aviso { background: #fbf0d4; color: #7a5a16; border-color: #efd9a3; }

/* ---------------- Buscador de grupos ---------------- */
.lista-busqueda {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    border: var(--borde);
    border-radius: var(--radio-s);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sombra);
}
.item-busqueda {
    padding: 11px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--salvia);
}
.item-busqueda:last-child { border-bottom: none; }
.item-busqueda:hover { background: var(--crema); }

/* ---------------- Selector de grupo ---------------- */
.selector-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.selector-grupo label { margin: 0; }
.selector-grupo select { width: auto; flex: 1 1 160px; }

/* ---------------- Partidos / marcador ---------------- */
.partido { padding: 16px; }
.partido-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.partido-fecha { font-size: 0.82rem; color: var(--suave); }
.partido-bloqueado { background: #fbfaf3; }

.marcador {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 6px 0 12px;
}
.equipo { font-weight: 600; font-size: 0.98rem; color: var(--texto); }
.equipo-local { text-align: right; }
.equipo-visitante { text-align: left; }
.vs { color: var(--suave); font-weight: 700; }

.num {
    width: 54px;
    text-align: center;
    padding: 10px 6px;
    font-size: 1.1rem;
    font-weight: 700;
}

.marcador-lectura .resultado {
    font-family: var(--fuente-marca);
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--verde-prof);
    padding: 0 6px;
    white-space: nowrap;
}

.partido-form { text-align: center; }
.partido-form .btn { width: 100%; }

.partido-tupron {
    border-top: 1px dashed var(--salvia);
    padding-top: 10px;
    font-size: 0.92rem;
    color: var(--suave);
}
.puntos {
    color: var(--verde-prof);
    background: #f6e6bd;
    border-radius: 999px;
    padding: 2px 9px;
    font-weight: 700;
}
.sin-pron { font-style: italic; }

.form-resultado .campo-inline { margin-top: 14px; }
.form-resultado .btn { width: 100%; margin-top: 14px; }

/* ---------------- Etiquetas ---------------- */
.etiqueta {
    font-size: 0.7rem;
    background: var(--salvia);
    color: var(--verde-prof);
    padding: 2px 9px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 700;
}
.etiqueta-admin { background: #f6e6bd; color: #7a5a16; }
.etiqueta-ok { background: #d7e6b8; color: #3f5320; }

/* ---------------- Listas de usuarios ---------------- */
.lista-usuarios { list-style: none; margin: 0; padding: 0; }
.usuario-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--salvia);
}
.usuario-fila:last-child { border-bottom: none; }
.usuario-datos { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.usuario-nombre { font-weight: 600; }
.usuario-username { color: var(--suave); font-size: 0.9rem; }

/* ---------------- Ranking (podio en dorado) ---------------- */
.ranking { list-style: none; margin: 0; padding: 0; }
.ranking-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 10px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
}
.ranking-pos {
    width: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 1.15rem;
    font-family: var(--fuente-marca);
    color: var(--suave);
}
.ranking-nombre { flex: 1; font-weight: 600; }
.ranking-pts {
    font-family: var(--fuente-marca);
    font-weight: 700;
    color: var(--verde-prof);
}

/* Podio: 1º/2º/3º resaltados con dorado */
.podio { background: #fcf6e6; border-color: #f0dca8; }
.podio .ranking-pos { color: #b5851d; }
.podio-1 {
    background: linear-gradient(180deg, #fdefc6, #f8e3a0);
    border-color: var(--oro);
    box-shadow: 0 4px 14px rgba(224, 164, 49, 0.25);
}
.podio-1 .ranking-pts { color: #9c6f12; }

/* Tu propia fila */
.soy-yo { outline: 2px solid var(--verde); outline-offset: -2px; }

/* ---------------- Varios ---------------- */
.dato-enlace { font-size: 0.9rem; color: var(--suave); word-break: break-all; }
.dato-enlace a { color: var(--verde); text-decoration: underline; }
.texto-centrado { text-align: center; }

/* Enlace "volver" estilizado como botón de texto (sin azul ni subrayado) */
.enlace-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--verde);
    font-weight: 600;
}
.enlace-volver:hover { color: var(--verde-prof); }

code {
    background: var(--salvia);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.9em;
}

/* ---------------- Pie ---------------- */
.pie {
    text-align: center;
    color: var(--suave);
    padding: 24px 16px calc(28px + env(safe-area-inset-bottom));
}

/* =====================================================================
   HUB SOCIAL (index.php)
   ===================================================================== */

/* ----- Hero de bienvenida ----- */
.hero {
    margin: 6px 2px 18px;
}
.hero-saludo {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--suave);
}
.hero-saludo strong { color: var(--verde-prof); }
.hero-titulo {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    font-size: 1.6rem;
    line-height: 1.18;
    margin: 0 0 8px;
    letter-spacing: -0.02em;
}
.hero-marca { color: var(--verde); }
.hero-sub { margin: 0; color: var(--suave); }

/* ----- Cabecera de tarjeta con acción a la derecha ----- */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.card-head .tarjeta-titulo { margin: 0; }
.conteo {
    display: inline-block;
    min-width: 26px;
    text-align: center;
    background: var(--salvia);
    color: var(--verde-prof);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 1px 9px;
    border-radius: 999px;
    margin-left: 4px;
}

/* ----- Miembros (avatares) ----- */
.miembros-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 10px;
}
.miembro {
    position: relative;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}
.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-family: var(--fuente-marca);
    font-size: 1.05rem;
    box-shadow: var(--sombra-suave);
    user-select: none;
}
.miembro-nombre {
    font-size: 0.78rem;
    color: var(--texto);
    line-height: 1.1;
    max-width: 64px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.avatar-admin {
    position: absolute;
    top: -2px;
    right: 8px;
    font-size: 0.8rem;
    color: var(--oro);
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.invite-msg {
    margin: 14px 0 0;
    font-size: 0.9rem;
    color: var(--verde-prof);
    background: #eef3df;
    border: 1px solid #cfe0a8;
    border-radius: var(--radio-s);
    padding: 10px 12px;
}

/* ----- Etiqueta "Especial Mundial" ----- */
.badge-especial {
    display: inline-block;
    background: var(--oro);
    color: var(--verde-prof);
    font-weight: 700;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    padding: 4px 11px;
    border-radius: 999px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(224,164,49,0.35);
}

/* ----- "Pronto en el hub" (chips) ----- */
.proximamente { margin-bottom: 16px; }
.chips-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.chips-row::-webkit-scrollbar { display: none; }
.chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--salvia);
    border-radius: 999px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--verde-prof);
    cursor: pointer;
    box-shadow: var(--sombra-suave);
    transition: transform .05s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--oro); }
.chip:active { transform: translateY(1px); }
.chip-emoji { font-size: 1.05rem; }
.chip-pronto {
    font-style: normal;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: var(--oro);
    padding: 2px 7px;
    border-radius: 999px;
}

/* ----- Administración recogida ----- */
.admin-discreto { background: #fbfaf3; }
.admin-discreto .seccion-mini { margin: 0 0 10px; }

/* ----- Mini-toast ----- */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(12px);
    background: var(--verde-prof);
    color: var(--crema);
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: var(--sombra);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 50;
    max-width: 90vw;
    text-align: center;
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =====================================================================
   ASISTENTE DE REGISTRO (register.php)
   ===================================================================== */

.wizard-pasos { margin: 4px 0 20px; }
.wizard-barra {
    height: 6px;
    background: var(--salvia);
    border-radius: 999px;
    overflow: hidden;
}
.wizard-barra span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--oro);
    border-radius: 999px;
    transition: width .35s ease;
}
.wizard-etiquetas {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}
.wizard-etiquetas span {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--suave);
    flex: 1;
    text-align: center;
    transition: color .2s ease;
}
.wizard-etiquetas span.activa { color: var(--verde-prof); }

/* Pasos: solo visible el activo, con una transición suave de entrada */
.wizard-step { display: none; }
.wizard-step.is-active {
    display: block;
    animation: pasoEntra .28s ease;
}
@keyframes pasoEntra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.paso-titulo {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    font-size: 1.25rem;
    margin: 2px 0 4px;
}
.paso-ayuda { margin: 0 0 6px; color: var(--suave); font-size: 0.92rem; }
.resaltado { color: var(--verde); }

.step-error {
    display: none;
    margin: 10px 0 0;
    color: #8a3318;
    background: #f7e2dc;
    border: 1px solid #e6b8a8;
    border-radius: var(--radio-s);
    padding: 9px 12px;
    font-size: 0.9rem;
}

.wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}
.wizard-nav .btn { min-width: 120px; }
.wizard-nav .btn-cta, .wizard-nav .btn-primary { flex: 1; }

.wizard-final { text-align: center; }
.final-emoji { font-size: 3rem; line-height: 1; margin: 6px 0 4px; }

/* =====================================================================
   HUB: guiño del viernes y tarjeta "Próximo plan"
   ===================================================================== */
.viernes-wink {
    display: block;
    background: linear-gradient(100deg, var(--oro), #f0b94f);
    color: var(--verde-prof);
    font-weight: 700;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(224,164,49,0.35);
}
.viernes-wink:hover { filter: brightness(0.97); }

.proximo-plan .pp-titulo {
    font-family: var(--fuente-marca);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--verde-prof);
    margin: 4px 0 4px;
}
.proximo-plan .pp-meta { margin: 0; color: var(--suave); font-size: 0.95rem; }

/* =====================================================================
   PÁGINA PLANES
   ===================================================================== */

/* Pestañas */
.tabs {
    display: flex;
    gap: 6px;
    background: #fff;
    border: var(--borde);
    border-radius: 999px;
    padding: 5px;
    margin-bottom: 18px;
    position: sticky;
    top: calc(56px + env(safe-area-inset-top));
    z-index: 8;
}
.tab-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--suave);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 9px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.tab-btn.activa { background: var(--verde); color: var(--crema); }
.tab-num {
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
    padding: 0 7px;
    font-size: 0.78rem;
}
.tab-btn:not(.activa) .tab-num { background: var(--salvia); color: var(--verde-prof); }

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: pasoEntra .25s ease; }

.nota-seccion { color: var(--suave); font-size: 0.9rem; margin: 0 2px 14px; }

/* Tarjeta de plan */
.plan-card { padding: 16px; }
.plan-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.plan-titulo {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    font-size: 1.15rem;
    margin: 2px 0 6px;
}
.plan-notas { margin: 0 0 6px; color: var(--texto); }
.plan-lugar { margin: 0 0 6px; color: var(--suave); }
.plan-autor { margin: 0 0 10px; color: var(--suave); font-size: 0.9rem; }
.plan-cuenta { font-size: 0.82rem; color: var(--suave); }

/* Etiqueta de tipo */
.plan-tipo {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    color: #fff;
}
.tipo-espontaneo { background: var(--terracota); }
.tipo-un_dia     { background: var(--verde); }
.tipo-escapada   { background: #6B4FA0; }

/* Votar */
.plan-acciones { display: flex; align-items: center; gap: 12px; }
.voto-cuenta { font-weight: 700; color: var(--verde-prof); }

/* RSVP */
.rsvp-form { margin: 6px 0 10px; }
.rsvp-botones { display: flex; gap: 8px; }
.rsvp-botones .btn { flex: 1; }
.rsvp-listas { border-top: 1px dashed var(--salvia); padding-top: 10px; }
.rsvp-grupo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.rsvp-label { font-size: 0.82rem; font-weight: 700; color: var(--verde-prof); min-width: 86px; }
.rsvp-avatares { display: flex; flex-wrap: wrap; gap: 5px; }
.rsvp-vacio { color: var(--suave); font-size: 0.85rem; font-style: italic; }
.rsvp-no { margin: 4px 0 0; color: var(--suave); font-size: 0.85rem; }

.avatar-sm {
    width: 30px;
    height: 30px;
    font-size: 0.78rem;
    box-shadow: none;
}

/* Editar (details) */
.plan-editar { margin-top: 12px; border-top: 1px dashed var(--salvia); padding-top: 8px; }
.plan-editar summary,
.pasados summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--verde);
    list-style: none;
}
.plan-editar summary::-webkit-details-marker,
.pasados summary::-webkit-details-marker { display: none; }

/* Pasados */
.pasados { margin-top: 12px; }
.pasado-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--salvia);
    flex-wrap: wrap;
}
.pasado-item:last-child { border-bottom: none; }
.pasado-titulo { font-weight: 600; flex: 1; }
.pasado-fecha { color: var(--suave); font-size: 0.85rem; }

/* Roulette: revelado */
.reveal-card { text-align: center; border-top: 3px solid var(--oro); }
.reveal-pre { color: var(--suave); margin: 0 0 8px; }
.reveal-anim .reveal-final { animation: revelar .5s ease; }
@keyframes revelar {
    0%   { opacity: 0; transform: scale(0.85) rotate(-4deg); }
    60%  { opacity: 1; transform: scale(1.04) rotate(1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
.reveal-cta { margin: 10px 0 0; color: var(--suave); font-size: 0.9rem; }

/* Bolsa secreta */
.bolsa-conteos { display: flex; flex-wrap: wrap; gap: 8px; }
.bolsa-chip {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    padding: 5px 12px;
    border-radius: 999px;
}

/* =====================================================================
   FRANJA SUPERIOR (banner) — banda ancha, no pantalla completa
   ===================================================================== */
.hub-banner {
    position: relative;
    margin: -18px -16px 18px;          /* sangra hasta los bordes del contenedor */
    min-height: 160px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: var(--verde);     /* por defecto, verde sólido */
    color: var(--crema);
    border-radius: 0 0 18px 18px;
}
.hub-banner.has-img {
    background-size: cover;       /* la foto llena la banda sin deformarse */
    background-position: center;
    background-repeat: no-repeat; /* nunca en mosaico */
}
/* Velo oscuro para que el texto se lea sobre la foto */
.hub-banner.has-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35,41,26,.35), rgba(35,41,26,.78));
}
.hub-banner-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 18px 18px calc(18px + env(safe-area-inset-left, 0));
    padding-left: 18px;
    padding-right: 18px;
}
.hub-banner .hero-saludo { color: rgba(246,244,236,.92); margin: 0 0 4px; }
.hub-banner .hero-saludo strong { color: #fff; }
.hub-banner .hero-titulo { color: #fff; margin: 0 0 6px; font-size: 1.55rem; }
.hub-banner .hero-marca { color: var(--oro); }
.hub-banner .hero-sub { color: rgba(246,244,236,.9); margin: 0; }

/* =====================================================================
   TARJETAS-ENLACE del hub (toda la superficie es un enlace)
   ===================================================================== */
.cards-hub { display: grid; gap: 12px; margin-bottom: 18px; }

.card-link {
    display: block;
    position: relative;
    background: #fff;
    border: var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: transform .06s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-link:hover { box-shadow: 0 10px 26px rgba(46,58,28,.16); border-color: var(--oro); }
.card-link:active { transform: translateY(1px); }

.card-link-inner { position: relative; z-index: 1; display: block; }
.card-link-titulo {
    display: block;
    font-family: var(--fuente-marca);
    font-weight: 600;
    font-size: 1.22rem;
    color: var(--verde-prof);
}
.card-link-sub { display: block; color: var(--suave); margin-top: 4px; font-size: 0.95rem; }
.card-link-sub strong { color: var(--verde-prof); }

/* Sin imagen: acento dorado en la tarjeta destacada (como antes) */
.card-link.card-destacada:not(.has-img) { border-top: 3px solid var(--oro); }

/* Con imagen: fondo cover + velo, texto en claro */
.card-link.has-img {
    min-height: 150px;
    display: flex;
    align-items: flex-end;
    background-size: cover;        /* llena la tarjeta sin deformar */
    background-position: center;
    background-repeat: no-repeat;  /* nunca en mosaico */
    border-color: transparent;
}
.card-link.has-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35,41,26,.12), rgba(35,41,26,.74));
}
.card-link.has-img .card-link-titulo { color: #fff; }
.card-link.has-img .card-link-sub { color: rgba(255,255,255,.92); }
.card-link.has-img .card-link-sub strong { color: #fff; }
/* La etiqueta dorada se mantiene legible sobre foto */
.card-link .badge-especial { position: relative; z-index: 1; }

/* Tarjetas-enlace de administración (pequeñas, en rejilla) */
.cards-admin { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.card-mini { padding: 14px 16px; }
.card-mini .card-link-titulo { font-size: 1rem; }

/* =====================================================================
   PANEL APARIENCIA (admin)
   ===================================================================== */
.slot-preview {
    width: 100%;
    height: 130px;
    border-radius: var(--radio-s);
    background-color: var(--salvia);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--suave);
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.slot-preview.banner { height: 96px; }
.slot-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.slot-form input[type="file"] { flex: 1 1 200px; font-size: 0.9rem; }

/* ---------------- Pantallas mayores ---------------- */
@media (min-width: 560px) {
    .marca { font-size: 1.35rem; }
    .cta-actions { flex-direction: row; align-items: center; }
    .cta-actions .btn { width: auto; }
    .cta-actions .btn-cta { flex: 0 0 auto; }
    .admin-grid { grid-template-columns: repeat(3, 1fr); }
    .hero-titulo { font-size: 1.85rem; }
    .hub-banner .hero-titulo { font-size: 1.85rem; }
    .cards-hub { grid-template-columns: 1fr 1fr; }
    .cards-hub .card-link:first-child { grid-column: 1 / -1; } /* Porra ocupa toda la fila */
    .cards-admin { grid-template-columns: repeat(4, 1fr); }
}

/* =====================================================================
   LA NOTA DE LA COMIDA DIARIA (comida.php) + tarjeta del hub
   ===================================================================== */

/* Tarjeta estrella del hub: acento dorado sin foto */
.card-link.card-comida:not(.has-img) { border-top: 3px solid var(--oro); }
.card-link.card-comida.has-img { min-height: 165px; }

/* Foto de una comida */
.comida-foto {
    position: relative;
    border-radius: var(--radio-s);
    overflow: hidden;
    background: var(--salvia);
    margin-bottom: 12px;
}
.comida-foto img { display: block; width: 100%; height: auto; }

/* Burbuja con la nota media sobre la foto */
.nota-burbuja {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--oro);
    color: var(--verde-prof);
    font-family: var(--fuente-marca);
    font-weight: 700;
    font-size: 1rem;
    padding: 4px 11px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18);
}

.comida-card { padding: 14px; }
.comida-info { }
.comida-plato {
    font-family: var(--fuente-marca);
    color: var(--verde-prof);
    font-size: 1.15rem;
    margin: 0 0 6px;
}
.comida-autor { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 0.9rem; margin-bottom: 6px; }
.comida-nota { margin: 0 0 6px; color: var(--texto); }
.comida-media { margin: 0 0 10px; color: var(--suave); }
.comida-media strong { color: var(--verde-prof); }
.comida-tuya { margin: 0 0 8px; color: var(--suave); font-style: italic; }

/* Chips de valoración 1..10 */
.rating-form { border-top: 1px dashed var(--salvia); padding-top: 10px; }
.rating-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-nota {
    border: 1px solid var(--salvia);
    background: #fff;
    color: var(--verde-prof);
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, transform .05s ease;
}
.chip-nota:hover { border-color: var(--oro); }
.chip-nota:active { transform: translateY(1px); }
.chip-nota.activa { background: var(--oro); color: var(--verde-prof); border-color: var(--oro); }
.tu-nota { display: inline-block; margin-top: 8px; font-size: 0.85rem; color: var(--suave); }

/* Filtro de periodo (ranking) */
.periodo-filtro { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-periodo {
    border: 1px solid var(--salvia);
    background: #fff;
    color: var(--verde-prof);
    font-weight: 600;
    font-size: 0.88rem;
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
}
.chip-periodo.activa { background: var(--verde); color: var(--crema); border-color: var(--verde); }

/* Miniatura en el ranking */
.rank-thumb {
    width: 44px; height: 44px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    background-color: var(--salvia);
    flex: 0 0 auto;
}
.ranking-fila .ranking-nombre small { color: var(--suave); }

/* Ganadores */
.ganador-card { padding: 14px; }
.badge-periodo {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
    color: #fff;
}
.badge-semana { background: var(--verde); }
.badge-mes { background: #6B4FA0; }
.ganador-cuerpo { display: flex; gap: 12px; align-items: center; }
.ganador-foto {
    width: 84px; height: 84px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--salvia);
    flex: 0 0 auto;
}
.ganador-datos { flex: 1; }
.ganador-periodo { font-size: 0.82rem; color: var(--suave); font-weight: 600; }
.ganador-card .comida-plato { margin: 2px 0 4px; }

/* =====================================================================
   BLOQUE PORRA + RANKING (el ranking va "dentro" de la porra)
   ===================================================================== */
.porra-bloque { margin-bottom: 16px; }
.porra-bloque > .card-link {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ranking-sublink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--verde);
    color: var(--crema);
    text-decoration: none;
    font-weight: 600;
    padding: 12px 18px;
    border: 1px solid var(--verde);
    border-top: none;
    border-radius: 0 0 var(--radio) var(--radio);
    transition: background-color .15s ease;
}
.ranking-sublink:hover { background: var(--verde-hover); }
.ranking-sublink:active { background: #33401f; }

/* =====================================================================
   GALERÍA DE FOTOS (fotos.php) + tira de destacadas del hub
   ===================================================================== */

/* Tira de destacadas en el hub */
.fotos-destacadas {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin: -6px 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.fotos-destacadas::-webkit-scrollbar { display: none; }
.fd-thumb {
    flex: 0 0 auto;
    width: 72px; height: 72px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: var(--salvia);
    border: 2px solid var(--oro);
}

/* Rejilla de miniaturas */
.foto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
.foto-thumb {
    position: relative;
    padding: 0;
    border: none;
    background: var(--salvia);
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1 / 1;
}
.foto-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.foto-estrella {
    position: absolute;
    top: 6px; left: 6px;
    color: var(--oro);
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.foto-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55));
}
.foto-like { color: #fff; font-weight: 700; font-size: 0.82rem; }
.foto-overlay .avatar-sm { width: 24px; height: 24px; font-size: 0.68rem; box-shadow: none; }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.lightbox[hidden] { display: none; }
.lb-backdrop { position: absolute; inset: 0; background: rgba(20,24,15,0.82); }
.lb-caja {
    position: relative;
    z-index: 1;
    background: #fff;
    border-radius: var(--radio);
    max-width: 560px;
    width: 100%;
    max-height: 92vh;
    overflow: auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.lb-cerrar {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 2;
    width: 36px; height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.lb-imgwrap { background: #000; border-radius: var(--radio) var(--radio) 0 0; }
.lb-img { display: block; width: 100%; max-height: 64vh; object-fit: contain; }
.lb-info { padding: 14px 16px 18px; }
.lb-caption { font-weight: 600; color: var(--texto); margin: 0 0 4px; }
.lb-meta { color: var(--suave); font-size: 0.88rem; margin: 0 0 12px; }
.lb-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lb-acciones .btn.liked { background: var(--terracota); border-color: var(--terracota); color: #fff; }
.lb-caption-form { display: flex; gap: 8px; }
.lb-caption-form input[type="text"] { flex: 1; }

@media (min-width: 560px) {
    .foto-grid { grid-template-columns: repeat(4, 1fr); }
    .fd-thumb { width: 84px; height: 84px; }
}

/* =====================================================================
   GASTOS (gastos.php)
   ===================================================================== */

/* Resumen de saldo */
.saldo-resumen {
    text-align: center;
    font-size: 1.05rem;
    padding: 12px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    border: 1px solid var(--salvia);
}
.saldo-resumen.positivo { background: #e7efd6; color: #3f5320; border-color: #c8d8a6; }
.saldo-resumen.negativo { background: #f7e2dc; color: #8a3318; border-color: #e6b8a8; }
.saldo-resumen.cero { background: #eef3df; color: var(--verde-prof); }

/* Participantes (checkboxes + importe exacto) */
.participantes { display: flex; flex-direction: column; gap: 4px; }
.part-row { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.part-row .part-nombre { flex: 1; }
.part-row .part-exact { width: 110px; }
.reparto-radios { display: flex; gap: 16px; margin-top: 6px; }
.radio-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.radio-inline input { width: auto; }

/* Fila de gasto */
.gasto-fila { padding: 14px; }
.gasto-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gasto-text { display: flex; flex-direction: column; gap: 3px; }
.gasto-desc { font-weight: 600; color: var(--verde-prof); }
.gasto-meta { font-size: 0.85rem; color: var(--suave); }
.gasto-importe { font-family: var(--fuente-marca); font-weight: 700; color: var(--verde-prof); white-space: nowrap; }
.gasto-recibo {
    display: block;
    width: 64px; height: 64px;
    border-radius: 10px;
    background-size: cover; background-position: center;
    background-color: var(--salvia);
    margin-top: 10px;
    border: 1px solid var(--salvia);
}
.gasto-acciones { display: flex; gap: 8px; margin-top: 10px; }

/* Saldos */
.lista-saldos { list-style: none; margin: 0; padding: 0; }
.saldo-fila { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--salvia); }
.saldo-fila:last-child { border-bottom: none; }
.saldo-nombre { flex: 1; font-weight: 600; }
.saldo-valor { font-family: var(--fuente-marca); font-weight: 700; }
.saldo-valor.positivo { color: #3f7a1f; }
.saldo-valor.negativo { color: #b23a1a; }
.saldo-valor.cero { color: var(--suave); }

.lista-deudas { list-style: none; margin: 0; padding: 0; }
.lista-deudas li { padding: 8px 0; border-bottom: 1px solid var(--salvia); }
.lista-deudas li:last-child { border-bottom: none; }
.deuda-importe { font-weight: 700; color: var(--terracota); }

/* Por plan */
.lista-planes-gasto { list-style: none; margin: 0; padding: 0; }
.plan-gasto-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 4px; border-bottom: 1px solid var(--salvia);
    text-decoration: none; color: var(--texto);
}
.lista-planes-gasto li:last-child .plan-gasto-row { border-bottom: none; }
.plan-gasto-row:hover { color: var(--verde); }
.plan-gasto-general { color: var(--suave); }
.plan-gasto-nombre { font-weight: 600; }
.plan-gasto-total { font-family: var(--fuente-marca); font-weight: 700; color: var(--verde-prof); }

/* =====================================================================
   RESEÑAS (resenas.php)
   ===================================================================== */

/* Estrellas seleccionables (sin JS, con radios) */
.estrellas-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.estrellas-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.estrellas-input label {
    font-size: 2rem;
    line-height: 1;
    color: #d6d6c4;
    cursor: pointer;
    margin: 0;
    transition: color .12s ease;
}
.estrellas-input label:hover,
.estrellas-input label:hover ~ label,
.estrellas-input input:checked ~ label { color: var(--oro); }
.estrellas-input input:focus-visible ~ label { outline: 2px solid var(--verde); }

/* Tarjeta de reseña */
.resena-card { padding: 14px; }
.resena-foto {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: var(--radio-s);
    background-size: cover; background-position: center;
    background-color: var(--salvia);
    margin-bottom: 12px;
}
.resena-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.resena-estrellas { color: var(--oro); letter-spacing: 1px; font-size: 0.95rem; }
.resena-titulo { font-family: var(--fuente-marca); color: var(--verde-prof); font-size: 1.15rem; margin: 0 0 6px; }
.resena-desc { margin: 0 0 8px; color: var(--texto); }
.resena-autor { display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 0.9rem; margin: 0 0 8px; }
.resena-ubicacion {
    display: inline-block;
    color: var(--verde);
    font-weight: 600;
    text-decoration: none;
    background: var(--salvia);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.85rem;
}
.resena-ubicacion:hover { background: #cdd7b6; }
.resena-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px dashed var(--salvia); padding-top: 10px; }
.mg-cuenta { color: var(--suave); font-weight: 600; }

/* =====================================================================
   VALORACIÓN COMO AMIGO (tarjeta destacada del hub)
   ===================================================================== */
.amigo-card { border-top: 3px solid var(--oro); }
.amigo-tuya { margin: 0 0 6px; font-size: 1.05rem; color: var(--texto); }
.amigo-tuya strong { color: var(--verde-prof); font-family: var(--fuente-marca); }

.amigo-ranking { list-style: none; margin: 12px 0 0; padding: 0; }
.amigo-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    margin-bottom: 6px;
    border: 1px solid transparent;
    border-radius: var(--radio-s);
}
.amigo-pos {
    width: 30px;
    text-align: center;
    font-family: var(--fuente-marca);
    font-weight: 700;
    color: var(--suave);
}
.amigo-nombre { flex: 1; font-weight: 600; }
.amigo-valor {
    font-family: var(--fuente-marca);
    font-weight: 700;
    color: var(--verde-prof);
}
.amigo-fila.podio { background: #fcf6e6; border-color: #f0dca8; }
.amigo-fila.podio .amigo-pos { color: #b5851d; }
.amigo-fila.podio-1 {
    background: linear-gradient(180deg, #fdefc6, #f8e3a0);
    border-color: var(--oro);
    box-shadow: 0 4px 14px rgba(224,164,49,0.25);
}
.amigo-fila.podio-1 .amigo-valor { color: #9c6f12; }
.amigo-fila.soy-yo { outline: 2px solid var(--verde); outline-offset: -2px; }