/* ══════════════════════════════════════════════════════════════════════════
   Tema único de Volcán Digital — portal de cliente + panel del equipo.
   Acá vive lo que antes se repetía copiado en ~20 archivos: fuente, colores
   base, .glass-card, labels, títulos de card, inputs.
   Lo específico de cada pantalla sigue viviendo inline en su propia página.

   Tema claro (sep-2026): antes era 100% oscuro — varios en el equipo y
   clientes se quejaron de que no se lee con luz/sol fuerte. Los tokens de
   abajo (bg/card/card2/border/text/muted/gold) son los mismos nombres de
   siempre, valores nuevos — ver theme-head.php para la versión Tailwind.
   ══════════════════════════════════════════════════════════════════════════ */

/* Inter es la letra de trabajo (nav, texto, formularios, tablas). Poppins queda
   reservado para .font-display — títulos grandes y cifras, no para todo. */
body { font-family:'Inter',sans-serif; background-color:#faf6ee; color:#241d12; }
.font-display { font-family:'Poppins',sans-serif; }
.glass-card { background:#ffffff; border:1px solid #e2d3b0; border-radius:1.25rem; }

/* ── Botones compartidos (antes cada pantalla los reinventaba) ── */
.btn-primary { background:#a9791f; color:#fff; border:none; font-family:'Inter',sans-serif; font-weight:800; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; padding:12px 20px; border-radius:999px; cursor:pointer; transition:background 0.15s, transform 0.12s; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.btn-primary:hover { background:#8f671a; }
.btn-primary:active { transform:scale(0.97); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; }
.btn-secondary { background:transparent; color:#241d12; border:1px solid #e2d3b0; font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; padding:12px 20px; border-radius:999px; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; justify-content:center; gap:6px; text-decoration:none; }
.btn-secondary:hover { border-color:#a9791f; color:#a9791f; }
.btn-danger { background:rgba(185,28,28,0.08); color:#b91c1c; border:1px solid rgba(185,28,28,0.28); font-family:'Inter',sans-serif; font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; padding:12px 20px; border-radius:999px; cursor:pointer; transition:all 0.15s; }
.btn-danger:hover { background:rgba(185,28,28,0.15); }

/* ── Tabla compartida (antes: HTML plano sin estilo en varias pantallas) ── */
table.vc-table { width:100%; border-collapse:collapse; font-size:12.5px; }
table.vc-table th { text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:0.1em; color:#9c8b6c; font-weight:800; padding:0 10px 10px; }
table.vc-table td { padding:12px 10px; border-top:1px solid #ece1c9; color:#241d12; }
table.vc-table tr:hover td { background:#f2e8d5; }

/* ── Confirmación genérica (reemplaza a confirm()/alert() nativos del navegador) ──
   Ver cliente-ui.js → vcConfirm(mensaje, onConfirmar, opciones) */
.vc-confirm-overlay { display:none; position:fixed; inset:0; background:rgba(23,19,15,0.55); z-index:200; align-items:center; justify-content:center; padding:20px; }
.vc-confirm-overlay.is-open { display:flex; }
.vc-confirm-box { background:#ffffff; border:1px solid #e2d3b0; border-radius:18px; padding:24px; max-width:320px; width:100%; text-align:center; animation:vcConfirmPop 0.18s ease both; }
@keyframes vcConfirmPop { from{opacity:0; transform:scale(0.96);} to{opacity:1; transform:scale(1);} }
.vc-confirm-ic { width:46px; height:46px; border-radius:14px; background:rgba(185,28,28,0.12); color:#b91c1c; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.vc-confirm-ic svg { width:20px; height:20px; }
.vc-confirm-ic.info { background:#f2e8d5; color:#6b5c42; border:1px solid #ece1c9; }
.vc-confirm-title { font-size:15px; font-weight:700; margin:0 0 6px; color:#241d12; }
.vc-confirm-msg { font-size:12.5px; color:#6b5c42; margin:0 0 20px; line-height:1.5; }
.vc-confirm-actions { display:flex; gap:8px; }
.vc-confirm-actions button { flex:1; }
.stat-label { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.15em; color:#6b5c42; }
.card-eyebrow { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:#6b5c42; margin-bottom:3px; }
/* La cursiva/mayúscula quedó reservada para la marca ("Volcán Digital" en el
   header) — acá el peso y el tamaño hacen la jerarquía, no el grito. */
.card-title { font-size:14px; font-weight:700; color:#241d12; margin-bottom:10px; }
.fi { width:100%; background:#f2e8d5; border:1px solid #e2d3b0; padding:10px 14px; border-radius:12px; font-size:14px; outline:none; transition:border-color 0.2s; color:#241d12; }
.fi:focus { border-color:#a9791f; }
input::placeholder, textarea::placeholder { color:#9c8b6c; }
select.fi option { background:#f2e8d5; }

/* ── Bottom nav persistente (la PWA corre en modo standalone, sin botón atrás) ── */
.vc-bottomnav {
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:#ffffff; border-top:1px solid #e2d3b0;
    display:flex;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.vc-bottomnav a {
    flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 2px; border-radius:12px; text-decoration:none; color:#6b5c42;
    position:relative; transition:color 0.15s;
}
.vc-bottomnav a:active { transform:scale(0.95); }
.vc-bottomnav a .ic { line-height:1; }
.vc-bottomnav a .ic svg { width:21px; height:21px; }
.vc-bottomnav a .lb { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.03em; }
.vc-bottomnav a.activo { color:#a9791f; }
.vc-bottomnav a .bnbadge {
    position:absolute; top:0; right:18%;
    background:#7a4d41; color:#fff; font-size:8px; font-weight:800;
    min-width:14px; height:14px; border-radius:99px;
    display:flex; align-items:center; justify-content:center; padding:0 3px;
}

/* ── Toast (window.volcanToast, ver cliente-ui.js) — se dejan oscuros a
   propósito: es un badge autocontenido y transitorio, se lee bien en
   cualquier tema y llama más la atención que uno claro. ── */
.vc-toast {
    position:fixed; left:50%; bottom:100px; z-index:80;
    transform:translateX(-50%); max-width:88%;
    padding:10px 16px; border-radius:12px;
    font-size:12px; font-weight:700; text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
    opacity:0; pointer-events:none;
    transition:opacity 0.2s, transform 0.2s;
}
.vc-toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }
.vc-toast.ok { background:#0f2f22; border:1px solid rgba(52,211,153,0.4); color:#34d399; }
.vc-toast.error { background:#2f1416; border:1px solid rgba(251,113,133,0.4); color:#fb7185; }

/* ── Modal genérico (tareas, confirmaciones) — panel del equipo ── */
.tarea-modal-overlay { display:none; position:fixed; inset:0; background:rgba(23,19,15,0.55); z-index:100; align-items:center; justify-content:center; padding:16px; }
.tarea-modal-overlay.is-open { display:flex; }
.tarea-modal-card { background:#ffffff; border:1px solid #e2d3b0; border-radius:1.25rem; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; padding:20px; }

/* ── Toggle "Agregar recordatorio" (formularios de tarea) ── */
.recordatorio-toggle summary { list-style:none; cursor:pointer; font-size:10px; font-weight:700; color:#7d6f56; text-transform:uppercase; letter-spacing:0.05em; padding:4px 0; }
.recordatorio-toggle summary::-webkit-details-marker { display:none; }
.recordatorio-toggle summary:hover { color:#a9791f; }
.recordatorio-box { margin-top:8px; padding:10px; background:#f2e8d5; border:1px solid #e2d3b0; border-radius:10px; }

/* ── Botón "+ agregar fila" / "quitar fila" (links de tarea, campañas, etc.) ── */
.btn-add { background:transparent; border:1px dashed #e2d3b0; color:#6b5c42; padding:8px 14px; border-radius:10px; font-size:10px; font-weight:700; text-transform:uppercase; cursor:pointer; transition:all 0.15s; width:100%; }
.btn-add:hover { border-color:#a9791f; color:#a9791f; }
.btn-del { background:#f2e8d5; border:1px solid #e2d3b0; color:#6b5c42; width:28px; height:28px; border-radius:8px; font-size:14px; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all 0.15s; }
.btn-del:hover { border-color:#be123c; color:#be123c; }

/* ── Modal de tarea: header, acciones, tira de links, toggle cliente/Volcán ── */
.tarea-modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.tarea-modal-close { background:#f2e8d5; border:1px solid #e2d3b0; width:28px; height:28px; border-radius:9px; color:#6b5c42; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; }
.tarea-modal-close:hover { color:#b91c1c; border-color:#b91c1c; }
.tarea-modal-actions { display:flex; gap:8px; margin:14px 0; }
.tarea-action-btn { flex:1; text-align:center; padding:9px; border-radius:10px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; transition:all .15s; text-decoration:none; cursor:pointer; border:none; }
.tarea-action-complete { background:rgba(21,128,61,0.1); color:#15803d; }
.tarea-action-complete:hover { background:rgba(21,128,61,0.18); }
.tarea-action-delete { background:rgba(185,28,28,0.1); color:#b91c1c; }
.tarea-action-delete:hover { background:rgba(185,28,28,0.18); }
.tarea-link-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.tarea-tipo-toggle { display:flex; gap:6px; margin-bottom:10px; }
.tarea-tipo-btn { flex:1; padding:9px; border-radius:10px; border:1px solid #e2d3b0; background:#f2e8d5; color:#6b5c42; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; cursor:pointer; transition:all .15s; text-align:center; }
.tarea-tipo-btn.activo { border-color:#a9791f; color:#a9791f; background:rgba(169,121,31,0.1); }
.comentario-item { background:#f2e8d5; border:1px solid #e2d3b0; border-radius:10px; padding:8px 10px; margin-bottom:6px; }
.comentario-autor { font-size:9px; font-weight:700; color:#9c8b6c; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:2px; }
.comentario-texto { font-size:12px; color:#4a3f2e; line-height:1.4; }

/* ══════════════════════════════════════════════════════════════════════════
   Tab bar agrupada (rediseño sección Cliente, ago-2026) — ícono arriba /
   label abajo, agrupada por "lo que usás seguido" vs. "lo de referencia",
   contador como bolita en la esquina en vez de metido en el texto.
   ══════════════════════════════════════════════════════════════════════════ */
.vc-tabbar-wrap { margin-bottom: 24px; }
.vc-tabbar { display:flex; gap:2px; background:#ffffff; border:1px solid #ece1c9; border-radius:18px; padding:6px; overflow-x:auto; }
.vc-tabgroup { display:flex; gap:2px; }
.vc-tabgroup + .vc-tabgroup { margin-left:10px; padding-left:10px; border-left:1px solid #ece1c9; }
.vc-tabbtn { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 15px 8px; border-radius:13px; border:none; background:transparent; color:#6b5c42; cursor:pointer; transition:all 0.15s; flex-shrink:0; font-family:inherit; text-decoration:none; }
.vc-tabbtn:hover { color:#241d12; background:rgba(0,0,0,0.03); }
.vc-tabbtn .ic { line-height:1; display:flex; }
.vc-tabbtn .ic svg { width:17px; height:17px; }
.vc-tabbtn .lb { font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.05em; }
.vc-tabbtn.activo { color:#a9791f; }
.vc-tabbtn.activo::after { content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:18px; height:2.5px; border-radius:99px; background:#a9791f; }
.vc-tabdot { position:absolute; top:6px; right:8px; min-width:15px; height:15px; border-radius:99px; background:#b91c1c; color:#fff; font-size:8.5px; font-weight:900; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.vc-tabdot.info { background:#0369a1; color:#fff; }
.vc-tabdot.accent { background:#a9791f; color:#fff; }

/* ── Card de sección agrupada (ficha, y cualquier detalle "clave: valor") ── */
.vc-fcard { background:#ffffff; border:1px solid #ece1c9; border-radius:16px; padding:18px; margin-bottom:12px; }
.vc-fcard-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.vc-fcard-head .ic { width:30px; height:30px; border-radius:9px; background:#f2e8d5; border:1px solid #ece1c9; color:#6b5c42; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.vc-fcard-head h4 { font-size:12.5px; font-weight:700; margin:0; color:#241d12; }
.vc-frow { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:9px 0; }
.vc-frow + .vc-frow { border-top:1px solid #ece1c9; }
.vc-frow .fk { font-size:11.5px; color:#6b5c42; font-weight:500; flex-shrink:0; }
.vc-frow .fw { font-size:13px; color:#241d12; font-weight:600; text-align:right; }
.vc-frow .fw.empty { color:#9c8b6c; font-weight:400; font-style:italic; }
.vc-frow .fw a { color:#a9791f; text-decoration:none; }

/* ── Ranking de conceptos: acordeón compacto en vez de 5 cards siempre abiertas ── */
.vc-stars { display:inline-flex; gap:1px; }
.vc-stars .st { font-size:13px; color:#e2d3b0; }
.vc-stars .st.on { color:#a9791f; }
.vc-stars .star-btn { font-size:13px; padding:1px; }
.vc-stars .star-btn.filled { color:#a9791f; }
.vc-concept-list { background:#ffffff; border:1px solid #ece1c9; border-radius:16px; padding:6px; margin-bottom:8px; }
details.vc-concept-row { border-radius:12px; }
details.vc-concept-row + details.vc-concept-row { border-top:1px solid #ece1c9; }
details.vc-concept-row summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:12px; }
details.vc-concept-row summary::-webkit-details-marker { display:none; }
details.vc-concept-row summary:hover { background:rgba(0,0,0,0.02); }
details.vc-concept-row[open] summary { background:rgba(0,0,0,0.02); }
.vc-concept-rank { width:26px; height:26px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; background:#ece1c9; color:#6b5c42; }
.vc-concept-rank svg { width:12px; height:12px; }
.vc-concept-row.is-top .vc-concept-rank { background:#a9791f; color:#fff; }
.vc-concept-main { flex:1; min-width:0; }
.vc-concept-main .cn { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.vc-concept-main .cn .nm { font-size:13.5px; font-weight:700; color:#241d12; }
.vc-concept-main .preview { font-size:11px; color:#9c8b6c; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vc-win-tag { font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; background:rgba(169,121,31,0.12); color:#a9791f; padding:3px 8px; border-radius:7px; white-space:nowrap; }
.vc-concept-chev { color:#9c8b6c; font-size:11px; transition:transform 0.15s; flex-shrink:0; }
details.vc-concept-row[open] .vc-concept-chev { transform:rotate(90deg); }
.vc-concept-empty summary { opacity:0.45; }
.vc-concept-empty .vc-concept-rank { background:transparent; border:1.5px dashed #e2d3b0; color:#9c8b6c; }
.vc-concept-body { padding:4px 14px 16px 52px; }
.vc-concept-body .cb-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; margin-bottom:10px; }
.vc-concept-body .cbf-l { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em; color:#9c8b6c; margin-bottom:3px; }
.vc-concept-body .cbf-v { font-size:12.5px; color:#241d12; line-height:1.5; }
.vc-emo-chip { display:inline-block; font-size:11px; font-weight:600; background:rgba(3,105,161,0.12); color:#0369a1; padding:3px 10px; border-radius:8px; }
.vc-concept-note { background:#f2e8d5; border:1px solid #ece1c9; border-radius:10px; padding:10px 12px; font-size:12px; color:#7d6f56; line-height:1.5; }
@media (max-width:640px) {
    .vc-concept-body .cb-grid, .vc-fcard-grid-2 { grid-template-columns:1fr; }
}