﻿/* base.css - MotoMejia Design System: base, botones, forms, utilidades */
html { scroll-behavior: smooth; }
body {
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--mm-fondo);
  color: var(--mm-texto);
}
::selection { background: var(--mm-primario); color: #fff; }
.mm-contenedor { width: 100%; max-width: var(--mm-contenedor); margin-inline: auto; padding-inline: 20px; }
.mm-titulo-seccion { font-size: clamp(1.6rem,3vw,2.2rem); font-weight:800; letter-spacing:-0.02em; margin-bottom:4px; }
.mm-subtitulo-seccion { color: var(--mm-texto-suave); margin-bottom:28px; }

.mm-migas { display:flex; flex-wrap:wrap; gap:6px; font-size:0.85rem; color:var(--mm-texto-suave); padding-block:14px; }
.mm-migas a { color:var(--mm-texto-suave); transition:color 0.15s; text-decoration:none; }
.mm-migas a:hover { color:var(--mm-primario); }
.mm-migas .mm-migas-actual { color:var(--mm-texto); font-weight:600; }

.mm-boton {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 22px; min-height:44px; border-radius:var(--mm-radio-m);
  font-weight:700; font-size:0.95rem; line-height:1.3;
  transition:transform var(--mm-t-rapida) var(--mm-ease),
    box-shadow var(--mm-t-medio) var(--mm-ease),
    background var(--mm-t-medio) var(--mm-ease),
    border-color var(--mm-t-rapida) var(--mm-ease),
    opacity var(--mm-t-rapida) var(--mm-ease);
  border:1px solid transparent; white-space:nowrap; cursor:pointer; text-decoration:none;
}
.mm-boton:hover { transform:translateY(-2px); }
.mm-boton:active { transform:translateY(0) scale(0.98); }
.mm-boton-primario { background:var(--mm-primario); color:#fff; box-shadow:0 4px 16px rgba(7,87,213,0.25); }
.mm-boton-primario:hover { background:var(--mm-primario-claro); box-shadow:0 8px 28px rgba(7,87,213,0.35); }
.mm-boton-oscuro { background:var(--mm-fondo-2); color:var(--mm-texto); border-color:var(--mm-borde); box-shadow:var(--mm-sombra-s); }
.mm-boton-oscuro:hover { background:var(--mm-acento); border-color:var(--mm-primario); box-shadow:var(--mm-sombra-m); }
.mm-boton-contorno { background:transparent; border-color:var(--mm-borde); color:var(--mm-texto); }
.mm-boton-contorno:hover { border-color:var(--mm-primario); background:var(--mm-acento); color:var(--mm-primario); }
.mm-boton-accion { background:var(--mm-accion); color:#fff; box-shadow:0 6px 20px rgba(255,122,0,0.3); }
.mm-boton-accion:hover { background:var(--mm-accion-hover); box-shadow:0 10px 30px rgba(255,122,0,0.4); }
.mm-boton-whatsapp { background:var(--mm-whatsapp); color:#fff; box-shadow:0 6px 22px rgba(37,211,102,0.45); }
.mm-boton-whatsapp:hover { background:var(--mm-whatsapp-hover); box-shadow:0 12px 32px rgba(37,211,102,0.6); }
.mm-boton:disabled { opacity:0.5; cursor:not-allowed; transform:none; }
.mm-boton-sm { padding:8px 16px; font-size:0.88rem; min-height:44px; border-radius:var(--mm-radio-m); }

.mm-campo { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.mm-campo label { font-size:0.85rem; font-weight:700; color:var(--mm-texto); }
.mm-campo input, .mm-campo select, .mm-campo textarea {
  padding:12px 14px; border:1px solid var(--mm-borde); border-radius:var(--mm-radio-s);
  background:var(--mm-superficie); color:var(--mm-texto); font-size:0.95rem;
  transition:border-color var(--mm-t-rapida) var(--mm-ease), box-shadow var(--mm-t-rapida) var(--mm-ease);
  outline:none;
}
.mm-campo input:focus, .mm-campo select:focus, .mm-campo textarea:focus {
  border-color:var(--mm-primario); box-shadow:0 0 0 3px rgba(7,87,213,0.12);
}
.mm-campo select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px; }
.mm-campo textarea { resize:vertical; min-height:100px; }

.mm-d-none { display:none !important; }
.mm-acento { color:var(--mm-primario); }
.mm-texto-suave { color:var(--mm-texto-suave); }
.mm-grid { display:grid; gap:24px; }
.mm-grid-2 { grid-template-columns:repeat(2,1fr); }
.mm-grid-3 { grid-template-columns:repeat(3,1fr); }
.mm-grid-4 { grid-template-columns:repeat(4,1fr); }
.mm-estado-vacio { text-align:center; padding:48px 20px; color:var(--mm-texto-suave); font-size:1rem; }

.mm-esqueleto { background:var(--mm-esqueleto); border-radius:var(--mm-radio-s); animation:mm-brillo 1.6s infinite; }
@keyframes mm-brillo { 0%,100%{opacity:1} 50%{opacity:0.5} }

::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--mm-fondo-2); }
::-webkit-scrollbar-thumb { background:var(--mm-borde-fuerte); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--mm-texto-suave); }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; } }
