/* MyRentAr — App CSS
   ----------------------------------------------------------
   Estilos base + utilidades semanticas que complementan Tailwind.
*/

:root {
  --mra-black:  #0a0a0a;
  --mra-yellow: #dca233;
  --mra-red:    #a0252b;
  --mra-blue:   #4fb3e2;
  --mra-ink:    #1a233a;
  --mra-muted:  #f1f3f7;
  --mra-border: #dbe0e8;
}

* { -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--mra-ink);
}
.font-display { font-family: 'Outfit', 'Inter', system-ui, sans-serif; }

/* ---------------- BOTONES ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.5rem; padding: 0 1rem;
  border-radius: 10px; font-weight: 500; font-size: .9rem;
  transition: background .15s, color .15s, border .15s, transform .05s;
  white-space: nowrap; gap: .5rem; cursor: pointer;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.btn-primary    { background: var(--mra-black); color: #fff; }
.btn-primary:hover { background: #1a1a1a; }

.btn-secondary  { background: var(--mra-muted); color: var(--mra-ink); }
.btn-secondary:hover { background: #e6e9ef; }

.btn-outline    { background: #fff; color: var(--mra-ink); border-color: var(--mra-border); }
.btn-outline:hover { background: var(--mra-muted); }

.btn-ghost      { background: transparent; color: var(--mra-ink); }
.btn-ghost:hover{ background: var(--mra-muted); }

.btn-destructive{ background: #c1272d; color: #fff; }
.btn-destructive:hover { background: #a0252b; }

.btn-premium    { background: linear-gradient(135deg, var(--mra-yellow), #c4882a); color: #1a1a1a; font-weight: 600; }

.btn-sm   { height: 2rem;    padding: 0 .75rem; font-size: .8rem; }
.btn-lg   { height: 3rem;    padding: 0 1.25rem; font-size: 1rem; }
.btn-icon { width: 2.25rem; height: 2.25rem; padding: 0; }

/* ---------------- CARDS ---------------- */
.card {
  background: #fff; border: 1px solid var(--mra-border);
  border-radius: 14px; padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(10,10,10,.04);
}
.card-title { font-weight: 600; color: var(--mra-ink); font-size: 1rem; }
.card-desc  { font-size: .85rem; color: #6b7280; margin-top: 2px; }

/* ---------------- BADGES ---------------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .01em;
}
.badge-success  { background: #d1fae5; color: #065f46; }
.badge-warning  { background: #fef3c7; color: #92400e; }
.badge-danger   { background: #fee2e2; color: #991b1b; }
.badge-info     { background: #dbeafe; color: #1e40af; }
.badge-neutral  { background: var(--mra-muted); color: #374151; }
.badge-premium  { background: #fff7e6; color: #92400e; border: 1px solid #fde68a; }

/* ---------------- FORMS ---------------- */
.form-input, .form-select, .form-textarea {
  width: 100%; height: 2.75rem;
  padding: 0 .85rem;
  border: 1px solid var(--mra-border);
  border-radius: 10px; background: #fff;
  font-size: .92rem; color: var(--mra-ink);
  transition: border .15s, box-shadow .15s;
}
.form-textarea { height: auto; padding: .65rem .85rem; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--mra-blue);
  box-shadow: 0 0 0 3px rgba(79,179,226,.18);
}
.form-label {
  display: block; font-size: .82rem; font-weight: 500;
  color: #374151; margin-bottom: 4px;
}
.form-help  { font-size: .75rem; color: #6b7280; margin-top: 4px; }
.form-error { font-size: .75rem; color: #991b1b; margin-top: 4px; }

/* ---------------- TABLES ---------------- */
.table { width: 100%; border-collapse: collapse; }
.table thead th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .04em; color: #6b7280; font-weight: 600;
  padding: .7rem .8rem; border-bottom: 1px solid var(--mra-border);
}
.table tbody td {
  padding: .85rem .8rem; border-bottom: 1px solid #eef0f4; font-size: .9rem;
}
.table tbody tr:hover { background: rgba(241,243,247,.6); }

/* ---------------- KPI CARDS ---------------- */
.kpi { background: #fff; border: 1px solid var(--mra-border); border-radius: 14px; padding: 1.1rem; }
.kpi-label { font-size: .72rem; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.kpi-value { font-family: 'Outfit', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--mra-ink); margin-top: .15rem; }
.kpi-delta { font-size: .75rem; color: #10b981; margin-top: .15rem; }
.kpi-delta.neg { color: #ef4444; }

/* ---------------- LOGO TYPE (texto degradado) ---------------- */
.logo-type { font-family: 'Outfit', sans-serif; font-weight: 800; letter-spacing: -.01em; }
.logo-type .l-m { color: var(--mra-yellow); }
.logo-type .l-r { color: var(--mra-red); }
.logo-type .l-a { color: var(--mra-blue); }

/* ---------------- ACCESIBILIDAD ---------------- */
:focus-visible { outline: 2px solid var(--mra-blue); outline-offset: 2px; border-radius: 6px; }

/* Portales senior-friendly */
.portal-large { font-size: 17px; }
@media (max-width: 640px) {
  .portal-large { font-size: 18px; }
}

/* Animaciones suaves */
@keyframes mraFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.animate-mra-in { animation: mraFadeIn .25s ease-out both; }