/* components.css — Design System de Espacios3D: piezas reutilizables (botones, campos, select,
   checkbox, switch, tarjetas, badges, dropzone, progreso, modal, menús, toasts). Todo sobre los
   tokens (tokens.css). Las clases son las mismas que usa el frontend; aquí solo se refina el aspecto. */

/* ============================ Botones ============================ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:var(--fs-sm);font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;
  border:1px solid transparent;border-radius:var(--radius-md);padding:10px 16px;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn .ic,.btn svg{width:16px;height:16px;display:block;flex:0 0 auto}
.btn--primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-xs)}
.btn--primary:not(:disabled):hover{background:var(--accent-600);transform:translateY(-1px);box-shadow:var(--shadow-accent)}
.btn--primary:not(:disabled):active{transform:translateY(0);box-shadow:var(--shadow-xs);background:var(--accent-700)}
.btn--secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn--secondary:not(:disabled):hover{background:var(--gray-50);border-color:var(--gray-300);transform:translateY(-1px)}
.btn--secondary:not(:disabled):active{transform:translateY(0);background:var(--gray-100)}
.btn--ghost{background:transparent;color:var(--accent-text)}
.btn--ghost:not(:disabled):hover{background:var(--accent-50)}
.btn--danger{background:transparent;color:var(--danger);border-color:var(--border-strong)}
.btn--danger:not(:disabled):hover{background:var(--danger-tint);border-color:var(--danger);transform:translateY(-1px)}
.btn--sm{padding:7px 12px;border-radius:var(--radius-sm);font-size:var(--fs-sm)}
.btn--lg{padding:13px 22px;font-size:var(--fs-body)}
.btn--block{width:100%}
.btn-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
/* Botón solo-icono (reutilizable) */
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.icon-btn:hover{background:var(--gray-50);color:var(--text);border-color:var(--border-strong)}
.icon-btn svg{width:18px;height:18px}

/* ============================ Campos ============================ */
.field{margin-bottom:var(--space-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:7px;color:var(--text)}
.input,.textarea,.select{width:100%;font:inherit;font-size:var(--fs-body);color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:11px 13px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--gray-300)}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.textarea{resize:vertical;min-height:104px;line-height:1.55}
.field .hint{font-size:var(--fs-sm);color:var(--text-3);margin-top:6px}
.form-error{display:flex;gap:8px;background:var(--danger-tint);color:var(--danger);border:1px solid #f2c9c9;
  border-radius:var(--radius-md);padding:11px 13px;font-size:var(--fs-sm);margin-bottom:var(--space-4);font-weight:500}
.form-note{display:flex;gap:8px;background:var(--accent-50);color:var(--accent-text);border:1px solid var(--accent-200,#bcd0ff);
  border-radius:var(--radius-md);padding:11px 13px;font-size:var(--fs-sm);margin-bottom:var(--space-4);font-weight:500}

/* Select con flecha propia */
.select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}

/* Checkbox propio */
.check{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--fs-body);user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--border-strong);background:var(--surface);
  display:grid;place-items:center;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);flex:0 0 auto}
.check .box svg{width:13px;height:13px;color:#fff;opacity:0;transform:scale(.7);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out)}
.check input:checked+.box{background:var(--accent);border-color:var(--accent)}
.check input:checked+.box svg{opacity:1;transform:none}
.check input:focus-visible+.box{box-shadow:var(--focus-ring)}

/* Switch (interruptor) */
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{width:42px;height:24px;border-radius:var(--radius-pill);background:var(--gray-300);position:relative;
  transition:background var(--dur) var(--ease);flex:0 0 auto}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out)}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{box-shadow:var(--focus-ring)}

/* ============================ Tarjetas ============================ */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm),var(--ring-inset);padding:var(--space-6)}
.card--pad-lg{padding:var(--space-8)}

/* ============================ Badges ============================ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-overline);font-weight:600;letter-spacing:.02em;
  border-radius:var(--radius-pill);padding:4px 10px 4px 8px;border:1px solid transparent;white-space:nowrap;flex:0 0 auto}
.badge::before{content:"";width:6px;height:6px;border-radius:50%}
.badge--published{background:var(--success-tint);color:var(--success);border-color:rgba(23,146,74,.18)}
.badge--published::before{background:var(--success);box-shadow:0 0 0 3px rgba(23,146,74,.14)}
.badge--unpublished{background:var(--gray-50);color:var(--gray-600);border-color:var(--border)}
.badge--unpublished::before{background:var(--gray-400)}
/* Chip de categoría (reutilizable) */
.chip{display:inline-flex;align-items:center;font-size:var(--fs-overline);font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--accent-text);background:var(--accent-50);border:1px solid var(--accent-100);
  border-radius:var(--radius-pill);padding:3px 10px}

/* ============================ Dropzone ============================ */
.dropzone{border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-2);
  padding:var(--space-10);text-align:center;cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease-out)}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-50)}
.dropzone.drag{transform:scale(1.005)}
.dropzone .ico{width:48px;height:48px;margin:0 auto var(--space-3);color:var(--accent-text);background:var(--accent-50);
  border-radius:var(--radius-lg);display:grid;place-items:center}
.dropzone .ico svg{width:24px;height:24px}
.dropzone strong{display:block;margin-bottom:4px}
.dropzone small{color:var(--text-2)}

/* ============================ Progreso ============================ */
.progress{height:8px;border-radius:var(--radius-pill);background:var(--gray-100);overflow:hidden;margin-top:var(--space-4)}
.progress>i{display:block;height:100%;width:0;border-radius:var(--radius-pill);
  background:linear-gradient(90deg,var(--accent),#5e8bff);transition:width 120ms linear}
.progress-label{font-size:var(--fs-sm);color:var(--text-2);margin-top:7px}

/* ============================ Modal ============================ */
.modal-back{position:fixed;inset:0;z-index:60;background:rgba(15,18,24,.42);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:var(--space-6);
  animation:modal-in var(--dur) var(--ease-out)}
.modal{background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  padding:var(--space-8);max-width:440px;width:100%;animation:pop var(--dur) var(--ease-out)}
.modal h3{font-size:var(--fs-h4);font-weight:700;margin-bottom:var(--space-2);letter-spacing:-.01em}
.modal p{color:var(--text-2);font-size:var(--fs-sm);margin-bottom:var(--space-6)}
.modal .btn-row{justify-content:flex-end}
@keyframes modal-in{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

/* ============================ Menú (desplegable reutilizable) ============================ */
.menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:6px;min-width:190px}
.menu button,.menu a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;
  border-radius:var(--radius-sm);padding:9px 11px;font-size:var(--fs-sm);color:var(--text);cursor:pointer;text-decoration:none}
.menu button:hover,.menu a:hover{background:var(--gray-50)}

/* ============================ Toasts ============================ */
#toasts{position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:80;display:flex;flex-direction:column;gap:var(--space-2);max-width:360px}
.toast{display:flex;align-items:center;gap:10px;background:var(--gray-900);color:#fff;border-radius:var(--radius-md);
  padding:12px 16px;font-size:var(--fs-sm);font-weight:500;box-shadow:var(--shadow-lg);
  opacity:0;transform:translateY(10px) scale(.98);transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.toast.in{opacity:1;transform:none}
.toast--error{background:var(--danger)}
.toast--success{background:var(--success)}

/* ============================ Spinner ============================ */
.spinner{width:22px;height:22px;border:2.5px solid var(--gray-200);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-2);padding:var(--space-16) 0}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:1.6s}.toast,.btn,.card,.proj-card{transition:none}
  .modal-back,.modal{animation:none}}