/**
 * Member360 — Utilidades CSS
 *
 * Reemplaza inline styles (style="...") para cumplir CSP sin depender de
 * 'unsafe-inline' en style-src ni style-src-attr.
 *
 * Migración: cambiar style="..." por las clases equivalentes de este archivo.
 * Referencia rápida al final del archivo.
 */

/* =============================================================
   DISPLAY
   ============================================================= */

.d-none         { display: none !important; }
.d-block        { display: block; }
.d-inline       { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex         { display: flex; }
.d-inline-flex  { display: inline-flex; }
.d-grid         { display: grid; }

/* =============================================================
   FLEX UTILITIES
   ============================================================= */

.flex-1            { flex: 1; }
.flex-2            { flex: 2; }
.flex-wrap         { flex-wrap: wrap; }
.flex-col          { flex-direction: column; }
.align-center      { align-items: center; }
.align-start       { align-items: flex-start; }
.justify-center    { justify-content: center; }
.justify-between   { justify-content: space-between; }
.justify-end       { justify-content: flex-end; }

/* display:flex + gap (patrones más comunes) */
.flex-gap-6        { display: flex; gap: 6px; }
.flex-gap-8        { display: flex; gap: 8px; }
.flex-gap-10       { display: flex; gap: 10px; }
.flex-gap-12       { display: flex; gap: 12px; }
.flex-gap-8-wrap   { display: flex; gap: 8px; flex-wrap: wrap; }
.flex-gap-10-wrap  { display: flex; gap: 10px; flex-wrap: wrap; }

/* gap solo (en contenedores ya flex/grid) */
.gap-6  { gap: 6px; }
.gap-8  { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }

/* =============================================================
   GRID UTILITIES
   ============================================================= */

.col-full { grid-column: 1 / -1; }

/* =============================================================
   WIDTH / HEIGHT
   ============================================================= */

.w-100  { width: 100%; }
.w-auto { width: auto; }

/* =============================================================
   SPACING — MARGIN
   ============================================================= */

.m-0        { margin: 0; }
.m-20-0     { margin: 20px 0; }
.mt-0       { margin-top: 0; }
.mt-5       { margin-top: 5px; }
.mt-8       { margin-top: 8px; }
.mt-10      { margin-top: 10px; }
.mt-12      { margin-top: 12px; }
.mt-15      { margin-top: 15px; }
.mt-20      { margin-top: 20px; }
.mt-24      { margin-top: 24px; }
.mt-30      { margin-top: 30px; }
.mb-0       { margin-bottom: 0; }
.mb-5       { margin-bottom: 5px; }
.mb-10      { margin-bottom: 10px; }
.mb-12      { margin-bottom: 12px; }
.mb-15      { margin-bottom: 15px; }
.mb-20      { margin-bottom: 20px; }
.mb-24      { margin-bottom: 24px; }
.mb-30      { margin-bottom: 30px; }
.ml-4       { margin-left: 4px; }
.ml-10      { margin-left: 10px; }
.ml-28      { margin-left: 28px; }
.mr-4       { margin-right: 4px; }

/* =============================================================
   SPACING — PADDING
   ============================================================= */

.p-10       { padding: 10px; }
.p-12       { padding: 12px; }
.p-15       { padding: 15px; }
.p-20       { padding: 20px; }
.p-30       { padding: 30px; }

/* =============================================================
   TEXT — ALIGN
   ============================================================= */

.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }

/* =============================================================
   TEXT — WEIGHT
   ============================================================= */

.fw-400       { font-weight: 400; }
.fw-600       { font-weight: 600; }
.fw-700       { font-weight: 700; }
.fw-bold      { font-weight: bold; }

/* =============================================================
   TEXT — SIZE
   ============================================================= */

.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-32 { font-size: 32px; }

/* =============================================================
   TEXT — COLOR
   ============================================================= */

.text-danger     { color: #e74c3c; }
.text-danger-alt { color: #dc3545; }
.text-success    { color: #28a745; }
.text-success-2  { color: #059669; }
.text-warning    { color: #f39c12; }
.text-info       { color: #3498db; }
.text-info-2     { color: #2196f3; }
.text-primary    { color: #667eea; }
.text-blue       { color: #1a73e8; }
.text-navy       { color: #1d4ed8; }
.text-teal       { color: #0891b2; }
.text-dark-teal  { color: #154360; }
.text-dark-green { color: #1a6635; }
.text-muted      { color: #666; }
.text-muted-2    { color: #7f8c8d; }
.text-muted-3    { color: #888; }
.text-muted-4    { color: #999; }
.text-muted-5    { color: #718096; }
.text-muted-6    { color: #6c757d; }
.text-grey       { color: #64748b; }
.text-warm-grey  { color: #7f8c8d; }
.text-dark       { color: #2c3e50; }
.text-white      { color: white; }

/* Combinaciones frecuentes */
.text-danger-bold  { color: #e74c3c; font-weight: 700; }
.text-primary-bold { color: #667eea; font-weight: bold; }
.text-muted-sm     { color: #666; font-size: 12px; }
.text-muted-sm-mt  { color: #666; font-size: 12px; display: block; margin-top: 5px; }
.text-grey-sm      { color: #6c757d; font-size: 12px; }
.text-grey-sm-mt   { color: #6c757d; font-size: 12px; margin-top: 5px; display: block; }
.text-grey-sm-mt8  { color: #6c757d; font-size: 12px; margin-top: 8px; display: block; margin-left: 28px; }

/* =============================================================
   OPACITY
   ============================================================= */

.opacity-90 { opacity: 0.9; }

/* =============================================================
   MISC
   ============================================================= */

.cursor-pointer   { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-default   { cursor: default; }
.word-break-all   { word-break: break-all; }
.overflow-x-auto  { overflow-x: auto; }
.uppercase        { text-transform: uppercase; }
.font-mono        { font-family: 'Courier New', monospace; }

/* =============================================================
   COMPONENTES M360
   Clases de componente multi-propiedad que reemplazan bloques
   de inline styles reutilizados en múltiples vistas.
   ============================================================= */

/* --- Estado vacío de listas/tablas ---- */
.m360-empty {
    text-align: center;
    padding: 30px;
    color: #999;
}

/* --- Etiqueta meta pequeña (label uppercase) --- */
.m360-label-meta {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
}

/* --- Badge monoespaciado para tokens, IDs, claves --- */
.m360-badge-token {
    background: #f0f4f8;
    color: #555;
    cursor: default;
    font-family: monospace;
    font-weight: 700;
}

/* --- Badge desactivado / gris --- */
.m360-badge-disabled {
    background: #f1f5f9;
    color: #64748b;
}

/* --- Badge primario pequeño --- */
.m360-badge-primary {
    background: #667eea;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
}

/* --- Input estándar del sistema --- */
.m360-input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
}

/* --- Card con border --- */
.m360-card-border {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
}

/* --- Separador suave --- */
.m360-divider {
    border: none;
    border-top: 2px solid #f0eaf7;
    margin: 20px 0;
}

/* --- Código / monoespaciado inline --- */
.m360-code-inline {
    background: #f0f0f0;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 12px;
    word-break: break-all;
}

/* --- Texto con fondo para código/token --- */
.m360-code-block {
    background: #fff;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 11px;
    word-break: break-all;
}

/* --- Bloque debug/pre dark --- */
.m360-debug-block {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 10px;
    border-radius: 4px;
    font-size: 11px;
    overflow-x: auto;
}

/* --- Contador grande + negrita (stat number) --- */
.m360-stat-number {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* --- Texto pequeño con opacidad (subtítulo en card coloreada) --- */
.m360-stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* --- Texto menor con opacidad (para cards de color) --- */
.m360-card-label-sm {
    font-size: 12px;
    opacity: 0.9;
}

/* --- Hint helper debajo de input --- */
.m360-hint {
    color: #666;
    display: block;
    margin-top: 5px;
    font-size: 12px;
}

/* --- Hint azul (estado/info) --- */
.m360-hint-info {
    color: #3498db;
    display: none;
    margin-top: 5px;
}

/* --- Texto muted pequeño con bloque --- */
.m360-text-meta {
    color: #7f8c8d;
    font-size: 13px;
    display: block;
    margin-top: 6px;
}

/* --- Fondo desactivado con cursor bloqueado --- */
.m360-disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
}

/* --- Alerta azul info (con borde izquierdo) --- */
.m360-alert-info {
    background: #e3f2fd;
    padding: 15px;
    border-left: 4px solid #2196f3;
    margin-top: 20px;
}

/* --- Alerta amarilla advertencia --- */
.m360-alert-warning {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #856404;
}

/* --- Bloque info con borde azul --- */
.m360-info-block {
    background: #e8f4fd;
    border-left: 4px solid #3498db;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #2c3e50;
}

/* --- Bloque éxito con borde verde --- */
.m360-success-block {
    background: #e8f8f0;
    border-left: 4px solid #27ae60;
    padding: 10px 16px;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #2c3e50;
}

/* --- Sección de pasos en formulario (fondo gris claro) --- */
.m360-section-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* --- Card blanca con sombra y radius --- */
.m360-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* --- Card con padding grande centrada --- */
.m360-card-centered {
    background: white;
    padding: 40px;
    text-align: center;
    border-radius: 10px;
}

/* --- Descripción/intro de sección --- */
.m360-section-desc {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 18px;
    font-size: 13px;
    line-height: 1.8;
    color: #2c3e50;
}

/* --- Link de acción blanco sobre fondo de color --- */
.m360-action-link {
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    display: inline-block;
}

/* --- Nota inline pequeña con fondo semitransparente --- */
.m360-note-inline {
    background: rgba(0, 0, 0, 0.07);
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
}

/* --- Nota pill blanca sobre fondo de color --- */
.m360-pill-white {
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    display: inline-block;
}

/* --- Card receta/nota dentro de card --- */
.m360-note-card {
    background: white;
    padding: 10px;
    margin: 10px 0;
    border-left: 3px solid #667eea;
    border-radius: 4px;
}

/* --- Fondo verde muy claro (éxito suave) --- */
.m360-bg-success-soft {
    background: #e8f5e9;
}

/* --- Card slot vacío en modo selección --- */
.m360-slot-disabled {
    background: #f0fdf4;
    cursor: default;
    color: #374151;
    border-color: #86efac;
}

/* --- Card receta activa --- */
.m360-receta-activa {
    background: #f0fdf4;
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #065f46;
}

/* --- Sección colapsable / highlight --- */
.m360-receta-inner {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 16px;
}

/* --- Alerta fondo amarillo suave --- */
.m360-alert-yellow {
    background: #fefce8;
    border: 1.5px solid #fde047;
    border-radius: 10px;
    padding: 16px;
}

/* --- Enlace de retorno / rojo urgente --- */
.m360-btn-danger-inline {
    background: red;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
}

/* --- Botón close (en modal con fondo de color) --- */
.m360-btn-close-white {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

/* =============================================================
   REFERENCIA RÁPIDA — MIGRACIÓN
   Reemplaza el atributo style="..." por las clases indicadas.
   ============================================================= */
/*
  style="display:none"         → class="d-none"
  style="display:none;"        → class="d-none"
  style="display: none;"       → class="d-none"
  style="display: inline;"     → class="d-inline"
  style="display: flex; gap: 8px;" → class="flex-gap-8"
  style="display: flex; gap: 10px;" → class="flex-gap-10"
  style="flex:1;"              → class="flex-1"
  style="flex:2"               → class="flex-2"
  style="grid-column: 1/-1"   → class="col-full"
  style="width: 100%;"         → class="w-100"
  style="text-align:center;…"  → class="m360-empty"  (cuando incluye padding + color)
  style="margin-top: 10px;"    → class="mt-10"
  style="margin-top: 20px;"    → class="mt-20"
  style="margin-top: 30px;"    → class="mt-30"
  style="margin-bottom:20px;"  → class="mb-20"
  style="margin: 20px 0;"      → class="m-20-0"
  style="padding:20px;"        → class="p-20"
  style="color:#e74c3c"        → class="text-danger"
  style="color: #e74c3c;"      → class="text-danger"
  style="color:#e74c3c; font-weight:700;" → class="text-danger-bold"
  style="color:#666; font-size:12px;" → class="text-muted-sm"
  style="color: #666; display: block; margin-top: 5px;" → class="m360-hint"
  style="font-size:12px"       → class="fs-12"
  style="font-size:13px;"      → class="fs-13"
  style="font-weight:600;"     → class="fw-600"
  style="font-size:10px; color:#999; text-transform:uppercase;" → class="m360-label-meta"
  style="font-size: 32px; font-weight: bold; margin-bottom: 5px;" → class="m360-stat-number"
  style="font-size: 14px; opacity: 0.9;" → class="m360-stat-label"
  style="background:#f0f4f8;color:#555;cursor:default;font-family:monospace;font-weight:700;" → class="m360-badge-token"
  style="background-color: #f5f5f5; cursor: not-allowed;" → class="m360-disabled"
  style="border:1px solid #dee2e6; border-radius:8px; overflow:hidden;" → class="m360-card-border"
  style="border:none;border-top:2px solid #f0eaf7;margin:20px 0;" → class="m360-divider"
  style="background: #e3f2fd; padding: 15px; border-left: 4px solid #2196f3; margin-top: 20px;" → class="m360-alert-info"
  style="background:#e8f4fd;border-left:4px solid #3498db;…" → class="m360-info-block"
  style="background:#e8f8f0;border-left:4px solid #27ae60;…" → class="m360-success-block"
  style="background: #f8f9fa; padding: 20px; …margin-bottom: 30px;" → class="m360-section-box"
  style="width: 100%; padding: 12px; border: 2px solid #e0e0e0; …" → class="m360-input"
*/

/* ====== DISPENSACION PAGE LAYOUT ====== */
.disp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
.disp-grid-socio    { grid-column: 1; }
.disp-grid-carrito  { grid-column: 2; }
.disp-grid-productos { grid-column: 1 / -1; }

@media (max-width: 768px) {
    .disp-grid {
        grid-template-columns: 1fr;
    }
    .disp-grid-socio,
    .disp-grid-carrito,
    .disp-grid-productos { grid-column: 1; }
}