/* =====================================================================
   Estilo común de ATCCO Plus para los paneles (Mi Comercio, Caja,
   Despacho, Reparto, Empresas aliadas y la página de inicio).
   Misma letra, mismo logo y el mismo modo claro / oscuro que la app de
   clientes. El modo lo pone /js/marca.js en <html data-tema="...">.
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
html[data-tema="claro"] { color-scheme: light; }
body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
input, select, textarea, button { font-family: inherit; }
/* 16 px mínimo en los campos: el iPhone no hace zoom al tocarlos */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: max(16px, 1em); }
button, a, summary { -webkit-tap-highlight-color: transparent; }

/* Al tocar, los botones se "hunden" apenas: se siente que respondieron */
button:not(:disabled), summary, a[class*="rounded"] { transition: transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
button:not(:disabled):active, summary:active, a[class*="rounded"]:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active, summary:active, a[class*="rounded"]:active { transform: none; }
}

/* ---------- Logo "ATCCO / PLUS" (el dibujo lo agrega marca.js) ---------- */
.mk-logo { display: block; color: #ffffff; }
html[data-tema="claro"] .mk-logo { color: #001850; }

/* ---------- Pantallas de ingreso ---------- */
.mk-ingreso { background: radial-gradient(900px 520px at 50% -12%, #12305a 0%, #0b0f14 62%), #0b0f14 !important; }
html[data-tema="claro"] .mk-ingreso { background: radial-gradient(900px 520px at 50% -12%, #dbe7ff 0%, #f3f5f9 62%), #f3f5f9 !important; }
.mk-ingreso form { text-align: left; }
.mk-ingreso .mk-logo { width: 150px; margin: 0 auto 22px; }
.mk-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mk-cabeza h1 { margin: 0 !important; }
.mk-insignia { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; flex: none;
  background: #111a26; border: 1px solid #2a3a50; }
html[data-tema="claro"] .mk-insignia { background: #ffffff; border-color: #d5dbe4; }
.mk-tarjeta { background: rgb(17 26 38 / .72); border: 1px solid #22324a; border-radius: 20px; padding: 24px 20px; box-shadow: 0 24px 60px -30px rgb(0 0 0 / .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
html[data-tema="claro"] .mk-tarjeta { background: rgb(255 255 255 / .9); border-color: #e2e8f0; box-shadow: 0 24px 60px -34px rgb(15 23 42 / .35); }
.mk-pie { text-align: center; font-size: 13px; color: #94a3b8; margin-top: 18px; }
.mk-pie a { color: inherit; font-weight: 700; text-decoration: none; }
html[data-tema="claro"] .mk-pie { color: #64748b; }
html[data-tema="claro"] .mk-pie a { color: #0f172a; }

/* ---------- Botón sol / luna ---------- */
.btn-tema { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 0; cursor: pointer; flex: none;
  background: rgb(148 163 184 / .14); color: #cbd5e1; }
.btn-tema svg { width: 22px; height: 22px; }
.btn-tema .sol { display: none; }
html[data-tema="oscuro"] .btn-tema .sol { display: block; }
html[data-tema="oscuro"] .btn-tema .luna { display: none; }
html[data-tema="claro"] .btn-tema { background: #e9eef4; color: #334155; }
.btn-tema:focus-visible { outline: 3px solid #5b8cff; outline-offset: 2px; }
.mk-tema-fija { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 5; }

/* =====================================================================
   Modo claro: los paneles están escritos en oscuro con clases de Tailwind;
   acá se traducen esos colores a una paleta clara (la misma de la app de
   clientes). Lo que no está en la lista queda igual.
   ===================================================================== */
html[data-tema="claro"] body { background: #f3f5f9 !important; color: #0f172a; }
html[data-tema="claro"] .text-slate-100, html[data-tema="claro"] .text-white:not([class*="bg-"]) { color: #0f172a; }
html[data-tema="claro"] .text-slate-200 { color: #1e293b; }
html[data-tema="claro"] .text-slate-300 { color: #334155; }
html[data-tema="claro"] .text-slate-400 { color: #475569; }
html[data-tema="claro"] .text-slate-500 { color: #64748b; }
html[data-tema="claro"] .text-slate-600 { color: #94a3b8; }
html[data-tema="claro"] .bg-slate-950 { background-color: #f3f5f9; }
html[data-tema="claro"] .bg-slate-950\/95, html[data-tema="claro"] .bg-slate-950\/90 { background-color: rgb(243 245 249 / .96); }
html[data-tema="claro"] .bg-slate-950\/40 { background-color: rgb(255 255 255 / .7); }
html[data-tema="claro"] .bg-slate-900 { background-color: #ffffff; }
html[data-tema="claro"] .bg-slate-900\/80, html[data-tema="claro"] .bg-slate-900\/60 { background-color: rgb(255 255 255 / .92); }
html[data-tema="claro"] .bg-slate-800 { background-color: #e9eef4; }
html[data-tema="claro"] .bg-slate-800\/60, html[data-tema="claro"] .bg-slate-800\/50 { background-color: #eef2f7; }
html[data-tema="claro"] .bg-slate-700 { background-color: #d9e1ea; }
html[data-tema="claro"] .hover\:bg-slate-700:hover, html[data-tema="claro"] .active\:bg-slate-700:active { background-color: #d9e1ea; }
html[data-tema="claro"] .hover\:bg-slate-800:hover, html[data-tema="claro"] .active\:bg-slate-800:active { background-color: #e2e8f0; }
html[data-tema="claro"] .border-slate-800 { border-color: #e2e8f0; }
html[data-tema="claro"] .border-slate-700 { border-color: #cbd5e1; }
html[data-tema="claro"] .border-slate-600 { border-color: #94a3b8; }
html[data-tema="claro"] .placeholder\:text-slate-400::placeholder, html[data-tema="claro"] .placeholder\:text-slate-500::placeholder, html[data-tema="claro"] .placeholder\:text-slate-600::placeholder { color: #94a3b8; }
html[data-tema="claro"] input::placeholder { color: #94a3b8; }
html[data-tema="claro"] .hover\:text-slate-100:hover, html[data-tema="claro"] .hover\:text-slate-200:hover, html[data-tema="claro"] .hover\:text-slate-300:hover { color: #0f172a; }
html[data-tema="claro"] .text-cyan-200, html[data-tema="claro"] .text-cyan-300, html[data-tema="claro"] .text-cyan-400, html[data-tema="claro"] .hover\:text-cyan-300:hover { color: #0e6f8f; }
html[data-tema="claro"] .text-sky-300, html[data-tema="claro"] .text-sky-400 { color: #0369a1; }
html[data-tema="claro"] .text-blue-300, html[data-tema="claro"] .text-blue-400 { color: #1d4ed8; }
html[data-tema="claro"] .text-amber-200, html[data-tema="claro"] .text-amber-300, html[data-tema="claro"] .text-amber-400, html[data-tema="claro"] .text-yellow-300, html[data-tema="claro"] .text-yellow-400 { color: #a15c07; }
html[data-tema="claro"] .text-orange-300, html[data-tema="claro"] .text-orange-400 { color: #c2410c; }
html[data-tema="claro"] .text-emerald-300, html[data-tema="claro"] .text-emerald-400, html[data-tema="claro"] .text-green-300, html[data-tema="claro"] .text-green-400 { color: #047857; }
html[data-tema="claro"] .text-red-300, html[data-tema="claro"] .text-red-400, html[data-tema="claro"] .text-rose-300, html[data-tema="claro"] .text-rose-400, html[data-tema="claro"] .hover\:text-red-300:hover { color: #c62828; }
html[data-tema="claro"] .text-violet-300, html[data-tema="claro"] .text-violet-400, html[data-tema="claro"] .text-purple-300, html[data-tema="claro"] .text-purple-400, html[data-tema="claro"] .text-fuchsia-300, html[data-tema="claro"] .text-pink-300 { color: #7c3aed; }
html[data-tema="claro"] .from-slate-800 { --tw-gradient-from: #ffffff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-tema="claro"] .to-slate-900 { --tw-gradient-to: #e8eef6 var(--tw-gradient-to-position); }
html[data-tema="claro"] .to-slate-950 { --tw-gradient-to: #f3f5f9 var(--tw-gradient-to-position); }
/* Tablas de los paneles */
html[data-tema="claro"] th { color: #64748b; }
html[data-tema="claro"] tbody tr { border-top-color: #e2e8f0; }
/* Los botones con degradé llevan texto oscuro: queda bien en los dos modos */
html[data-tema="claro"] .tab-btn[data-active="true"] { background: #0b1f4b; color: #ffffff; }