/* ================================================================
   Tomodachi — Design System (CSS DOMINANTE de estructura)
   ================================================================
   Este archivo es la fuente única de verdad del estilo de la interfaz.
   Se carga DESPUÉS de main.css / variables.css en TODAS las páginas.
   Controla la estructura visual (forma, radios, sombras, tipografía,
   animaciones) de los componentes base. Cambiar aquí afecta todo el
   sistema sin tocar cada módulo.

   Convención:
   - No elimina clases existentes: refina/sobrescribe con mayor especificidad.
   - Usa las variables de tema de variables.css (--primary-color, etc.).
   - Añade variables propias bajo --ds-* para un ajuste centralizado.
   ================================================================ */

/* ---------- Tipografía ---------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Tipografía */
  --font-heading: 'Sora', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Radios */
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 20px;
  --ds-radius-pill: 100px;

  /* Elevaciones */
  --ds-shadow-sm: 0 2px 10px -4px rgba(0,0,0,.14);
  --ds-shadow-md: 0 8px 22px -10px color-mix(in srgb, var(--text-color) 22%, transparent);
  --ds-shadow-lg: 0 22px 50px -14px color-mix(in srgb, var(--text-color) 30%, transparent);

  /* Tipografía de encabezados */
  --hd: var(--font-heading);
  --bd: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.card-header, .dashboard-card .card-title, .stat-card .stat-title,
.section-title, .page-title, .modal-header h3, .drawer-header h3,
.panel-title, .box-title {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Fondo con textura SVG sutil ---------- */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23000000' stroke-opacity='0.028' stroke-width='1.1'%3E%3Cpath d='M0 40h80M40 0v80'/%3E%3Ccircle cx='40' cy='40' r='13'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
[data-theme="dark"] body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1.1'%3E%3Cpath d='M0 40h80M40 0v80'/%3E%3Ccircle cx='40' cy='40' r='13'/%3E%3Ccircle cx='40' cy='40' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ================================================================
   BOTONES — forma cápsula
   ================================================================ */
.btn {
  border-radius: var(--ds-radius-pill) !important;
  font-family: var(--font-heading);
  font-weight: 600;
  padding: 11px 24px;
  box-shadow: var(--ds-shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .3s ease,
              background .22s ease, color .22s ease, filter .22s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(1px) scale(.97); box-shadow: none; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary { box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary-color) 70%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--primary-color) 80%, transparent); }

/* Brillos sutiles */
.btn::after {
  content: "";
  position: absolute; top: 0; left: -70%;
  width: 50%; height: 100%;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  opacity: 0;
  transition: left .6s cubic-bezier(.16,1,.3,1), opacity .3s;
  pointer-events: none;
}
.btn:hover::after { left: 130%; opacity: 1; }

/* ================================================================
   INPUTS / SELECTS / TEXTAREA
   ================================================================ */
.input, .form-control, .form-input,
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="date"], input[type="datetime-local"],
input[type="search"], select, textarea {
  border-radius: var(--ds-radius-md) !important;
  border: 1.5px solid var(--border-color);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
  font-family: var(--font-body);
}
.input:focus, .form-control:focus, .form-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
  outline: none;
}
select {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* ================================================================
   CARDS
   ================================================================ */
.card, .card-item, .dashboard-card, .stat-card, .panel, .widget-card, .widget {
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-md);
  overflow: hidden;
}
.card:hover, .dashboard-card:hover, .widget:hover {
  box-shadow: var(--ds-shadow-lg);
  transform: translateY(-2px);
}
.card-header, .card .card-header, .dashboard-card .card-header,
.panel-header, .widget-header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='8' fill='none' stroke='%23000000' stroke-opacity='0.05'/%3E%3Cpath d='M22 4v36M4 22h36' stroke='%23000000' stroke-opacity='0.03'/%3E%3C/svg%3E");
  background-color: var(--bg-lightest, var(--bg-color-slight, transparent));
}
[data-theme="dark"] .card-header,
[data-theme="dark"] .panel-header,
[data-theme="dark"] .widget-header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='8' fill='none' stroke='%23ffffff' stroke-opacity='0.06'/%3E%3Cpath d='M22 4v36M4 22h36' stroke='%23ffffff' stroke-opacity='0.04'/%3E%3C/svg%3E");
}

/* ================================================================
   TABLAS
   ================================================================ */
table, .table, .data-table {
  border-radius: var(--ds-radius-md);
}
th {
  font-family: var(--font-heading);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
table tbody tr,
.table tbody tr,
.data-table tbody tr {
  transition: background .2s ease;
}
table tbody tr:hover,
.table tbody tr:hover,
.data-table tbody tr:hover {
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

/* ================================================================
   BADGES
   ================================================================ */
.badge, .status-badge, .pill {
  border: 1.5px solid color-mix(in srgb, var(--primary-color) 45%, transparent);
  border-radius: var(--ds-radius-pill) !important;
  box-shadow: 0 2px 6px -3px color-mix(in srgb, var(--primary-color) 40%, transparent);
  font-family: var(--font-heading);
  font-weight: 600;
}

/* ================================================================
   TABS
   ================================================================ */
.nav-tabs, .tab-nav, .tabs {
  gap: 6px;
}
.nav-tabs .nav-link, .tab, .tab-btn {
  border-radius: var(--ds-radius-pill);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* ================================================================
   MODALES / DIALOGS / DRAWERS
   ================================================================ */
.modal-content, .modal, .modal-dialog, .dialog-box {
  border-radius: var(--ds-radius-lg) !important;
  box-shadow: var(--ds-shadow-lg);
  overflow: hidden;
}
/* El modal de detalle de venta es un TICKET: esquinas superiores
   redondeadas pero las INFERIORES en punta/rectas (0) para que la
   decoración de dientes de recibo haga el efecto completo.
   También fija un ancho estable desde la apertura (evita el salto al
   pasar de skeleton a contenido con width:fit-content). */
.sale-detail-dialog {
  width: min(92vw, 520px);
}
.sale-detail-dialog .modal-content {
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0 !important;
  overflow: visible;
  width: min(92vw, 520px);
}
.drawer, .drawer-content {
  border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg);
}
.modal-header, .modal-footer,
.drawer-header, .drawer-footer {
  font-family: var(--font-heading);
}

/* Modales / drawers con backdrop con textura SVG sutil (sin blur) */
.client-dialog::backdrop,
.sale-detail-dialog::backdrop,
.dialog::backdrop {
  background-color: rgba(0,0,0,.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Cpath d='M0 30 30 0 60 30 30 60Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}
.relogin-modal, .promo-modal-overlay {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Cpath d='M0 30 30 0 60 30 30 60Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}
body.modal-open .modal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10'%3E%3Cpath d='M0 30 30 0 60 30 30 60Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px;
}

/* ================================================================
   ANIMACIONES CHILL (activadas por js/design-system.js con anime.js)
   ================================================================ */
.ds-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .001s;
}
.ds-stagger > * { will-change: transform, opacity; }

.ds-breathe { animation: dsBreathe 3.2s ease-in-out infinite; }
@keyframes dsBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Utilidades reutilizables de estructura */
.ds-gap-4 { gap: 4px; } .ds-gap-8 { gap: 8px; } .ds-gap-12 { gap: 12px; } .ds-gap-16 { gap: 16px; }
.ds-flex { display: flex; align-items: center; }
.ds-between { justify-content: space-between; }
.ds-center { justify-content: center; }

/* ============ CURSORES NATIVOS POR CONTEXTO ============
   Cursores del sistema según el propósito del elemento, aplicados a
   clases genéricas para que cubran toda la interfaz. */
/* Botones y acciones clicables → pointer */
.btn, button, [role="button"], .nav-item, .nav-link, .tab-btn, .tablink,
.panel-tab-btn, .drawer-tab, .page-btn, .page-num, .pagination-bar a,
.nav-group a, .tooltip-item, .context-menu-item, .dropdown-item,
.gallery-item, .list-item, .product-item-card, .cart-item, .switch-toggle,
.theme-mode-btn { cursor: pointer; }

/* Enlaces → pointer (por si algún link no lo hereda) */
a { cursor: pointer; }
a[href] { cursor: pointer; }

/* Elementos deshabilitados → not-allowed */
.btn:disabled, button:disabled, input:disabled, select:disabled, textarea:disabled,
.badge.disabled, .disabled, .locked, [aria-disabled="true"] { cursor: not-allowed; }

/* Campos de texto/selección → text/pointer según el control */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"], input[type="date"],
textarea { cursor: text; }
input[type="checkbox"], input[type="radio"], label, select, .form-select,
.filter-select, .dropdown-select, .form-check { cursor: pointer; }

/* Ayuda / tooltips → help */
[data-tooltip], .tooltip, .help-icon, .info-icon, .g-name[data-full],
[name="cursor:help"] { cursor: help; }

/* Resize → redimensionamiento nativo */
.resize-handle, .resize-corner, textarea { cursor: default; }

/* Arrastre (drag) → grab / grabbing */
[data-draggable], .drag-handle, .draggable, .move-handle,
[draggable="true"] { cursor: grab; }
[data-draggable]:active, .drag-handle:active, .draggable.dragging,
[draggable="true"]:active { cursor: grabbing; }

/* Menús / abrir menú → context-menu */
[data-context-menu], .context-menu-trigger, .open-menu, .overflow-menu { cursor: context-menu; }