/* =========================================================
   InmoPlus UI (ip-*)
   UI tipo app: tokens, botones, inputs, cards, tablas, auth.
   ========================================================= */

/* ---------- Tokens (modo claro por defecto) ---------- */
:root{
  --ip-bg: #ffffff;
  --ip-bg-soft: #f7f8fa;
  --ip-panel: #ffffff;
  --ip-border: #e5e7eb;

  --ip-text: #111827;
  --ip-text-soft: #4b5563;

  --ip-primary: #00A1B0;   /* teal */
  --ip-secondary: #80C342; /* green */

  --ip-info: #38bdf8;
  --ip-success: #16a34a;
  --ip-warning: #f59e0b;
  --ip-danger: #ef4444;

  --ip-radius: 12px;
  --ip-shadow: 0 2px 10px rgba(0,0,0,.06);
  --ip-ff: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  /* Auth */
  --ip-auth-bg: #0f172a;
  --ip-auth-card: #0b1220;
  --ip-auth-input: #0a1426;
}

/* ---------- Dark mode automático ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --ip-bg: #0f172a;
    --ip-bg-soft: #0b1220;
    --ip-panel: #0f172a;
    --ip-border: rgba(255,255,255,.12);

    --ip-text: #e5e7eb;
    --ip-text-soft: #cbd5e1;

    --ip-primary: #22b8c7;
    --ip-secondary: #89d14f;
    --ip-info: #7dd3fc;
    --ip-success: #22c55e;
    --ip-warning: #f9b851;
    --ip-danger: #f87171;

    --ip-shadow: 0 4px 16px rgba(0,0,0,.35);

    --ip-auth-bg: #020617;
    --ip-auth-card: #0b1220;
    --ip-auth-input: #0a1426;
  }
}

/* ---------- Base ---------- */
html, body{
  font-family: var(--ip-ff);
  color: var(--ip-text);
  background: var(--ip-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ip-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

/* ---------- Cards ---------- */
.ip-card{
  background: var(--ip-panel);
  border: 1px solid var(--ip-border);
  border-radius: var(--ip-radius);
  box-shadow: var(--ip-shadow);
  padding: 16px;
}
.ip-card--soft{ background: var(--ip-bg-soft); }

/* ---------- Títulos ---------- */
.ip-h1{ font-size: 28px; font-weight: 800; margin: 0 0 10px; }
.ip-h2{ font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.ip-muted{ color: var(--ip-text-soft); }

/* ---------- Botones ---------- */
.ip-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 14px;
  text-decoration:none !important;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
  box-shadow: var(--ip-shadow);
  color:#032229;
  background: linear-gradient(135deg, var(--ip-secondary), var(--ip-primary));
}
.ip-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.ip-btn:active{ transform: translateY(0); }

.ip-btn--ghost{ background: transparent; color: var(--ip-text); border-color: var(--ip-border); box-shadow:none; }
.ip-btn--danger{ color:#fff; background: linear-gradient(135deg, var(--ip-danger), #dc2626); }
.ip-btn--disabled{ background:#9ca3af; color:#f8fafc; cursor:not-allowed; box-shadow:none; }

/* ---------- Formularios ---------- */
.ip-input, .ip-select, .ip-textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  background: var(--ip-bg-soft);
  border:1px solid var(--ip-border);
  color: var(--ip-text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-size: 15px;
}
.ip-input:focus, .ip-select:focus, .ip-textarea:focus{
  border-color: var(--ip-primary);
  box-shadow: 0 0 0 3px rgba(0,161,176,.18);
}
.ip-field{ display:flex; flex-direction:column; gap:6px; }
.ip-label{ font-size:13px; color: var(--ip-text-soft); font-weight: 700; }

/* ---------- Tabla ---------- */
.ip-table{ width:100%; border-collapse:collapse; }
.ip-table th, .ip-table td{
  padding: 12px;
  border-bottom: 1px solid var(--ip-border);
  text-align:left; vertical-align:top;
  font-size:14px; line-height:1.35;
}
.ip-table th{ color: var(--ip-text-soft); font-weight:800; }

/* ---------- Badges ---------- */
.ip-badge{
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-size:12px; font-weight:900; color:#fff;
}
.ip-badge--ok{ background: var(--ip-success); }
.ip-badge--warn{ background: var(--ip-warning); }
.ip-badge--muted{ background: #64748b; }

/* ---------- Auth (Login/Register) ---------- */
.ip-auth-wrap{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 32px);
  background:
    radial-gradient(1200px 800px at 10% -10%, #12203a 0%, transparent 60%),
    var(--ip-auth-bg);
}

.ip-auth-card{
  width: min(92vw, 460px);
  background: var(--ip-auth-card);
  color: var(--ip-text);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,.25);
  padding: clamp(18px, 3.5vw, 28px);
}

.ip-auth-brand{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom: 10px; }
.ip-auth-logo{
  width: 150px; max-width: 80%;
  background: #0b1220;
  border-radius: 12px;
  padding: 10px;
  border: 2px solid rgba(128,195,66,.8);
  box-shadow: 0 4px 12px rgba(0,0,0,.20);
}
.ip-auth-title{ font-size: 22px; font-weight: 900; margin: 0 0 14px; text-align:center; }

.ip-auth-input{
  width: 100%;
  background: var(--ip-auth-input);
  color: var(--ip-text);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  font-size: 15px;
}
.ip-auth-input:focus{
  border-color: rgba(34,184,199,.9);
  box-shadow: 0 0 0 3px rgba(34,184,199,.18);
}

.ip-auth-row{ display:grid; gap:10px; margin: 10px 0 14px; }
.ip-remember{ display:flex; align-items:center; gap:10px; color:var(--ip-text-soft); font-size:14px; }

.ip-link{ color: var(--ip-secondary); text-decoration:none; font-weight: 800; }
.ip-link:hover{ text-decoration: underline; }

.ip-alert{
  margin: 8px 0 14px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
}
.ip-alert--error{ background:#2a1010; border:1px solid #5a1b1b; color:#fecaca; }
.ip-alert--ok{ background:#0f2a10; border:1px solid #1f7a3a; color:#b7f7c5; }

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  .ip-table th:nth-child(3), .ip-table td:nth-child(3){ display:none; }
}