/* ══════════════════════════════════════
   VARIABLES & RESET
══════════════════════════════════════ */
:root {
  --negro:       #0d0d0d;
  --blanco:      #fafaf8;
  --acento:      #e8ff47;
  --gris:        #6b7280;
  --gris-claro:  #f3f4f6;
  --borde:       #e5e7eb;
  --sidebar-w:   220px;
  --topbar-h:    56px;
  --radio:       14px;
  --sombra:      0 4px 24px rgba(0,0,0,.08);
  font-family: 'DM Sans', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--gris-claro); color: var(--negro); min-height: 100vh; overflow-x: hidden; }
.oculto { display: none !important; }

/* ══════════════════════════════════════
   LOGIN
══════════════════════════════════════ */
.pagina { min-height: 100vh; }
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: var(--negro);
  position: relative; overflow: hidden;
  padding: 1rem;
}
.login-deco {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, #e8ff4730 0%, transparent 70%);
  top: -200px; right: -200px; pointer-events: none;
}
.login-box {
  background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 24px;
  padding: 2.5rem 2rem; width: 100%; max-width: 420px; position: relative; z-index: 1;
}
.login-logo { display: flex; align-items: center; gap: .8rem; margin-bottom: .4rem; }
.logo-icon { font-size: 2rem; }
.login-logo h1 { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: var(--blanco); }
.login-logo h1 span { color: var(--acento); }
.login-sub { color: var(--gris); margin-bottom: 1.8rem; font-size: .9rem; }

/* Inputs base */
.campo { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.campo label { font-size: .78rem; font-weight: 500; color: #aaa; letter-spacing: .05em; text-transform: uppercase; }

input[type="text"], input[type="password"], input[type="number"],
select, textarea {
  width: 100%; padding: .75rem 1rem; border-radius: 10px;
  border: 1px solid #333; background: #111; color: var(--blanco);
  font-family: 'DM Sans', sans-serif; font-size: 1rem; transition: border-color .2s;
  -webkit-appearance: none;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento); }
textarea { resize: vertical; min-height: 80px; }

/* Inputs sobre fondo blanco (modales) */
.modal-chico input, .modal-chico select, .modal-chico textarea,
.modal-grande input[type="text"], .modal-grande select, .modal-grande textarea {
  background: var(--gris-claro); color: var(--negro); border-color: var(--borde);
}
.modal-chico .campo label, .modal-grande .campo label { color: var(--gris); }

/* Botones */
.btn-primario {
  width: 100%; padding: .85rem; border: none; border-radius: 10px;
  background: var(--acento); color: var(--negro);
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1rem;
  cursor: pointer; transition: transform .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primario:active { transform: scale(.97); opacity: .85; }
.btn-primario:hover { opacity: .88; }
.btn-primario.pequeño { width: auto; padding: .5rem 1.2rem; font-size: .85rem; border-radius: 8px; }

.btn-secundario {
  padding: .65rem 1.4rem; border: 1.5px solid var(--borde); border-radius: 10px;
  background: white; color: var(--negro); font-size: .9rem; cursor: pointer;
  transition: background .15s; -webkit-tap-highlight-color: transparent;
}
.btn-secundario:active { background: var(--gris-claro); }

.alerta-error {
  background: #fee2e2; color: #dc2626; border-radius: 8px;
  padding: .6rem 1rem; font-size: .88rem; margin-bottom: .5rem;
}

/* ══════════════════════════════════════
   TOPBAR (móvil)
══════════════════════════════════════ */
#topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h);
  background: var(--negro); color: var(--blanco);
  align-items: center; justify-content: space-between;
  padding: 0 1rem; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
#btnMenuMobile {
  background: none; border: none; color: var(--blanco);
  font-size: 1.4rem; cursor: pointer; padding: .4rem; line-height: 1;
}
.topbar-logo { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; }
.btn-logout-top {
  background: #1a1a1a; border: 1px solid #333; color: #aaa;
  border-radius: 8px; padding: .35rem .8rem; font-size: .8rem; cursor: pointer;
}

/* Overlay sidebar en móvil */
#sidebarOverlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5);
  z-index: 149; backdrop-filter: blur(2px);
}
#sidebarOverlay.visible { display: block; }

/* ══════════════════════════════════════
   LAYOUT APP
══════════════════════════════════════ */
#paginaApp { display: flex; min-height: 100vh; }

/* Sidebar */
#sidebar {
  width: var(--sidebar-w); background: var(--negro);
  display: flex; flex-direction: column; padding: 1.5rem 1rem;
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 150;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.sidebar-logo {
  display: flex; align-items: center; gap: .6rem;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--blanco);
  padding: .5rem .5rem 1.5rem; border-bottom: 1px solid #222; margin-bottom: 1rem;
}
nav { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.nav-item {
  display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem;
  border-radius: 10px; color: #888; cursor: pointer; font-size: .95rem;
  transition: all .2s; text-decoration: none; border: none;
  background: none; width: 100%; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.nav-item:active, .nav-item:hover { color: var(--blanco); background: #1a1a1a; }
.nav-item.activo { color: var(--negro); background: var(--acento); font-weight: 600; }
.nav-item i { font-style: normal; font-size: 1.1rem; }
.sidebar-footer { border-top: 1px solid #222; padding-top: 1rem; display: flex; flex-direction: column; gap: .6rem; }
#userInfo { display: flex; flex-direction: column; }
#userNombre { color: var(--blanco); font-weight: 600; font-size: .9rem; }
#userRol { color: #888; font-size: .75rem; text-transform: capitalize; }
.btn-logout {
  background: #1a1a1a; border: 1px solid #333; color: #888;
  border-radius: 8px; padding: .5rem; cursor: pointer; font-size: .85rem; transition: all .2s;
}
.btn-logout:hover { background: #2a2a2a; color: var(--blanco); }

/* Contenido */
#contenido { margin-left: var(--sidebar-w); flex: 1; padding: 2.5rem; min-height: 100vh; }
.seccion-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.seccion-header h2 { font-family: 'Syne', sans-serif; font-size: 1.8rem; font-weight: 800; }

/* ══════════════════════════════════════
   TARJETAS
══════════════════════════════════════ */
.grid-fundas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}
.card-funda {
  background: white; border-radius: var(--radio); overflow: hidden;
  box-shadow: var(--sombra); border: 1.5px solid var(--borde);
  transition: transform .22s, box-shadow .22s;
}
.card-funda:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.12); }
.card-img {
  width: 100%; height: 170px; object-fit: cover; background: linear-gradient(135deg,#f0f0f0,#e0e0e0);
  display: flex; align-items: center; justify-content: center; font-size: 3.5rem; overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 1rem; }
.card-nombre { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; }
.card-desc { color: var(--gris); font-size: .82rem; margin-bottom: .7rem; min-height: 1rem; }
.card-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: #dcfce7; color: #16a34a; border-radius: 20px;
  padding: .2rem .75rem; font-size: .78rem; font-weight: 600; margin-bottom: .9rem;
}
.card-badge.cero { background: #f1f5f9; color: var(--gris); }
.card-acciones { display: flex; gap: .5rem; }
.btn-editar, .btn-copiar {
  flex: 1; padding: .55rem .4rem; border-radius: 8px; border: none; cursor: pointer;
  font-size: .8rem; font-weight: 600; transition: all .15s;
  display: flex; align-items: center; justify-content: center; gap: .3rem;
  -webkit-tap-highlight-color: transparent;
}
.btn-editar { background: #eff6ff; color: #1d4ed8; }
.btn-editar:active { background: #dbeafe; }
.btn-copiar { background: #f0fdf4; color: #15803d; }
.btn-copiar:active { background: #dcfce7; }

/* Botones admin en tarjeta */
.card-admin-acciones {
  display: flex; gap: .4rem; margin-top: .6rem;
  padding-top: .6rem; border-top: 1px dashed var(--borde);
}
.btn-card-accion {
  flex: 1; padding: .4rem .3rem; border-radius: 8px; border: 1.5px solid var(--borde);
  background: white; font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.btn-lista       { color: #7c3aed; border-color: #ede9fe; background: #f5f3ff; }
.btn-lista:active { background: #ede9fe; }
.btn-editar-nombre { color: #1d4ed8; border-color: #dbeafe; background: #eff6ff; }
.btn-editar-nombre:active { background: #dbeafe; }
.btn-eliminar    { color: #dc2626; border-color: #fee2e2; background: #fff5f5; flex: 0 0 auto; }
.btn-eliminar:active { background: #fee2e2; }

/* ══════════════════════════════════════
   TABLA USUARIOS
══════════════════════════════════════ */
.tabla-wrap { background: white; border-radius: var(--radio); box-shadow: var(--sombra); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 500px; }
thead { background: var(--negro); color: var(--blanco); }
thead th { padding: .9rem 1rem; text-align: left; font-size: .82rem; font-weight: 600; letter-spacing: .05em; white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--borde); }
tbody td { padding: .8rem 1rem; font-size: .88rem; }
.badge-rol { display: inline-block; padding: .2rem .65rem; border-radius: 20px; font-size: .73rem; font-weight: 700; text-transform: capitalize; }
.badge-admin { background: #fef3c7; color: #b45309; }
.badge-almacenista { background: #ede9fe; color: #7c3aed; }
.badge-vendedor { background: #dbeafe; color: #1d4ed8; }
.badge-inactivo { background: #fee2e2; color: #dc2626; }
.btn-tabla {
  padding: .3rem .7rem; border-radius: 6px; border: 1.5px solid var(--borde);
  background: white; cursor: pointer; font-size: .78rem; transition: all .15s; margin-right: .3rem;
}
.btn-tabla:active { background: var(--gris-claro); }
.btn-tabla.danger { border-color: #fca5a5; color: #dc2626; }
.btn-tabla.danger:active { background: #fee2e2; }

/* ══════════════════════════════════════
   MODALES
══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem;
  overflow-y: auto;
}
.modal-chico {
  background: white; border-radius: 20px; padding: 1.5rem;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: .75rem;
  max-height: 95vh; overflow-y: auto; position: relative;
}
.modal-grande {
  background: white; border-radius: 20px;
  width: 100%; max-width: 960px; max-height: 95vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--borde); flex-shrink: 0;
}
.modal-cabeza h3 { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 700; }
.btn-cerrar {
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--gris-claro); cursor: pointer; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.modal-pie {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .7rem; padding: 1rem 1.5rem; border-top: 1px solid var(--borde); flex-shrink: 0;
}
.modal-pie span { margin-right: auto; color: var(--gris); font-size: .82rem; }
.modal-filtros {
  display: flex; align-items: center; gap: .8rem;
  padding: .8rem 1.5rem; border-bottom: 1px solid var(--borde);
  background: var(--gris-claro); flex-shrink: 0;
}
.modal-filtros label { font-size: .82rem; font-weight: 600; color: var(--gris); white-space: nowrap; }
.modal-filtros select { max-width: 200px; background: white; color: var(--negro); border-color: var(--borde); padding: .4rem .7rem; }

/* ══════════════════════════════════════
   ZONA FOTO
══════════════════════════════════════ */
.zona-foto {
  width: 100%; height: 160px; border: 2px dashed var(--borde); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
  transition: border-color .2s, background .2s; background: var(--gris-claro);
}
.zona-foto:active { background: #e5e7eb; }
#fotoPlaceholder { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: var(--gris); pointer-events: none; }
#fotoPlaceholder span { font-size: 2rem; }
#fotoPlaceholder p { font-weight: 600; font-size: .85rem; }
#fotoPlaceholder small { font-size: .73rem; }
#previstaFoto { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.zona-foto.tiene-foto { border-style: solid; border-color: #22c55e; }
.zona-foto.tiene-foto #fotoPlaceholder { display: none; }
.zona-foto::after {
  content: '✏️ Cambiar'; position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.5); color: white; text-align: center;
  padding: .35rem; font-size: .78rem; font-weight: 600;
  opacity: 0; transition: opacity .2s;
}
.zona-foto.tiene-foto:hover::after { opacity: 1; }

.btn-upload-label {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--gris-claro); border: 1.5px solid var(--borde);
  border-radius: 8px; padding: .5rem 1rem; font-size: .85rem;
  font-weight: 600; cursor: pointer; color: var(--negro);
}

/* ══════════════════════════════════════
   LISTA MODELOS / COLORES
══════════════════════════════════════ */
.lista-tabs {
  display: none;
  border-bottom: 1px solid var(--borde); flex-shrink: 0;
}
.lista-tab {
  flex: 1; padding: .8rem; border: none; background: none;
  font-size: .9rem; font-weight: 600; color: var(--gris);
  cursor: pointer; border-bottom: 3px solid transparent;
  transition: all .2s; -webkit-tap-highlight-color: transparent;
}
.lista-tab.activo { color: var(--negro); border-bottom-color: var(--acento); }

.lista-dos-columnas {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; flex: 1; overflow-y: auto;
}
.lista-col { padding: 1.2rem 1.5rem; border-right: 1px solid var(--borde); }
.lista-col:last-child { border-right: none; }
.lista-col h4 { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 700; margin-bottom: .9rem; }

.lista-agregar-stack { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .9rem; }
.select-full { width: 100%; }
.color-row { display: flex; gap: .5rem; align-items: center; }
.input-color {
  width: 44px; height: 42px; border-radius: 8px; border: 1.5px solid var(--borde);
  cursor: pointer; padding: 2px; background: white; flex-shrink: 0;
}
.flex1 { flex: 1; }

.lista-items { display: flex; flex-direction: column; gap: .35rem; max-height: 300px; overflow-y: auto; }
.lista-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .75rem; background: var(--gris-claro); border-radius: 8px; font-size: .85rem;
}
.lista-item > span { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.lista-item > span > span:first-child { word-break: break-word; }
.btn-lista-del {
  border: none; background: none; color: #dc2626; cursor: pointer;
  font-size: .85rem; padding: .2rem .4rem; border-radius: 4px; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn-lista-del:active { background: #fee2e2; }
.color-muestra {
  display: inline-block; width: 13px; height: 13px; border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,.12); flex-shrink: 0;
}

/* ══════════════════════════════════════
   MATRIZ EXISTENCIAS
══════════════════════════════════════ */
.matriz-scroll { flex: 1; overflow: auto; padding: .8rem 1rem; }
.matriz { border-collapse: collapse; width: max-content; min-width: 100%; }
.matriz th {
  padding: .45rem .7rem; font-size: .75rem; font-weight: 600; white-space: nowrap;
  background: var(--negro); color: var(--blanco); position: sticky; top: 0; z-index: 2;
}
.matriz th:first-child { text-align: left; min-width: 160px; position: sticky; left: 0; z-index: 3; }
.th-color { text-align: center !important; }
.color-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 3px; vertical-align: middle; border: 1.5px solid rgba(255,255,255,.3);
}
.fila-marca td {
  background: #f8f9fa; font-weight: 700; font-size: .75rem;
  color: var(--gris); text-transform: uppercase; letter-spacing: .06em; padding: .4rem .8rem;
}
.fila-modelo td { border-bottom: 1px solid var(--borde); }
.fila-modelo td:first-child {
  padding: .4rem .8rem .4rem 1.2rem; font-size: .82rem; font-weight: 500; white-space: nowrap;
  position: sticky; left: 0; background: white; z-index: 1;
}
.toggle-cell { text-align: center; padding: .35rem .4rem; }
.toggle {
  appearance: none; -webkit-appearance: none;
  width: 34px; height: 19px; border-radius: 10px; background: #d1d5db;
  cursor: pointer; position: relative; transition: background .2s; border: none; outline: none;
  flex-shrink: 0;
}
.toggle::after {
  content: ''; position: absolute; width: 13px; height: 13px;
  border-radius: 50%; background: white; top: 3px; left: 3px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle:checked { background: #22c55e; }
.toggle:checked::after { transform: translateX(15px); }
.toggle:disabled { opacity: .4; cursor: not-allowed; }

/* ══════════════════════════════════════
   TOAST
══════════════════════════════════════ */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  background: var(--negro); color: var(--blanco);
  padding: .8rem 1.4rem; border-radius: 12px; font-size: .88rem; font-weight: 500;
  z-index: 999; box-shadow: 0 8px 30px rgba(0,0,0,.25); white-space: nowrap;
  animation: slideUp .3s ease;
}
.toast.ok  { border-left: 4px solid var(--acento); }
.toast.err { border-left: 4px solid #ef4444; }
@keyframes slideUp { from { opacity:0; transform: translateX(-50%) translateY(16px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }

/* ══════════════════════════════════════
   RESPONSIVE — TABLET
══════════════════════════════════════ */
@media (max-width: 900px) {
  .lista-dos-columnas { grid-template-columns: 1fr 1fr; }
  .lista-items { max-height: 220px; }
}

/* ══════════════════════════════════════
   RESPONSIVE — MÓVIL
══════════════════════════════════════ */
@media (max-width: 640px) {
  /* Topbar visible, sidebar oculto por defecto */
  #topbar { display: flex; }
  #sidebar {
    transform: translateX(-100%);
    top: 0; /* Cubre la topbar también */
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  #sidebar.abierto { transform: translateX(0); }
  .sidebar-logo { display: flex; } /* Siempre visible en sidebar */

  #contenido {
    margin-left: 0;
    padding: 1.2rem 1rem;
    padding-top: calc(var(--topbar-h) + 1.2rem);
  }

  .seccion-header h2 { font-size: 1.4rem; }
  .grid-fundas { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .card-img { height: 130px; font-size: 2.5rem; }
  .card-body { padding: .75rem; }
  .card-nombre { font-size: .9rem; }
  .card-desc { display: none; } /* Ocultar descripción en móvil */
  .card-badge { font-size: .7rem; padding: .15rem .6rem; }
  .btn-editar, .btn-copiar { font-size: .72rem; padding: .45rem .3rem; }
  .btn-card-accion { font-size: .68rem; padding: .35rem .2rem; }

  /* Modales full-screen en móvil */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-chico {
    border-radius: 20px 20px 0 0;
    max-height: 92vh; padding: 1.2rem 1rem;
  }
  .modal-grande {
    border-radius: 20px 20px 0 0;
    max-height: 95vh; max-width: 100%;
  }

  /* Lista: tabs en móvil, una columna */
  .lista-tabs { display: flex; }
  .lista-dos-columnas { grid-template-columns: 1fr; }
  .lista-col { border-right: none; border-bottom: none; padding: 1rem; }
  #colColores { display: none; }
  .lista-col.activo-tab { display: block; }
  .lista-items { max-height: 260px; }

  /* Tabla usuarios scroll horizontal */
  .tabla-wrap { border-radius: 12px; }

  /* Matriz: más compacta */
  .matriz th, .fila-modelo td:first-child { font-size: .7rem; padding: .35rem .5rem; }
  .matriz th:first-child { min-width: 120px; }
  .toggle { width: 28px; height: 16px; }
  .toggle::after { width: 10px; height: 10px; }
  .toggle:checked::after { transform: translateX(12px); }

  .modal-pie { padding: .8rem 1rem; }
  .modal-cabeza { padding: 1rem; }
  .modal-filtros { padding: .7rem 1rem; }

  /* Toast centrado abajo */
  .toast { bottom: 1rem; font-size: .82rem; max-width: 90vw; white-space: normal; text-align: center; }
}

@media (max-width: 380px) {
  .grid-fundas { grid-template-columns: 1fr; }
  .card-img { height: 160px; }
}