/* 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; }

/* ---------------- ADMIN THEME V13 ---------------- */
.mra-admin-body {
  background:
    radial-gradient(circle at top left, rgba(220,162,51,.10), transparent 28rem),
    radial-gradient(circle at top right, rgba(79,179,226,.12), transparent 30rem),
    #f6f8fb;
}
.mra-admin-body main { background: transparent; }
.mra-admin-body .card,
.mra-admin-body .kpi {
  border-color: rgba(219,224,232,.9);
  box-shadow: 0 14px 40px -28px rgba(16,37,77,.38), 0 1px 2px rgba(16,37,77,.06);
}
.mra-admin-body .kpi {
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}
.mra-admin-body .table tbody tr:hover { background: rgba(79,179,226,.07); }
.mra-admin-body #mra-sidebar {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.mra-admin-body header.sticky {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(16px);
}

html.dark .mra-admin-body {
  --mra-ink: #e9eef8;
  --mra-muted: #111827;
  --mra-border: #253047;
  color: #e9eef8;
  background:
    radial-gradient(circle at top left, rgba(220,162,51,.14), transparent 28rem),
    radial-gradient(circle at top right, rgba(79,179,226,.14), transparent 30rem),
    #07111f;
}
html.dark .mra-admin-body .bg-white,
html.dark .mra-admin-body .card,
html.dark .mra-admin-body .kpi,
html.dark .mra-admin-body #mra-sidebar,
html.dark .mra-admin-body header.sticky,
html.dark .mra-admin-body footer {
  background-color: rgba(12, 23, 40, .94) !important;
  color: #e9eef8;
  border-color: #253047 !important;
}
html.dark .mra-admin-body .card,
html.dark .mra-admin-body .kpi {
  box-shadow: 0 18px 46px -30px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.03);
}
html.dark .mra-admin-body .text-ink,
html.dark .mra-admin-body .card-title,
html.dark .mra-admin-body .kpi-value,
html.dark .mra-admin-body .font-bold,
html.dark .mra-admin-body .font-semibold {
  color: #f8fafc !important;
}
html.dark .mra-admin-body .text-gray-400,
html.dark .mra-admin-body .text-gray-500,
html.dark .mra-admin-body .text-gray-600,
html.dark .mra-admin-body .text-gray-700,
html.dark .mra-admin-body .card-desc,
html.dark .mra-admin-body .form-help,
html.dark .mra-admin-body .kpi-label {
  color: #9caec8 !important;
}
html.dark .mra-admin-body .form-input,
html.dark .mra-admin-body .form-select,
html.dark .mra-admin-body .form-textarea {
  background: #0b1627;
  color: #f8fafc;
  border-color: #2b3850;
}
html.dark .mra-admin-body .form-input::placeholder,
html.dark .mra-admin-body .form-textarea::placeholder { color: #6f8098; }
html.dark .mra-admin-body .btn-outline,
html.dark .mra-admin-body .btn-secondary,
html.dark .mra-admin-body .btn-ghost {
  background: rgba(255,255,255,.04);
  color: #f8fafc;
  border-color: #2b3850;
}
html.dark .mra-admin-body .btn-outline:hover,
html.dark .mra-admin-body .btn-secondary:hover,
html.dark .mra-admin-body .btn-ghost:hover {
  background: rgba(79,179,226,.10);
}
html.dark .mra-admin-body .table thead th,
html.dark .mra-admin-body .table tbody td { border-color: #253047; }
html.dark .mra-admin-body .table tbody tr:hover { background: rgba(79,179,226,.10); }
html.dark .mra-admin-body .bg-muted,
html.dark .mra-admin-body .bg-muted\/20,
html.dark .mra-admin-body .bg-muted\/30,
html.dark .mra-admin-body .bg-muted\/40 {
  background-color: rgba(255,255,255,.045) !important;
}
html.dark .mra-admin-body .border-border { border-color: #253047 !important; }
html.dark .mra-admin-body .shadow-sm { box-shadow: 0 14px 40px -28px rgba(0,0,0,.7) !important; }