/* ================================================================
   movers-app/css/themes.css · 49ai.S 31y
   Temas visuales alternativos para Petri Movers.

   El tema activo se aplica con `<html data-theme="crm">` desde
   PetriMovers al arrancar (via api pwa_config/theme). Sin data-theme
   se mantiene el look Petrios original (rojo/negro Procoex).

   Para añadir un tema nuevo:
     1. Bloque `:root[data-theme="foo"] { --xxx: ... }`
     2. Entrada en api/modules/pwa_config.php const PWA_THEMES
     3. Aparecerá en el <select> de Tipos y Estados sin más cambios.
   ================================================================ */

/* ─── TEMA 'crm' — coincide con el CRM desktop ────────────────
   Navbar violeta oscuro, primary violeta, tarjetas destacadas
   con borde rojo, chips activos verdes. Es el look que Roberto
   ve en el desktop del CRM (violeta index.html shdr).
*/
:root[data-theme="crm"] {
  /* Variables de app.css */
  --danger:      #4B39CC;   /* primary violeta (era #CC2200 rojo) */
  --danger-2:    #5C4AE0;
  --brand:       #4B39CC;
  --brand-2:     #5C4AE0;

  --bg:          #F1F0F7;
  --surface:     #FFFFFF;
  --border:      #D9D6EA;
  --ink-1:       #0F1219;
  --ink-2:       #4B4B60;
  --ink-3:       #6B6B7E;

  --header-bg:   #0F1219;
  --header-text: #FFFFFF;

  /* Nueva variable: acento rojo Procoex para elementos destacados */
  --accent-red:  #CC2200;
}

/* Header con acento violeta desktop en el borde inferior */
:root[data-theme="crm"] .app-header,
:root[data-theme="crm"] .shell-header {
  background: linear-gradient(180deg, #1E2033 0%, #0F1219 100%);
  border-bottom: 3px solid var(--brand);
}

/* Botones primary con violeta */
:root[data-theme="crm"] .btn-primary,
:root[data-theme="crm"] .btn.primary,
:root[data-theme="crm"] .btn.danger {
  background: var(--brand);
  color: #fff;
}
:root[data-theme="crm"] .btn-primary:active,
:root[data-theme="crm"] .btn.primary:active {
  background: var(--brand-2);
}

/* Chips y badges activos en verde (coherente con inv desktop) */
:root[data-theme="crm"] .chip.active,
:root[data-theme="crm"] .badge-activo {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}

/* Tarjetas con borde-left rojo Procoex (destacado tipo
   "OFICINAS ACS" del CRM desktop) */
:root[data-theme="crm"] .card {
  border-left: 4px solid var(--accent-red);
}

/* FAB / botón flotante también violeta */
:root[data-theme="crm"] .fab,
:root[data-theme="crm"] .home-sync-btn {
  background: var(--brand);
  color: #fff;
}

/* ═══ TEMA 'blanco' — S 32z ══════════════════════════════════════
   Fondo blanco máximo contraste, texto oscuro, header oscuro con
   acento violeta CRM en el borde inferior. Botones primary violeta.

   Diseño:
   · Cuerpo blanco puro para maximizar legibilidad
   · Superficie levemente gris para diferenciar tarjetas del fondo
   · Header idéntico al tema 'crm' (oscuro violeta) para que la
     navegación se lea siempre y no dependa del contraste del fondo
   · Acento violeta CRM (#4B39CC) coherente con el desktop
   ────────────────────────────────────────────────────────────── */
:root[data-theme="blanco"] {
  /* Variables base de app.css redefinidas para modo claro */
  --bg:         #FFFFFF;
  --bg-card:    #F8FAFC;
  --bg-input:   #F1F5F9;
  --text:       #0F172A;
  --text-dim:   #475569;
  --text-faint: #94A3B8;
  --accent:     #4B39CC;
  --accent-hi:  #5C4AE0;
  --border:     rgba(15,23,42,.10);
  --shadow:     0 4px 16px rgba(15,23,42,.10);

  /* Variables temáticas (compatibles con overrides que usa el tema crm) */
  --danger:     #4B39CC;
  --brand:      #4B39CC;
  --brand-2:    #5C4AE0;
  --header-bg:  #0F1219;
  --header-text:#FFFFFF;
  --accent-red: #CC2200;
}

/* Header oscuro con acento violeta debajo (mismo estilo que 'crm') */
:root[data-theme="blanco"] .topbar,
:root[data-theme="blanco"] .app-header,
:root[data-theme="blanco"] .shell-header {
  background: linear-gradient(180deg, #1E2033 0%, #0F1219 100%);
  color: #FFFFFF;
  border-bottom: 3px solid var(--brand);
}
:root[data-theme="blanco"] .topbar .topbar-name,
:root[data-theme="blanco"] .topbar .topbar-title { color: #FFFFFF; }
:root[data-theme="blanco"] .topbar .topbar-sub   { color: #94A3B8; }

/* Iconbtn del header — sobre fondo oscuro necesita fondo semi-blanco */
:root[data-theme="blanco"] .topbar .iconbtn {
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
}
:root[data-theme="blanco"] .topbar .iconbtn:active {
  background: rgba(255,255,255,.16);
}

/* Botones primary → violeta */
:root[data-theme="blanco"] .btn-primary,
:root[data-theme="blanco"] .btn.primary,
:root[data-theme="blanco"] .btn.danger {
  background: var(--brand);
  color: #FFFFFF;
}
:root[data-theme="blanco"] .btn-primary:active,
:root[data-theme="blanco"] .btn.primary:active {
  background: var(--brand-2);
}

/* FAB y sync button → violeta */
:root[data-theme="blanco"] .fab,
:root[data-theme="blanco"] .home-sync-btn {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(75,57,204,.30);
}

/* Chips y badges activos en verde (coherente con inv desktop) */
:root[data-theme="blanco"] .chip.active,
:root[data-theme="blanco"] .badge-activo {
  background: #16a34a;
  border-color: #15803d;
  color: #FFFFFF;
}

/* Tarjetas: borde-left acento rojo Procoex para destacar
   (mismo tratamiento que el tema 'crm' — coherencia de marca) */
:root[data-theme="blanco"] .card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-red);
  background: var(--bg-card);
  color: var(--text);
}

/* Inputs: fondo gris muy claro, texto oscuro, borde sutil */
:root[data-theme="blanco"] .input,
:root[data-theme="blanco"] input[type="text"],
:root[data-theme="blanco"] input[type="tel"],
:root[data-theme="blanco"] input[type="email"],
:root[data-theme="blanco"] input[type="number"],
:root[data-theme="blanco"] input[type="search"],
:root[data-theme="blanco"] textarea,
:root[data-theme="blanco"] select {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
}

/* Toast: mantiene fondo oscuro (contraste con notificación) — no override */

/* Body con fondo blanco puro sin gradiente */
:root[data-theme="blanco"] body {
  background: var(--bg);
  color: var(--text);
}
