/* Los del Camino Getxo — App (PWA): invitación, panel "App y avisos", toasts */
.ldcg-app-hoja, .ldcg-app-modal, .ldcg-app-toast, .ldcg-app-pie {
    --app-gold: #c5a059; --app-gold-2: #e8c97a; --app-brown: #241708; --app-brown-2: #3a2818;
    --app-navy: #1a2a3a; --app-ink: #2b2118; --app-muted: #7a6a58; --app-line: rgba(58,40,24,.12);
    --app-paper: #fbf7ef; --app-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Botón del pie */
.ldcg-app-pie {
    margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 100px; cursor: pointer;
    border: 1px solid rgba(232,201,122,.35); background: rgba(232,201,122,.08);
    color: var(--app-gold-2); font: 600 13px var(--app-font); transition: background .2s, transform .2s;
}
.ldcg-app-pie:hover { background: rgba(232,201,122,.16); transform: translateY(-1px); }
html.ldcg-standalone .ldcg-app-pie { display: none; }

/* ---------- Hoja de invitación ---------- */
.ldcg-app-hoja {
    position: fixed; z-index: 99990; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    max-width: 520px; margin: 0 auto;
    display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px;
    border-radius: 22px; color: #fff; font-family: var(--app-font);
    background:
        radial-gradient(ellipse at 90% -40%, rgba(232,201,122,.35), transparent 60%),
        linear-gradient(135deg, #2a1810, #3a2818 45%, #1a2a3a);
    border: 1px solid rgba(232,201,122,.28);
    box-shadow: 0 24px 50px -18px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.2);
    transform: translateY(140%); opacity: 0; transition: transform .5s cubic-bezier(.2,.9,.25,1.1), opacity .35s;
}
.ldcg-app-hoja.is-on { transform: none; opacity: 1; }
.ldcg-app-hoja-ico { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.ldcg-app-hoja-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ldcg-app-hoja-txt strong { font: 700 15px/1.25 Georgia, 'Times New Roman', serif; }
.ldcg-app-hoja-txt span { font-size: 12.5px; line-height: 1.4; color: rgba(255,255,255,.7); }
.ldcg-app-hoja-x {
    position: absolute; top: -9px; left: -6px; width: 26px; height: 26px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: #2a1810; color: rgba(255,255,255,.8);
    font-size: 16px; line-height: 1; cursor: pointer;
}

.ldcg-app-btn {
    border: none; border-radius: 100px; padding: 11px 18px; cursor: pointer; flex-shrink: 0;
    font: 700 14px var(--app-font); color: var(--app-brown);
    background: linear-gradient(135deg, var(--app-gold-2), var(--app-gold));
    box-shadow: 0 10px 22px -10px rgba(197,160,89,.9); transition: transform .15s, filter .2s;
}
.ldcg-app-btn:hover { filter: brightness(1.05); }
.ldcg-app-btn:active { transform: scale(.97); }
.ldcg-app-btn:disabled { opacity: .55; cursor: default; }
.ldcg-app-btn--ancho { width: 100%; padding: 14px; font-size: 15px; }

/* ---------- Panel ---------- */
html.ldcg-app-abierto { overflow: hidden; }
.ldcg-app-modal { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: flex-end; justify-content: center; font-family: var(--app-font); }
@media (min-width: 640px) { .ldcg-app-modal { align-items: center; padding: 24px; } }
.ldcg-app-velo { position: absolute; inset: 0; background: rgba(20,12,6,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.ldcg-app-caja {
    position: relative; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto;
    background: var(--app-paper); color: var(--app-ink);
    border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.5);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(40px); opacity: 0; transition: transform .4s cubic-bezier(.2,.9,.25,1.05), opacity .3s;
}
@media (min-width: 640px) { .ldcg-app-caja { border-radius: 26px; } }
.ldcg-app-modal.is-on .ldcg-app-velo { opacity: 1; }
.ldcg-app-modal.is-on .ldcg-app-caja { transform: none; opacity: 1; }
.ldcg-app-x {
    position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
}
.ldcg-app-cab {
    display: flex; align-items: center; gap: 14px; padding: 26px 22px 22px; color: #fff;
    background:
        radial-gradient(ellipse at 85% -30%, rgba(232,201,122,.4), transparent 60%),
        linear-gradient(140deg, #2a1810, #3a2818 45%, #1a2a3a);
}
.ldcg-app-cab img { width: 58px; height: 58px; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.ldcg-app-cab small { font: 700 10.5px var(--app-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--app-gold-2); }
.ldcg-app-cab h3 { margin: 4px 0 0; font: 700 22px/1.2 Georgia, 'Times New Roman', serif; color: #fff; }
.ldcg-app-cuerpo { padding: 8px 18px 22px; }
.ldcg-app-cargando { padding: 30px; text-align: center; color: var(--app-muted); }

.ldcg-app-sec { padding: 18px 4px; border-bottom: 1px solid var(--app-line); }
.ldcg-app-sec:last-child { border-bottom: none; }
.ldcg-app-sec.is-foco { animation: ldcgAppFoco 1.6s ease; border-radius: 16px; }
@keyframes ldcgAppFoco { 0%, 60% { background: rgba(232,201,122,.18); } 100% { background: transparent; } }
.ldcg-app-sec h4 { margin: 0 0 10px; font: 700 15px var(--app-font); color: var(--app-ink); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ldcg-app-sec h4 small { font-weight: 600; font-size: 11px; color: var(--app-muted); }
.ldcg-app-sec p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--app-muted); }
.ldcg-app-sec p:last-child { margin-bottom: 0; }
.ldcg-app-sec--ok { display: flex; align-items: center; gap: 14px; }
.ldcg-app-sec--ok strong { font-size: 15px; }
.ldcg-app-sec--ok p { margin: 2px 0 0; }
.ldcg-app-sello { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; font-weight: 800; background: linear-gradient(135deg, #5fa36b, #3d7d4b); }
.ldcg-app-nota { padding: 10px 12px; border-radius: 12px; background: rgba(197,160,89,.12); color: var(--app-ink) !important; }

.ldcg-app-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ldcg-app-pasos li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--app-line); font-size: 14px; line-height: 1.45; }
.ldcg-app-n { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: var(--app-brown); background: linear-gradient(135deg, var(--app-gold-2), var(--app-gold)); }
.ldcg-app-ios-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(0,122,255,.1); color: #007aff; vertical-align: middle; margin-left: 2px; }

/* Interruptores */
.ldcg-app-interruptor { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.ldcg-app-interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ldcg-app-pista { position: relative; width: 46px; height: 28px; border-radius: 100px; background: #d8cfc2; flex-shrink: 0; transition: background .25s; }
.ldcg-app-pista::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.3,1.4,.5,1); }
.ldcg-app-interruptor input:checked + .ldcg-app-pista { background: linear-gradient(135deg, var(--app-gold-2), var(--app-gold)); }
.ldcg-app-interruptor input:checked + .ldcg-app-pista::after { transform: translateX(18px); }
.ldcg-app-interruptor input:focus-visible + .ldcg-app-pista { outline: 2px solid var(--app-gold); outline-offset: 2px; }
.ldcg-app-interruptor input:disabled + .ldcg-app-pista { opacity: .6; }
.ldcg-app-interruptor--grande { display: flex; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--app-line); }
.ldcg-app-interruptor--grande b { display: block; font-size: 15px; }
.ldcg-app-interruptor--grande small { display: block; font-size: 12px; color: var(--app-muted); margin-top: 2px; }

.ldcg-app-tipos { margin-top: 10px; display: grid; gap: 2px; transition: opacity .25s; }
.ldcg-app-tipos[data-off] { opacity: .45; pointer-events: none; }
.ldcg-app-tipo { display: flex; align-items: center; gap: 12px; padding: 10px 4px; cursor: pointer; }
.ldcg-app-tipo-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; background: rgba(197,160,89,.14); flex-shrink: 0; }
.ldcg-app-tipo-txt { flex: 1; min-width: 0; }
.ldcg-app-tipo-txt b { display: block; font-size: 14px; }
.ldcg-app-tipo-txt small { display: block; font-size: 12px; line-height: 1.4; color: var(--app-muted); }

/* Formulario de aviso (admin) */
.ldcg-app-form { display: grid; gap: 8px; }
.ldcg-app-form input, .ldcg-app-form textarea, .ldcg-app-form select {
    width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 12px;
    border: 1px solid var(--app-line); background: #fff; color: var(--app-ink); font: 14px var(--app-font);
}
.ldcg-app-form textarea { resize: vertical; }
.ldcg-app-form input:focus, .ldcg-app-form textarea:focus, .ldcg-app-form select:focus { outline: none; border-color: var(--app-gold); box-shadow: 0 0 0 3px rgba(197,160,89,.2); }
.ldcg-app-fila { display: flex; gap: 8px; }
.ldcg-app-fila select { flex: 1; min-width: 0; }
.ldcg-app-enlace { justify-self: start; border: none; background: none; padding: 4px 0; color: #8a6a2a; font: 600 13px var(--app-font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Toast */
.ldcg-app-toast {
    position: fixed; z-index: 99999; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 20px); opacity: 0; max-width: calc(100% - 32px);
    padding: 12px 18px; border-radius: 100px; font: 600 14px var(--app-font); color: #fff;
    background: rgba(36,23,8,.94); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
    border: 1px solid rgba(232,201,122,.3); transition: transform .35s, opacity .35s; text-align: center;
}
.ldcg-app-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* En modo app: respetar la muesca del iPhone */
html.ldcg-standalone body { padding-top: env(safe-area-inset-top, 0px); }
html.ldcg-standalone .site-header { padding-top: env(safe-area-inset-top, 0px); }

@media (prefers-reduced-motion: reduce) {
    .ldcg-app-hoja, .ldcg-app-caja, .ldcg-app-velo, .ldcg-app-toast, .ldcg-app-pista::after { transition: none; }
}