/* =========================================================
   UI — V3 Enterprise (Profile / Email / Password + Home)
   Limpio, accesible, responsive, light/dark pro
   ========================================================= */

/* --------- Variables --------- */
:root{
  --bg: #0e1116;
  --surface: #141922;
  --panel: #1b2230;
  --panel-2: #1f2838;
  --border: #2a3548;
  --text: #e8ecf4;
  --muted: #a7b0c3;
  --primary: #2563eb;     /* azul corporativo */
  --primary-2: #7c3aed;   /* acento secundario */
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;

  --radius-xl: 16px;
  --radius: 12px;
  --radius-sm: 8px;

  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 6px 18px rgba(0,0,0,.22);

  --ring: 0 0 0 3px rgba(37, 99, 235, .25);

  --font: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light){
  :root{
    --bg: #f6f8fb;
    --surface: #ffffff;
    --panel: #ffffff;
    --panel-2: #f7f9fc;
    --border: #e6eaf2;
    --text: #0e1726;
    --muted: #5d6b86;
    --shadow-1: 0 24px 50px rgba(20, 34, 66, .09);
    --shadow-2: 0 12px 28px rgba(20, 34, 66, .08);
    --ring: 0 0 0 3px rgba(37, 99, 235, .25);
  }
}

/* --------- Reset suave --------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 400px at 10% -10%, rgba(124,58,237,.12), transparent 50%),
    radial-gradient(800px 360px at 120% 10%, rgba(37,99,235,.10), transparent 45%),
    linear-gradient(180deg, var(--bg), var(--bg));
}

/* --------- Topbar opcional --------- */
.topbar{
  width: 100%;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap{
  max-width: 1100px; margin: 0 auto; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand{ display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand .dot{ width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(45deg, var(--primary), var(--primary-2)); }

/* --------- Página / contenedor --------- */
body.user-page{
  display: grid;
  place-items: start center;
  padding: clamp(24px, 4vw, 56px) 16px;
}
.container{
  width: min(960px, 100%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  padding: clamp(22px, 4vw, 34px);
  position: relative;
  overflow: hidden;
}
.container::after{
  content: "";
  position: absolute; inset: -100px auto auto -100px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(124,58,237,.18), transparent 62%);
  pointer-events: none; filter: blur(6px);
}

/* --------- Cabecera de página --------- */
.page-title{
  margin: 0 0 6px 0;
  font-size: clamp(22px, 3.5vw, 30px);
  letter-spacing: .2px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.page-subtitle{ margin: 0 0 18px 0; color: var(--muted); font-size: 0.975rem; }

/* --------- Secciones / Cards --------- */
.section{ margin: 18px 0 10px; }
.card{
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-2);
}
.card + .card{ margin-top: 12px; }
.card-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-title{ font-weight: 700; font-size: 1.05rem; }
.card-desc{ color: var(--muted); font-size: .95rem; }

/* --------- Grid de datos (perfil) --------- */
.profile-info{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.info-item{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.info-item .label{ color: var(--muted); font-size: .86rem; display: block; margin-bottom: 6px; }
.info-item .value{ font-weight: 600; word-break: break-word; }
@media (max-width: 760px){ .profile-info{ grid-template-columns: 1fr; } }

/* --------- KPIs (opcional) --------- */
.kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 10px 0 4px; }
.kpi{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; }
.kpi .k{ color: var(--muted); font-size: .85rem; }
.kpi .v{ font-weight: 800; font-size: 1.25rem; margin-top: 4px; }
@media (max-width: 760px){ .kpis{ grid-template-columns: 1fr; } }

/* --------- Formularios --------- */
.form-box{ display: grid; gap: 14px; }
.form-group{ display: grid; gap: 8px; }
.form-group label{ color: var(--muted); font-weight: 600; letter-spacing: .2px; }

input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width: 100%; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  outline: none; transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.03);
}
input::placeholder, textarea::placeholder{ color: rgba(167,176,195,.65); }
input:focus, textarea:focus, select:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: var(--ring);
  background: #0f1522;
}
@media (prefers-color-scheme: light){ input:focus, textarea:focus, select:focus{ background: #ffffff; } }

.error, .form-group .errorlist{
  color: var(--danger);
  background: rgba(239, 68, 68, .10);
  border: 1px solid rgba(239, 68, 68, .35);
  padding: 10px 12px; border-radius: 10px; font-size: .94rem;
}

/* --------- Acciones / Botones --------- */
.actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.btn{
  --bg: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg, var(--bg), var(--primary-2));
  border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,99,235,.28); }
.btn:active{ transform: translateY(0); }
.btn.secondary{ --bg: #273141; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none; }
.btn.ghost{ background: transparent; color: var(--primary); border: 1px dashed var(--border); box-shadow: none; }

/* --------- Mensajes (Django messages) --------- */
.messages{ list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.messages li{ padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.messages li.success{ border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
.messages li.info{ border-color: rgba(37,99,235,.45); background: rgba(37,99,235,.12); }
.messages li.warning{ border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }
.messages li.error{ border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.14); }

/* --------- Tablas --------- */
.data-table{
  width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.data-table th, .data-table td{ padding: 12px 14px; text-align: left; }
.data-table thead th{ background: linear-gradient(180deg, var(--panel-2), var(--surface)); color: var(--muted); font-weight: 700; border-bottom: 1px solid var(--border); }
.data-table tbody tr + tr td{ border-top: 1px solid var(--border); }
.data-table tbody tr:hover td{ background: rgba(37,99,235,.06); }

/* --------- Enlaces --------- */
a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

/* --------- Utilidades --------- */
.mt-0{ margin-top: 0 !important; }
.mb-0{ margin-bottom: 0 !important; }
.center{ text-align: center; }
.right{ text-align: right; }

/* --------- Accesibilidad / Motion --------- */
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } }

/* ==== Botones Home: Logout + Account ==== */
.container form .logout-button,
.container form .account-button{
  -webkit-appearance: none; appearance: none; background: none; border: 0; margin: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: 1rem; line-height: 1.2; color: #fff;
  padding: 10px 18px; border-radius: 10px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.container form .logout-button{ background: linear-gradient(135deg, #ef4444, #b91c1c); border: 1px solid rgba(255,255,255,0.10); }
.container form .logout-button:hover{ background: linear-gradient(135deg, #f87171, #dc2626); transform: translateY(-2px); }
.container form .account-button{ background: linear-gradient(135deg, var(--primary), var(--primary-2)); border: 1px solid rgba(255,255,255,0.10); }
.container form .account-button:hover{ filter: brightness(1.08); transform: translateY(-2px); }
.container form .logout-button:focus-visible,
.container form .account-button:focus-visible{ outline: none; box-shadow: var(--ring), 0 6px 16px rgba(0,0,0,0.28); }
.container form{ display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
@media (max-width: 600px){ .container form{ justify-content: center; } }

/* ====== Search bar ====== */
.search-form{ display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; }
.search-bar{
  flex: 1; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.search-bar:focus{ border-color: rgba(37,99,235,.55); box-shadow: var(--ring); }
.search-button{
  all: unset; display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 700;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.search-button:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,99,235,.28); }

/* ====== Filtros compactos (☰ + popup) ====== */
.filters{ position: relative; display: inline-block; }
.filter-button{
  all: unset; display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 800; font-size: 16px; cursor: pointer;
  box-shadow: 0 8px 18px rgba(37,99,235,.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.filter-button:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(37,99,235,.28); }
.filter-button:focus-visible{ outline: none; box-shadow: var(--ring), 0 8px 18px rgba(37,99,235,.22); }

/* ===== FIX DURO: popup 100% a la IZQUIERDA y Status inline ===== */

/* Nada centrado dentro del popup */
/* Popup fijo al viewport: no lo corta el container */
.filter-popup{
  position: fixed !important;   /* <- clave */
  top: 64px;                    /* se recalcula por JS al abrir */
  left: 16px;                   /* se recalcula por JS al abrir */
  z-index: 9999 !important;     /* por encima del panel */
}

/* si tu .container tenía overflow hidden, da igual al ser fixed, pero
   si quieres que otras cosas puedan desbordar, puedes abrirlo: */

.filter-popup * {
  text-align: left !important;
}

/* El formulario del popup apilado y pegado a la izquierda */
.filter-popup form {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* 👈 izquierda */
  gap: 8px !important;
}

/* Títulos y filas pegados a la izquierda */
.filter-popup .fp-title,
.filter-popup strong,
.filter-popup label {
  display: block !important;
  margin: 0 0 6px 0 !important;
}

/* Grid de categorías a la izquierda, sin centrados raros */
.filter-popup .fp-checkgrid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px 10px !important;
  justify-items: start !important;      /* 👈 */
}
.filter-popup .fp-check {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* 👈 */
  gap: 6px !important;
}

/* STATUS: etiqueta a la IZQUIERDA y select a la DERECHA en la MISMA LÍNEA */
.filter-popup .status-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;  /* 👈 */
  gap: 10px !important;
  width: 100% !important;
  margin: 6px 0 !important;
}
.filter-popup .status-row label {
  margin: 0 !important;
  white-space: nowrap !important;
}
.filter-popup .status-row select {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;   /* no se estira raro */
}

/* “Only new” también a la izquierda */
.filter-popup .fp-checksolo {
  align-self: stretch !important;
}
.filter-popup .fp-checksolo .fp-check {
  justify-content: flex-start !important;
}

/* Botón Apply ocupa ancho y queda alineado con el contenido */
.filter-popup .fp-actions {
  align-self: stretch !important;
}
.filter-popup .apply-button {
  width: 100% !important;
  display: inline-flex !important;
  justify-content: center !important;
  padding: 10px 12px !important;
}

/* ====== SOP list ====== */
.sop-item{
  position: relative; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-2);
}
.sop-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sop-date{ color: var(--muted); font-size: .9rem; font-weight: 500; }
.sop-status{
  display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; font-weight: 700;
  padding: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
}
.sop-status.completed{ color: #10b981; border-color: rgba(16,185,129,.45); background: rgba(16,185,129,.12); }
.sop-status.pending{ color: #ef4444; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.14); }
.sop-status.tryagain{ color: #f59e0b; border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.12); }

.btn-view{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px; border-radius: 10px; text-decoration: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff; font-weight: 700;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; margin-top: 10px;
}
.btn-view:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px rgba(37,99,235,.28); }
.new-badge{ z-index: 10; }