/*
 * Floow3 · Sistema de interfaz (logo, botones, acciones y estados).
 * Capa visual cargada después de todos los estilos existentes: solo cambia
 * apariencia. No altera estructura, textos, datos ni comportamiento.
 *
 * Jerarquía:
 *   Primary      .btn.primary
 *   Secondary    .btn  (Editar, Cancelar, vistas…)
 *   Ghost        .btn.quiet, button.p2-icon (Ver, Abrir, Copiar), Archivar
 *   Restore      [data-lifecycle="restore"], [data-action-kind="restore"]
 *   Destructive  [data-lifecycle="delete"], [data-project-id], [data-record-id]
 *   Icon action  acciones de fila (Registros) y eliminar en Proyectos
 *   Status chip  .p2-status, .project-card .status, .badge  (+ [data-status])
 */

:root{
  --f3-ink:#570617;            /* texto sobre rosa: 6.6:1 */
  --f3-accent:#EFEAE4;
  --f3-accent-hover:#EFEAE4;
  --f3-accent-press:#EFEAE4;
  --f3-surface-1:#1C0207;
  --f3-surface-2:#26030A;
  --f3-surface-3:#26030A;
  --f3-line:#36040E;
  --f3-line-strong:#36040E;
  --f3-text:#EFEAE4;
  --f3-text-soft:#EFEAE4;
  --f3-muted:#D8C8C5;
  --f3-danger:#EFEAE4;
  --f3-danger-strong:#800B1E;
  --f3-amber:#D8C8C5;
  --f3-ivory:#EFEAE4;
  --f3-radius-btn:10px;
  --f3-radius-sm:8px;
  --f3-h:38px;
  --f3-h-sm:32px;
  --f3-ease:cubic-bezier(.2,.7,.2,1);
}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.sidebar .brand{flex-direction:column;align-items:flex-start;gap:10px;padding:4px 12px 20px;margin-bottom:14px;border-bottom:1px solid rgba(54,4,14,.65)}
.brand-logo{display:block;width:104px;height:auto;aspect-ratio:360/412;object-fit:contain;user-select:none;-webkit-user-drag:none;}
.brand .brand-tagline{display:block;margin:0;color:var(--f3-muted);font:9px Inter,sans-serif;letter-spacing:.2em}

/* ── Base de botones ─────────────────────────────────────────────────── */
.btn,
button.p2-icon{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--f3-h);padding:0 16px;
  border:1px solid var(--f3-line);border-radius:var(--f3-radius-btn);
  background:var(--f3-surface-2);color:var(--f3-text-soft);
  font:700 11px/1.15 Inter,system-ui,sans-serif;letter-spacing:.06em;text-align:center;
  box-shadow:inset 0 1px rgba(239,234,228,.04);
  transition:background-color .16s var(--f3-ease),border-color .16s var(--f3-ease),color .16s var(--f3-ease),box-shadow .16s var(--f3-ease),transform .12s var(--f3-ease);
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:none;background:var(--f3-surface-3);border-color:var(--f3-line-strong);color:var(--f3-text)}
.btn:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(19,1,5,.35)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;box-shadow:none;transform:none;pointer-events:none}
.btn:focus-visible,button.p2-icon:focus-visible{box-shadow:0 0 0 4px rgba(239,234,228,.16)}

/* Iconos (máscaras SVG locales; heredan el color del texto) */
.btn::before,button.p2-icon::before,.row-actions button::before{
  content:none;flex:none;width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--f3-icon) center/contain no-repeat;mask:var(--f3-icon) center/contain no-repeat;
}

/* ── Primary ─────────────────────────────────────────────────────────── */
.btn.primary{
  padding:0 18px;border-color:transparent;
  background:#EFEAE4;color:var(--f3-ink);
  box-shadow:inset 0 1px rgba(239,234,228,.28),0 8px 22px rgba(239,234,228,.16);
}
.btn.primary:hover{background:#EFEAE4;color:var(--f3-ink);border-color:transparent;box-shadow:inset 0 1px rgba(239,234,228,.32),0 10px 26px rgba(239,234,228,.22)}
.btn.primary:active{background:var(--f3-accent-press);box-shadow:inset 0 2px 6px rgba(87,6,23,.28)}

/* ── Ghost / terciario ───────────────────────────────────────────────── */
.btn.quiet,
button.p2-icon{background:transparent;border-color:transparent;box-shadow:none;color:#D8C8C5}
.btn.quiet{opacity:1;min-height:var(--f3-h-sm);padding:0 10px;font-size:10px;letter-spacing:.1em}
.btn.quiet:hover,button.p2-icon:hover{background:rgba(239,234,228,.08);border-color:rgba(239,234,228,.18);color:var(--f3-text)}
button.p2-icon{min-height:var(--f3-h-sm);padding:0 11px;font-size:10px;border-radius:var(--f3-radius-sm)}
button.p2-icon:active{transform:translateY(1px)}
button[data-p2-calendar-open].p2-icon::before,button[data-p2-open-performance].p2-icon::before,button[data-p2-open-prompt].p2-icon::before{content:'';--f3-icon:url(assets/icons/eye.svg)}
button[data-p2-open-campaign].p2-icon::before,button[data-p2-open-piece].p2-icon::before,.btn[data-p2-open-campaign]::before{content:'';--f3-icon:url(assets/icons/open.svg)}
button[data-p2-copy-prompt]::before{content:'';--f3-icon:url(assets/icons/copy.svg)}

/* Acción en línea (★ Guardar en biblioteca) */
.p2-inline-action{border-radius:6px;padding:4px 6px;margin-left:-6px;transition:background-color .16s var(--f3-ease)}
.p2-inline-action:hover{background:rgba(239,234,228,.08)}

/* ── Secondary con icono: Editar ─────────────────────────────────────── */
.btn[data-p2-action^="edit-"]::before{content:'';--f3-icon:url(assets/icons/edit.svg)}
.btn[data-p2-action^="complete-"]::before{content:'';--f3-icon:url(assets/icons/check.svg)}

/* ── Archivar (ghost discreto) y Restaurar ───────────────────────────── */
.btn[data-lifecycle="archive"]{background:transparent;box-shadow:none;border-color:var(--f3-line);color:#D8C8C5}
.btn[data-lifecycle="archive"]:hover{background:rgba(216,200,197,.08);border-color:var(--f3-line-strong);color:var(--f3-text)}
.btn[data-lifecycle="archive"]::before{content:'';--f3-icon:url(assets/icons/archive.svg)}
.btn[data-lifecycle="restore"]{background:rgba(239,234,228,.07);border-color:rgba(239,234,228,.32);color:#EFEAE4;box-shadow:none}
.btn[data-lifecycle="restore"]:hover{background:rgba(239,234,228,.13);border-color:rgba(239,234,228,.5);color:#EFEAE4}
.btn[data-lifecycle="restore"]::before{content:'';--f3-icon:url(assets/icons/restore.svg)}

/* ── Destructive (refinado, no protagonista) ─────────────────────────── */
.btn[data-lifecycle="delete"],.btn[data-tool-delete]{background:transparent;border-color:rgba(128,11,30,.28);color:var(--f3-danger);box-shadow:none}
.btn[data-lifecycle="delete"]:hover,.btn[data-tool-delete]:hover{background:rgba(128,11,30,.12);border-color:rgba(128,11,30,.55);color:#EFEAE4}
.btn[data-lifecycle="delete"]::before,.btn[data-tool-delete]::before{content:'';--f3-icon:url(assets/icons/trash.svg)}

/* Confirmación de borrado: la acción destructiva sí es la principal */
#deleteConfirmation .modal{max-width:520px}
#deleteConfirmation header h2::before{content:'';display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-right:10px;background:var(--f3-danger);-webkit-mask:url(assets/icons/trash.svg) center/contain no-repeat;mask:url(assets/icons/trash.svg) center/contain no-repeat}
#deleteConfirmationText{color:var(--f3-text-soft);line-height:1.55}
.btn.primary#deleteConfirmationAccept{background:#800B1E;color:#EFEAE4;border-color:rgba(216,200,197,.18);box-shadow:inset 0 1px rgba(239,234,228,.14),0 8px 22px rgba(128,11,30,.28)}
.btn.primary#deleteConfirmationAccept:hover{background:#800B1E;color:#EFEAE4}
.btn.primary#deleteConfirmationAccept:active{background:#800B1E}
.btn.primary#deleteConfirmationAccept::before{content:'';--f3-icon:url(assets/icons/trash.svg)}

/* ── Grupos de acciones ──────────────────────────────────────────────── */
/* Contención global: ningún botón puede superar su contenedor; el texto
   largo (p. ej. «Eliminar permanentemente») pasa a dos líneas si falta sitio. */
.p2-actions{gap:8px}
.p2-actions,.p2-row-actions,.row-actions,.tool-actions{min-width:0;max-width:100%}
.p2-actions .btn,.p2-row-actions .btn,.tool-actions .btn,.p2-field-hint .btn{white-space:normal;max-width:100%;min-width:0;text-wrap:balance;line-height:1.2;padding-top:8px;padding-bottom:8px}
/* Nunca partir una palabra dentro de un botón (las tarjetas usan overflow-wrap:anywhere) */
.btn,button.p2-icon,.project-card .row-actions button,.p2-status,.badge{overflow-wrap:normal;word-break:normal;hyphens:manual}
/* Cabecera de detalle: título y acciones conviven; si no caben, las acciones bajan completas */
.p2-detail-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:14px}
.p2-detail-head>div:first-child{flex:1 1 260px;min-width:0}
.p2-detail-head>.p2-actions{flex:0 1 auto;justify-content:flex-end}
/* Filas (mediciones, prompts, calendario, piezas) */
.p2-row{flex-wrap:wrap}
.p2-row>div:first-child{flex:1 1 220px;min-width:0}
.p2-row>.p2-actions,.p2-row>.p2-row-actions{margin-left:auto;justify-content:flex-end}
/* Tarjetas estrechas con Editar/Archivar/Eliminar: rejilla ordenada */
.card .p2-actions:has([data-lifecycle]){display:flex;flex-wrap:wrap;width:100%}
.card .p2-actions:has([data-lifecycle]) .btn{flex:1 1 auto;padding-left:12px;padding-right:12px}
.card .p2-actions:has([data-lifecycle]) .btn[data-lifecycle="delete"]{flex-basis:100%;margin-left:0}
/* Herramientas: acción de administrador */
.tool-actions{display:flex;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid rgba(54,4,14,.6)}
.tool-actions .btn{min-height:34px;padding-left:12px;padding-right:12px;font-size:10px}
/* Herramientas: métricas diferenciadas (usados / restantes / costo acumulado / costo por crédito) */
.tool-card .tool-numbers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;font:9px Inter,sans-serif;letter-spacing:.08em}
.tool-card .tool-numbers b{display:block;margin-top:4px;font:700 13px/1.2 Inter,system-ui,sans-serif;letter-spacing:0;color:#EFEAE4;overflow-wrap:anywhere}
.tool-card .tool-numbers div:first-child b{color:#EFEAE4}
.tool-card .tool-numbers small{display:block;margin-top:3px;color:var(--f3-muted);font:9px Inter,sans-serif;letter-spacing:.04em}
.tool-card .tool-numbers .tool-unlimited{color:var(--f3-muted);font-weight:600;font-size:12px}
.tool-card .tool-numbers .tool-over{color:#EFEAE4}
.tool-actions{gap:8px;flex-wrap:wrap}
#tools .tool-grid>.tool-card{min-width:0}
.btn[data-tool-edit]::before{content:'';--f3-icon:url(assets/icons/edit.svg)}
.field-hint{display:block;margin-top:6px;color:var(--f3-muted);font-weight:500;font-size:10.5px;line-height:1.4}
.field-hint b{color:var(--f3-text-soft)}
.field-hint .p2-inline-action{display:inline;margin:0 0 0 4px;padding:2px 6px}

/* Rendimiento: aviso cuando no hay piezas para la selección */
.p2-field-hint{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:-4px;padding:12px 14px;border:1px solid rgba(216,200,197,.32);border-radius:var(--f3-radius-btn);background:rgba(216,200,197,.07);color:#D8C8C5;font-size:12px;line-height:1.45}
.p2-field-hint span{flex:1 1 220px;min-width:0}
.p2-field-hint .btn{min-height:34px;font-size:10px}
.p2-actions .btn[data-lifecycle="delete"]{margin-left:0}
.modal footer,.p2-form footer{gap:10px}

/* Proyectos: Editar | Archivar/Restaurar | Eliminar (icono) */
.project-card header{flex-wrap:wrap;align-items:center;gap:8px 10px}
.project-card .row-actions{gap:4px;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto}
.project-card .row-actions button{
  display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;
  border:1px solid transparent;border-radius:var(--f3-radius-sm);background:transparent;color:#D8C8C5;
  font:700 9.5px/1 Inter,system-ui,sans-serif;letter-spacing:.08em;
  transition:background-color .16s var(--f3-ease),border-color .16s var(--f3-ease),color .16s var(--f3-ease)
}
.project-card .row-actions button:hover{background:rgba(216,200,197,.08);border-color:var(--f3-line);color:var(--f3-text)}
.project-card .row-actions button::before{width:13px;height:13px}
.project-card .row-actions [data-project-edit]::before{content:'';--f3-icon:url(assets/icons/edit.svg)}
.project-card .row-actions [data-action-kind="archive"]::before{content:'';--f3-icon:url(assets/icons/archive.svg)}
.project-card .row-actions [data-action-kind="restore"]{color:#EFEAE4}
.project-card .row-actions [data-action-kind="restore"]::before{content:'';--f3-icon:url(assets/icons/restore.svg)}
.project-card .row-actions [data-project-id]{width:30px;padding:0;justify-content:center;font-size:0;color:var(--f3-danger)}
.project-card .row-actions [data-project-id]::before{content:'';--f3-icon:url(assets/icons/trash.svg);width:14px;height:14px}
.project-card .row-actions [data-project-id]:hover{background:rgba(128,11,30,.12);border-color:rgba(128,11,30,.5);color:#EFEAE4}

/* Registros: acciones de fila como icon buttons */
.record-actions-cell .row-actions{gap:6px}
.record-actions-cell .row-actions button{
  display:inline-grid;place-items:center;width:32px;height:32px;padding:0;font-size:0;
  border-radius:var(--f3-radius-sm);border:1px solid var(--f3-line);background:var(--f3-surface-2);color:#D8C8C5;
  transition:background-color .16s var(--f3-ease),border-color .16s var(--f3-ease),color .16s var(--f3-ease)
}
.record-actions-cell .row-actions button:hover{background:var(--f3-surface-3);border-color:var(--f3-line-strong);color:var(--f3-text)}
.record-actions-cell .row-actions [data-record-edit]::before{content:'';--f3-icon:url(assets/icons/edit.svg)}
.record-actions-cell .row-actions [data-record-id]{color:var(--f3-danger);background:transparent;border-color:rgba(128,11,30,.24)}
.record-actions-cell .row-actions [data-record-id]::before{content:'';--f3-icon:url(assets/icons/trash.svg)}
.record-actions-cell .row-actions [data-record-id]:hover{background:rgba(128,11,30,.12);border-color:rgba(128,11,30,.55);color:#EFEAE4}

/* Botones de icono existentes (topbar, cerrar modal) */
.icon-btn{display:inline-grid;place-items:center;width:var(--f3-h);height:var(--f3-h);padding:0;border-radius:var(--f3-radius-btn);background:var(--f3-surface-2);border:1px solid var(--f3-line);color:#D8C8C5;transition:background-color .16s var(--f3-ease),border-color .16s var(--f3-ease),color .16s var(--f3-ease)}
.icon-btn:hover{background:var(--f3-surface-3);border-color:var(--f3-line-strong);color:var(--f3-text)}
.modal .close{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border-radius:var(--f3-radius-sm);border:1px solid transparent;font-size:20px;line-height:1;transition:background-color .16s var(--f3-ease),border-color .16s var(--f3-ease),color .16s var(--f3-ease)}
.modal .close:hover{background:rgba(216,200,197,.08);border-color:var(--f3-line);color:var(--f3-text)}

/* Pestañas de detalle y conmutadores de vista */
.p2-modal .modal-tabs button{min-height:32px;border:1px solid transparent;transition:background-color .16s var(--f3-ease),color .16s var(--f3-ease),border-color .16s var(--f3-ease)}
.p2-modal .modal-tabs button:hover{color:var(--f3-text);background:rgba(239,234,228,.06)}
.p2-modal .modal-tabs button.active{border-color:rgba(239,234,228,.28)}

/* ── Selector de vista (Activos / Archivados / Todos) ───────────────── */
#projects > label,.p2-switch{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--f3-muted);font:9px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase}
#projectArchiveView,.p2-switch select{
  -webkit-appearance:none;appearance:none;height:36px;padding:0 34px 0 12px;
  border:1px solid var(--f3-line);border-radius:var(--f3-radius-sm);
  background:var(--f3-surface-1) url(assets/icons/chevron-down.svg) right 10px center/16px no-repeat;
  color:var(--f3-text-soft);font:600 11px Inter,system-ui,sans-serif;letter-spacing:.02em;text-transform:none;cursor:pointer;
  transition:border-color .16s var(--f3-ease),background-color .16s var(--f3-ease)
}
#projectArchiveView:hover,.p2-switch select:hover{border-color:var(--f3-line-strong)}
#projectArchiveView:focus,.p2-switch select:focus{border-color:rgba(239,234,228,.45);outline:none}
#projectArchiveView option,.p2-switch select option{background:#1C0207;color:var(--f3-text)}

/* ── Status chips ────────────────────────────────────────────────────── */
.p2-status,
.project-card header .status,
.badge{
  display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border:1px solid rgba(216,200,197,.22);border-radius:999px;
  background:rgba(216,200,197,.07);color:#D8C8C5;
  font:500 9.5px/1 Inter,sans-serif;letter-spacing:.06em;white-space:nowrap
}
.p2-status::before,.project-card header .status::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.9}
.badge::before{width:6px;height:6px}

/* Activo */
.p2-status[data-status="Activo"],.p2-status[data-status="Activa"]{
  color:#EFEAE4;background:rgba(239,234,228,.12);border-color:rgba(239,234,228,.36)
}
.p2-status[data-status="Activo"]::before,.p2-status[data-status="Activa"]::before{opacity:1;box-shadow:0 0 0 3px rgba(239,234,228,.18)}

/* Archivado: borde discontinuo + icono (no depende solo del color) */
.p2-status[data-status="Archivado"],.p2-status[data-status="Archivada"],
.project-card header .status[data-status="Archivado"]{
  color:#D8C8C5!important;background:transparent;border-style:dashed;border-color:rgba(216,200,197,.38)
}
.p2-status[data-status="Archivado"]::before,.p2-status[data-status="Archivada"]::before,
.project-card header .status[data-status="Archivado"]::before{
  width:11px;height:11px;border-radius:0;background:currentColor;opacity:1;
  -webkit-mask:url(assets/icons/archive.svg) center/contain no-repeat;mask:url(assets/icons/archive.svg) center/contain no-repeat
}

/* Proyectos: color de estado dentro de la paleta (sustituye el azul) */
.project-card header .status[data-status="En producción"]{color:#EFEAE4!important;background:rgba(239,234,228,.12);border-color:rgba(239,234,228,.36)}
.project-card header .status[data-status="En revisión"]{color:var(--f3-amber)!important;background:rgba(216,200,197,.08);border-color:rgba(216,200,197,.3)}
.project-card header .status[data-status="Pendiente"]{color:#D8C8C5!important}
.project-card header .status[data-status="Completado"]{color:var(--f3-ivory)!important;background:rgba(239,234,228,.08);border-color:rgba(239,234,228,.26)}

/* Estados semánticos existentes */
.p2-status.warn{color:var(--f3-amber);background:rgba(216,200,197,.08);border-color:rgba(216,200,197,.3)}
.p2-status.danger{color:#EFEAE4;background:rgba(128,11,30,.1);border-color:rgba(128,11,30,.36)}
.badge.success{color:#EFEAE4;background:rgba(239,234,228,.1);border-color:rgba(239,234,228,.3)}
.badge.partial{color:var(--f3-amber);background:rgba(216,200,197,.08);border-color:rgba(216,200,197,.28)}
.badge.failed{color:#EFEAE4;background:rgba(128,11,30,.1);border-color:rgba(128,11,30,.34)}
.badge.success::before,.badge.failed::before{width:10px;height:10px;border-radius:0;-webkit-mask:var(--f3-icon) center/contain no-repeat;mask:var(--f3-icon) center/contain no-repeat}
.badge.success::before{--f3-icon:url(assets/icons/check.svg)}
.badge.failed::before{--f3-icon:url(assets/icons/x.svg)}

/* Calendario: pendiente / vencida / completada */
.p2-status.pending{color:var(--f3-amber);background:rgba(216,200,197,.08);border-color:rgba(216,200,197,.3)}
.p2-status.overdue{color:#EFEAE4;background:rgba(128,11,30,.1);border-color:rgba(128,11,30,.36)}
.p2-status.done{color:var(--f3-ivory);background:rgba(239,234,228,.07);border-color:rgba(239,234,228,.24)}
.p2-status.done::before{width:10px;height:10px;border-radius:0;-webkit-mask:url(assets/icons/check.svg) center/contain no-repeat;mask:url(assets/icons/check.svg) center/contain no-repeat}

/* Insignia de iniciales en tarjetas (no es un botón) */
span.p2-icon{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 8px;border-radius:10px;background:var(--f3-surface-2);border:1px solid var(--f3-line);color:var(--f3-accent);font:500 10px Inter,sans-serif;letter-spacing:.06em}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:720px){
  .brand-logo{width:92px}
  .sidebar .brand{padding-bottom:16px;margin-bottom:10px}
  .btn{min-height:40px}
  .btn.quiet,button.p2-icon{min-height:36px}
  /* Solo grupos con Editar/Archivar/Eliminar: rejilla ordenada; eliminar a ancho completo */
  .p2-actions:has([data-lifecycle]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .p2-actions:has([data-lifecycle]) .btn{width:100%;white-space:normal}
  .p2-actions .btn[data-lifecycle="delete"]{grid-column:1/-1;margin-left:0}
  .project-card .row-actions button{min-height:36px}
  .project-card .row-actions [data-project-id]{width:36px}
  .record-actions-cell .row-actions button{width:36px;height:36px}
  .modal footer{flex-wrap:wrap}
  .modal footer .btn{flex:1 1 auto}
}

@media (prefers-reduced-motion:reduce){
  .btn,button.p2-icon,.project-card .row-actions button,.record-actions-cell .row-actions button{transition:none}
}


/* ════════════════════════════════════════════════════════════════════════
 * SISTEMA DE MARCA Floow3 (referencia: skill Floow3 Design)
 * Paleta oficial: Marfil, Vino, Granate y tintes Vino 8/15/70 %.
 * «Oscuro de marca»: 4 niveles derivados del Vino #570617 multiplicado por
 * 0.22 / 0.32 / 0.44 / 0.62 (mismo matiz, sin colores nuevos).
 * Sin degradados, sin sombras, sin blanco ni negro puros.
 * Contraste: Marfil y Vino 15 % son los únicos textos sobre oscuro (AA);
 * Granate solo como relleno con texto Marfil o como detalle decorativo.
 * ════════════════════════════════════════════════════════════════════════ */
:root{
  --marfil:#EFEAE4; --vino:#570617; --granate:#800B1E;
  --vino-8:#E3D8D4; --vino-15:#D8C8C5; --vino-70:#854A54;
  --f3-noche:#130105; --f3-superficie:#1C0207; --f3-elevada:#26030A; --f3-linea:#36040E;
  --f3-font:Inter,system-ui,sans-serif; --f3-font-title:Quicksand,Inter,system-ui,sans-serif;
  /* Alias que usa el código existente (también en estilos en línea y gráficas) */
  --bg:#130105; --surface:#1C0207; --surface2:#26030A; --line:#36040E; --text:#EFEAE4; --muted:#D8C8C5;
  --accent:#EFEAE4; --violet:#D8C8C5; --orange:#854A54; --red:#800B1E; --blue:#D8C8C5; --success:#EFEAE4;
  --radius:12px; --shadow:none;
  --f3-ink:#570617; --f3-accent:#EFEAE4; --f3-accent-hover:#E3D8D4; --f3-accent-press:#D8C8C5;
  --f3-surface-1:#1C0207; --f3-surface-2:#26030A; --f3-surface-3:#36040E; --f3-line:#36040E; --f3-line-strong:#854A54;
  --f3-text:#EFEAE4; --f3-text-soft:#EFEAE4; --f3-muted:#D8C8C5; --f3-danger:#EFEAE4; --f3-danger-strong:#800B1E; --f3-amber:#D8C8C5; --f3-ivory:#EFEAE4;
  --f3-radius-btn:10px; --f3-radius-sm:8px;
  color-scheme:dark;
}

/* Plano: sin sombras ni brillos (la skill prohíbe sombras fuertes y degradados) */
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
html,body{background:var(--f3-noche)!important;color:var(--marfil)}
body{font-family:var(--f3-font)}
button,input,select,textarea{font-family:inherit}
::selection{background:var(--vino-15);color:var(--vino)}

/* Tipografía: Quicksand Bold en titulares y cifras · Inter en el resto */
h1,h2,h3,h4,.topbar h1,.modal h2,.section-row h2,.metric .value,.p2-kpi b,.p2-detail-head h3,.p2-detail-grid b,
.project-stats b,.tool-card .tool-numbers b,.member-grid b,.p2-stat-grid b,.donut::after{font-family:var(--f3-font-title)!important;font-weight:700}
.topbar h1{letter-spacing:-.01em}
.eyebrow,.nav-label,.p2-nav-label,.section-row span,.metric .label,th,.p2-kpi span,.p2-stat-grid span,.p2-detail-grid span,.member-grid span,.tool-numbers,.chart-card h3 span,.p2-column h3,.p2-day-name,.p2-day-num{font-family:var(--f3-font)!important;font-weight:600;letter-spacing:.08em}
.eyebrow{color:var(--vino-15)}

/* Sidebar */
.sidebar{background:var(--f3-noche)!important;border-right:1px solid var(--f3-linea)!important}
.sidebar .brand{border-bottom-color:var(--f3-linea)}
.nav-label,.p2-nav-label{color:var(--vino-15)!important}
.nav button{color:var(--vino-15)!important;border-radius:var(--f3-radius-sm)!important}
.nav button:hover{background:var(--f3-elevada)!important;color:var(--marfil)!important}
.nav button.active{background:var(--f3-elevada)!important;color:var(--marfil)!important}
.nav button.active::before{background:var(--marfil)!important}
.nav button i{font-size:0!important;flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--f3-icon) center/contain no-repeat;mask:var(--f3-icon) center/contain no-repeat}
.nav button.active i{color:var(--marfil)!important}
.nav button[data-view="panel"] i{--f3-icon:url(assets/icons/nav-panel.svg)}
.nav button[data-view="records"] i{--f3-icon:url(assets/icons/nav-records.svg)}
.nav button[data-view="projects"] i{--f3-icon:url(assets/icons/nav-projects.svg)}
.nav button[data-view="tools"] i{--f3-icon:url(assets/icons/nav-tools.svg)}
.nav button[data-view="analytics"] i{--f3-icon:url(assets/icons/nav-analytics.svg)}
.nav button[data-view="team"] i{--f3-icon:url(assets/icons/nav-team.svg)}
.nav button[data-view="settings"] i{--f3-icon:url(assets/icons/nav-settings.svg)}
.nav button[data-view="clients"] i{--f3-icon:url(assets/icons/nav-clients.svg)}
.nav button[data-view="campaigns"] i{--f3-icon:url(assets/icons/nav-campaigns.svg)}
.nav button[data-view="pieces"] i{--f3-icon:url(assets/icons/nav-pieces.svg)}
.nav button[data-view="calendar"] i{--f3-icon:url(assets/icons/nav-calendar.svg)}
.nav button[data-view="pipeline"] i{--f3-icon:url(assets/icons/nav-pipeline.svg)}
.nav button[data-view="prompts"] i{--f3-icon:url(assets/icons/nav-prompts.svg)}
.nav button[data-view="performance"] i{--f3-icon:url(assets/icons/nav-performance.svg)}
.nav button[data-view="social"] i{--f3-icon:url(assets/icons/nav-social.svg)}
.sidebar-foot{background:var(--f3-superficie)!important;border:1px solid var(--f3-linea)!important;border-radius:12px!important;color:var(--vino-15)!important}
.sidebar-foot b{color:var(--marfil)!important}
.mobile-nav-toggle{background:var(--marfil)!important;color:var(--vino)!important;font-size:0!important;border-radius:12px!important}
.mobile-nav-toggle::before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:url(assets/icons/menu.svg) center/contain no-repeat;mask:url(assets/icons/menu.svg) center/contain no-repeat}

/* Encabezados */
.topbar{border-bottom-color:var(--f3-linea)!important}
.topbar h1{color:var(--marfil)}
.authenticated-identity{background:var(--f3-superficie)!important;border-color:var(--f3-linea)!important;color:var(--vino-15)!important;font-family:var(--f3-font)!important}
.authenticated-identity::before{background:var(--marfil)!important}
#remoteDataStatus.auth-status,#remoteDataStatus.auth-status.success{color:var(--vino-15)!important;font-family:var(--f3-font)!important}
#remoteDataStatus.auth-status.success::before{background:var(--marfil)!important}
#remoteDataStatus.auth-status.error,.auth-status.error{color:var(--marfil)!important}
.auth-status.success{color:var(--marfil)!important}

/* Superficies: tarjetas, paneles y listados planos, radio 12 px, un solo borde */
.card,.metric,.chart-card,.project-card,.tool-card,.team-card,.setting,#settings .setting,.p2-card,.p2-kpi,.p2-chart,.p2-row,.p2-column,
.p2-account-card,.table-wrap,#records .table-wrap,.p2-calendar-grid,.auth-identity,.p2-detail-grid .card{
  background:var(--f3-superficie)!important;border:1px solid var(--f3-linea)!important;border-radius:12px!important}
.p2-detail-grid .card,.p2-kpi{background:var(--f3-elevada)!important}
.project-card:hover,.p2-card:hover,.p2-row:hover{border-color:var(--vino-70)!important;transform:none!important}
.metric:nth-child(2)::before,.metric:nth-child(4)::before{background:var(--granate)!important}
.metric .label,.metric:nth-child(2) .label,.metric:nth-child(4) .label{color:var(--vino-15)!important}
.metric .value{color:var(--marfil)!important}
.metric .sub,.project-card p,.tool-card p,.member-top p,.p2-card p,.p2-row p,.p2-detail-meta,.activity-item p,.activity-item time,.legend{color:var(--vino-15)!important}
.tool-icon,.avatar,.member-avatar,span.p2-icon{background:var(--f3-elevada)!important;border:1px solid var(--f3-linea)!important;color:var(--marfil)!important;font-family:var(--f3-font)!important}
.p2-empty,.empty{color:var(--vino-15)!important;border-color:var(--f3-linea)!important;border-radius:12px}

/* Gráficas: series en Marfil · Vino 15 % · Vino 70 % · Granate, sin degradados */
.line-chart{background:repeating-linear-gradient(to bottom,transparent 0,transparent 52px,var(--f3-linea) 53px)!important;border-bottom-color:var(--f3-linea)!important}
.line-chart svg stop{stop-color:var(--marfil)!important;stop-opacity:.07!important}
.line-chart svg polyline,#analytics .line-chart svg polyline,.p2-chart svg polyline{stroke:var(--marfil)!important}
.line-chart svg circle,.p2-chart svg circle{fill:var(--marfil)!important}
.line-chart .xlabels{color:var(--vino-15)!important;font-family:var(--f3-font)!important}
.bar-track,.tool-consumption,.progress,.project-card .progress{background:var(--f3-linea)!important}
.bar-fill,#analytics .bar-fill{background:var(--vino-15)!important}
.tool-consumption span,.progress span,.project-card .progress span{background:var(--marfil)!important}
.bar-line b{color:var(--marfil)!important}.bar-line em{color:var(--vino-15)!important;font-family:var(--f3-font)!important}
.donut::after{background:var(--f3-superficie)!important;color:var(--marfil)!important}
.legend b{color:var(--marfil)!important}
.p2-chart{background:var(--f3-superficie)!important}
.line-chart svg,.p2-chart svg,svg{fill:var(--marfil);color:var(--marfil)}

/* Botones */
.btn,button.p2-icon{font-family:var(--f3-font)!important;border-radius:var(--f3-radius-btn)}
.btn{background:var(--f3-elevada);border-color:var(--f3-linea);color:var(--marfil)}
.btn:hover{background:var(--f3-linea);border-color:var(--vino-70);color:var(--marfil)}
.btn.primary,.btn.primary:hover,.btn.primary:active{background:var(--marfil);border-color:var(--marfil);color:var(--vino)}
.btn.primary:hover{background:var(--vino-8);border-color:var(--vino-8)}
.btn.primary:active{background:var(--vino-15);border-color:var(--vino-15)}
.btn.quiet,button.p2-icon{background:transparent;border-color:transparent;color:var(--vino-15)}
.btn.quiet:hover,button.p2-icon:hover{background:var(--f3-elevada);border-color:var(--f3-linea);color:var(--marfil)}
.btn[data-lifecycle="archive"],.project-card .row-actions [data-action-kind="archive"]{background:transparent;border-color:var(--f3-linea);color:var(--vino-15)}
.btn[data-lifecycle="archive"]:hover{background:var(--f3-elevada);border-color:var(--vino-70);color:var(--marfil)}
.btn[data-lifecycle="restore"],.project-card .row-actions [data-action-kind="restore"]{background:transparent;border-color:var(--vino-15);color:var(--marfil)}
.btn[data-lifecycle="restore"]:hover{background:var(--f3-elevada);border-color:var(--marfil);color:var(--marfil)}
.btn[data-lifecycle="delete"],.btn[data-tool-delete],.record-actions-cell .row-actions [data-record-id],.project-card .row-actions [data-project-id]{background:transparent;border-color:var(--granate);color:var(--marfil)}
.btn[data-lifecycle="delete"]:hover,.btn[data-tool-delete]:hover,.record-actions-cell .row-actions [data-record-id]:hover,.project-card .row-actions [data-project-id]:hover{background:var(--granate);border-color:var(--granate);color:var(--marfil)}
.btn.primary#deleteConfirmationAccept{background:var(--granate)!important;border-color:var(--granate)!important;color:var(--marfil)!important}
.btn.primary#deleteConfirmationAccept:hover{background:var(--vino)!important;border-color:var(--vino)!important}
#deleteConfirmation header h2::before{background:var(--marfil)}
.project-card .row-actions button,.record-actions-cell .row-actions button{color:var(--vino-15);border-radius:var(--f3-radius-sm)}
.project-card .row-actions button:hover,.record-actions-cell .row-actions button:hover{background:var(--f3-elevada);border-color:var(--vino-70);color:var(--marfil)}
.record-actions-cell .row-actions [data-record-edit]{background:var(--f3-elevada);border-color:var(--f3-linea)}
.icon-btn,.modal .close{color:var(--vino-15)}
.modal .close:hover{background:var(--f3-elevada);border-color:var(--f3-linea);color:var(--marfil)}
.p2-inline-action{color:var(--marfil)!important;font-family:var(--f3-font)!important}
.p2-inline-action:hover{background:var(--f3-elevada)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5}
:focus-visible{outline:2px solid var(--marfil)!important;outline-offset:3px}

/* Estados sin semáforo: Marfil (activo) · Vino 15 % (en curso) · discontinuo (archivado) · Granate+Marfil (vencido/fallido) */
.p2-status,.project-card header .status,.badge{background:var(--f3-elevada)!important;border:1px solid var(--f3-linea)!important;color:var(--vino-15)!important;font:600 10px/1 var(--f3-font)!important;letter-spacing:.06em}
.p2-status[data-status="Activo"],.p2-status[data-status="Activa"],.project-card header .status[data-status="En producción"],.badge.success,.p2-status.done,.project-card header .status[data-status="Completado"]{color:var(--marfil)!important;border-color:var(--vino-15)!important}
.p2-status.warn,.p2-status.pending,.badge.partial,.project-card header .status[data-status="En revisión"]{color:var(--vino-15)!important;border-color:var(--vino-70)!important}
.p2-status.warn::before,.p2-status.pending::before,.badge.partial::before,.project-card header .status[data-status="En revisión"]::before{background:transparent!important;border:1.5px solid currentColor}
.p2-status[data-status="Archivado"],.p2-status[data-status="Archivada"],.project-card header .status[data-status="Archivado"]{background:transparent!important;border:1px dashed var(--vino-70)!important;color:var(--vino-15)!important}
.p2-status.danger,.p2-status.overdue,.badge.failed{background:var(--granate)!important;border-color:var(--granate)!important;color:var(--marfil)!important}

/* Formularios: campo Elevada, borde Vino 15 % (contorno identificable ≥ 3:1), foco Marfil */
input,select,textarea,.field,.filters input,.filters select,.p2-filters input,.p2-filters select,.p2-form input,.p2-form select,.p2-form textarea,.form-grid input,.form-grid select,.form-grid textarea,#projectArchiveView,.p2-switch select,#settings .setting .field{
  background-color:var(--f3-elevada)!important;border:1px solid var(--vino-15)!important;color:var(--marfil)!important;border-radius:var(--f3-radius-sm)!important;font-family:var(--f3-font)!important}
input:focus,select:focus,textarea:focus{border-color:var(--marfil)!important;outline:none}
input::placeholder,textarea::placeholder{color:var(--vino-15)!important;opacity:1}
select option{background:var(--f3-superficie);color:var(--marfil)}
input,select,textarea{accent-color:var(--marfil)}
.form-grid label,.p2-form label,.setting label,#settings .setting label{color:var(--vino-15)!important}
#settings .setting p{color:var(--vino-15)!important}
.field-hint{color:var(--vino-15)}.field-hint b{color:var(--marfil)}
.file-name{color:var(--marfil)!important}
.p2-field-hint{background:var(--f3-elevada)!important;border-color:var(--vino-70)!important;color:var(--marfil)!important}
#projects > label,.p2-switch{color:var(--vino-15)}

/* Modales y avisos */
.modal-backdrop{background:rgba(19,1,5,.82)!important;backdrop-filter:blur(4px)}
.modal,.p2-modal{background:var(--f3-superficie)!important;border:1px solid var(--f3-linea)!important;border-radius:12px!important}
.p2-modal .modal-tabs{border-bottom-color:var(--f3-linea)!important}
.p2-modal .modal-tabs button{color:var(--vino-15)!important;border-radius:var(--f3-radius-sm)!important}
.p2-modal .modal-tabs button.active{background:var(--f3-elevada)!important;color:var(--marfil)!important;border-color:var(--vino-15)!important}
.toast,.p2-notice{background:var(--marfil)!important;color:var(--vino)!important;border-radius:var(--f3-radius-btn)!important;font-family:var(--f3-font)!important}
.p2-notice.error{background:var(--granate)!important;color:var(--marfil)!important}
.p2-notice.info{background:var(--f3-elevada)!important;color:var(--marfil)!important;border:1px solid var(--vino-15)}
.auth-identity{color:var(--marfil)!important}

/* Tablas y listados */
th,#records th{background:var(--f3-elevada)!important;color:var(--vino-15)!important;border-bottom:1px solid var(--f3-linea)!important}
td,#records td{border-top-color:var(--f3-linea)!important;color:var(--vino-15)!important}
#records td:nth-child(3),#records td:nth-child(4),#records .project-name{color:var(--marfil)!important}
.id{color:var(--vino-15)!important;font-family:var(--f3-font)!important}
#records tbody tr:hover{background:var(--f3-elevada)!important}
.record-actions-cell,th.record-actions-cell{background:var(--f3-superficie)!important}
#records tbody tr:hover .record-actions-cell{background:var(--f3-elevada)!important}
.activity-item{border-bottom-color:var(--f3-linea)!important}.activity-item b{color:var(--marfil)!important}

/* Pipeline y calendario */
.p2-column{background:var(--f3-superficie)!important}
.p2-column h3{color:var(--vino-15)!important}
.p2-column.dragover{outline:1px solid var(--marfil)!important;background:var(--f3-elevada)!important}
.p2-piece{background:var(--f3-elevada)!important;border:1px solid var(--f3-linea)!important;border-radius:10px!important;color:var(--marfil)!important}
.p2-piece small{color:var(--vino-15)!important}
.p2-day,.p2-day-name{background:var(--f3-superficie)!important;border-color:var(--f3-linea)!important;color:var(--vino-15)!important}
.p2-event{background:var(--f3-elevada)!important;color:var(--marfil)!important;border-radius:6px}
.p2-event.pending{background:var(--f3-elevada)!important;color:var(--vino-15)!important}
.p2-event.overdue{background:var(--granate)!important;color:var(--marfil)!important}
.p2-event.done{background:var(--f3-linea)!important;color:var(--marfil)!important}
.p2-prompt-text{background:var(--f3-elevada)!important;border-color:var(--f3-linea)!important;color:var(--marfil)!important;font-family:var(--f3-font)!important;border-radius:10px!important}
.p2-kpi span{color:var(--vino-15)!important}.p2-kpi b{color:var(--marfil)!important}