/* ============================================================
   Novumtech — style.css
   Paleta: verde campo + tierra + negro limpio
   Tipografía: Georgia (serif cálido) + system-ui (cuerpo)
   ============================================================ */

/* ── Reset y base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --verde-oscuro:  #2d4a1e;
  --verde-medio:   #4a7c34;
  --verde-claro:   #7ab648;
  --verde-palido:  #e8f2dc;
  --tierra:        #8b6543;
  --tierra-claro:  #f5ede3;
  --negro:         #1a1a1a;
  --gris-oscuro:   #3d3d3d;
  --gris-medio:    #6b6b6b;
  --gris-claro:    #f0efeb;
  --blanco:        #fafaf8;

  --fuente-titulo: Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: system-ui, -apple-system, sans-serif;
  --radio:         6px;
  --sombra:        0 2px 12px rgba(0,0,0,.08);
}

html { font-size: 16px; /* scroll-behavior: smooth; */ }

body {
  font-family: var(--fuente-cuerpo);
  background:  var(--blanco);
  color:       var(--negro);
  line-height: 1.65;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
  background:  var(--verde-oscuro);
  color:       var(--blanco);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     0 5vw;
  height:      64px;
  position:    sticky;
  top:         0;
  z-index:     100;
  box-shadow:  0 2px 8px rgba(0,0,0,.25);
}

.logo {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-family: var(--fuente-titulo);
}

.logo-svg {
  width:       38px;
  height:      38px;
  flex-shrink: 0;
  display:     block;
  overflow:    visible;
}

.logo-text { font-size: 1.15rem; letter-spacing: .02em; }
.logo-tech { color: var(--verde-claro); }

/* El saludo mobile solo existe en mobile */
#nav-saludo-mobile { display: none; }

.navbar nav { display: flex; gap: 28px; }

.navbar nav a {
  font-size:   .9rem;
  opacity:     .85;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition:  opacity .15s;
}
.navbar nav a:hover { opacity: 1; }
.navbar nav a.activo,
.navbar nav a.nav-admin-link.activo,
#nav-extra a.activo {
  opacity:        1;
  border-bottom:  2px solid var(--verde-claro);
  padding-bottom: 2px;
}

/* nav-extra: en desktop sus hijos fluyen en el nav */
#nav-extra { display: contents; }
.contenedor {
  max-width: 1100px;
  margin:    0 auto;
  padding:   0 5vw;
  width:     100%;
}

/* ── Hero (home) ──────────────────────────────────────────── */
.hero {
  background:  var(--verde-oscuro);
  color:       var(--blanco);
  padding:     80px 5vw 90px;
  position:    relative;
  overflow:    hidden;
}

.hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(255,255,255,.018) 40px,
    rgba(255,255,255,.018) 41px
  );
}

.hero-inner {
  position:  relative;
  max-width: 680px;
}

.hero h1 {
  font-family: var(--fuente-titulo);
  font-size:   clamp(2rem, 5vw, 3.2rem);
  line-height: 1.15;
  margin-bottom: 20px;
}

.hero h1 em {
  font-style: normal;
  color:      var(--verde-claro);
}

.hero p {
  font-size:     1.05rem;
  opacity:       .85;
  max-width:     520px;
  margin-bottom: 32px;
}

.btn {
  display:       inline-block;
  padding:       12px 28px;
  border-radius: var(--radio);
  font-size:     .95rem;
  cursor:        pointer;
  border:        none;
  transition:    filter .15s, transform .1s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-primario {
  background: var(--verde-claro);
  color:      var(--verde-oscuro);
  font-weight: 700;
}

.btn-secundario {
  background: transparent;
  color:      var(--blanco);
  border:     1.5px solid rgba(255,255,255,.45);
  margin-left: 12px;
}

/* ── Sección servicios destaque (home) ───────────────────── */
.seccion { padding: 64px 5vw; }
.seccion-titulo {
  font-family:   var(--fuente-titulo);
  font-size:     clamp(1.4rem, 3vw, 2rem);
  color:         var(--verde-oscuro);
  margin-bottom: 8px;
}
.seccion-subtitulo {
  color:         var(--gris-medio);
  margin-bottom: 40px;
}

/* Grid de tarjetas de categoría */
.grid-categorias {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   24px;
}

.tarjeta-categoria {
  background:    var(--verde-palido);
  border:        1px solid rgba(74,124,52,.2);
  border-radius: var(--radio);
  padding:       28px 24px;
  cursor:        pointer;
  transition:    box-shadow .2s, transform .15s;
}
.tarjeta-categoria:hover {
  box-shadow: var(--sombra);
  transform:  translateY(-3px);
}

.tarjeta-categoria .icono {
  font-size:     2.2rem;
  margin-bottom: 12px;
}
.tarjeta-categoria h3 {
  font-family:   var(--fuente-titulo);
  color:         var(--verde-oscuro);
  margin-bottom: 8px;
}
.tarjeta-categoria p { font-size: .9rem; color: var(--gris-oscuro); }

/* ── Página de productos ──────────────────────────────────── */
.productos-header {
  background: var(--gris-claro);
  padding:    40px 5vw 32px;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
.productos-header h1 {
  font-family: var(--fuente-titulo);
  font-size:   1.8rem;
  color:       var(--verde-oscuro);
  margin-bottom: 16px;
}

/* Tabs de categorías */
.tabs {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.tab {
  padding:       8px 18px;
  border-radius: 20px;
  border:        1.5px solid var(--verde-medio);
  background:    transparent;
  color:         var(--verde-oscuro);
  font-size:     .88rem;
  cursor:        pointer;
  transition:    background .15s, color .15s;
}
.tab:hover    { background: var(--verde-palido); }
.tab.activo   { background: var(--verde-oscuro); color: var(--blanco); border-color: var(--verde-oscuro); }

/* Grid de productos */
.grid-productos {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   24px;
  padding:               40px 5vw;
}

.tarjeta-producto {
  background:    var(--blanco);
  border:        1px solid rgba(0,0,0,.09);
  border-radius: var(--radio);
  padding:       24px;
  box-shadow:    var(--sombra);
  display:       flex;
  flex-direction: column;
  gap:           10px;
}

.tarjeta-producto .cat-badge {
  display:       inline-block;
  background:    var(--verde-palido);
  color:         var(--verde-oscuro);
  font-size:     .75rem;
  padding:       3px 10px;
  border-radius: 12px;
  align-self:    flex-start;
}

.tarjeta-producto h3 {
  font-family: var(--fuente-titulo);
  font-size:   1.05rem;
  color:       var(--negro);
}

.tarjeta-producto p {
  font-size:  .88rem;
  color:      var(--gris-medio);
  flex:       1;
}

.tarjeta-producto .precio {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--verde-oscuro);
  margin-top:  auto;
}

/* ── Estado de carga y error ─────────────────────────────── */
.estado {
  text-align: center;
  padding:    60px 20px;
  color:      var(--gris-medio);
}
.estado.error { color: #c0392b; }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background:    var(--verde-oscuro);
  color:         rgba(255,255,255,.8);
  margin-top:    auto;
  padding:       48px 5vw 24px;
}
.footer-inner {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   32px;
  margin-bottom:         40px;
}
.footer strong    { color: var(--blanco); display: block; margin-bottom: 10px; }
.footer p, .footer a { font-size: .9rem; opacity: .8; line-height: 1.8; }
.footer a:hover   { opacity: 1; text-decoration: underline; }
.footer-copy      { border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font-size: .8rem; opacity: .5; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .navbar {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    height:         auto;
    padding:        12px 5vw 10px;
    gap:            4px;
  }

  .logo { justify-content: center; }

  .navbar nav {
    justify-content: center;
    flex-wrap:       wrap;
    gap:             6px 10px;
  }

  .navbar nav a,
  .nav-admin-link { font-size: .90rem; }

  /* En mobile el bloque desktop queda oculto */
  .nav-admin-bloque { display: none; }

  .btn-secundario { display: none; }
}

/* ============================================================
   Etapa 2 — Admin, modales, sidebar
   ============================================================ */

/* ── Modal overlay ───────────────────────────────────────────*/
#modal-overlay {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,.45);
  z-index:         200;
  align-items:     center;
  justify-content: center;
  padding:         20px;
}
#modal-overlay.activo { display: flex; }

#modal-box {
  background:    var(--blanco);
  border-radius: 10px;
  width:         100%;
  max-width:     480px;
  max-height:    90vh;
  overflow-y:    auto;
  padding:       32px;
  box-shadow:    0 8px 32px rgba(0,0,0,.18);
}

.modal-titulo {
  font-family:   var(--fuente-titulo);
  font-size:     1.3rem;
  color:         var(--verde-oscuro);
  margin-bottom: 20px;
}

.modal-acciones {
  display:         flex;
  justify-content: flex-end;
  gap:             10px;
  margin-top:      24px;
}

/* ── Formularios ─────────────────────────────────────────────*/
.campo {
  display:       flex;
  flex-direction: column;
  gap:           6px;
  margin-bottom: 16px;
}
.campo span {
  font-size:   .85rem;
  color:       var(--gris-oscuro);
  font-weight: 500;
}
.campo input,
.campo select,
.campo textarea {
  border:        1.5px solid rgba(0,0,0,.15);
  border-radius: var(--radio);
  padding:       9px 12px;
  font-size:     .95rem;
  font-family:   var(--fuente-cuerpo);
  background:    var(--blanco);
  color:         var(--negro);
  transition:    border-color .15s;
  width:         100%;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline:      none;
  border-color: var(--verde-medio);
}
.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.campo-check {
  flex-direction: row;
  align-items:    center;
  gap:            10px;
}
.campo-check input { width: auto; }

.error-msg {
  color:       #c0392b;
  font-size:   .88rem;
  margin-top:  4px;
}

/* ── Admin navbar desktop ─────────────────────────────────── */

/* Separador visual antes de Dashboard */
.nav-admin-sep {
  width:         1px;
  height:        16px;
  background:    rgba(255,255,255,.25);
  align-self:    center;
  margin:        0 4px;
}

.nav-admin-link {
  font-size:      .9rem;
  opacity:        .85;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition:     opacity .15s;
}
.nav-admin-link:hover { opacity: 1; }

/* Salir con tono anaranjado en desktop */
#btn-logout {
  background:    rgba(180, 80, 20, .28);
  border-radius: 4px;
  padding:       2px 8px;
}
#btn-logout:hover { background: rgba(180, 80, 20, .5); opacity: 1; }

/* Saludo debajo de los links, solo desktop */
.nav-admin-saludo-desktop {
  font-size:      .85rem;
  opacity:        .45;
  letter-spacing: .02em;
  align-self:     flex-end;
  padding-bottom: 2px;
}

/* Bloque mobile oculto en desktop */
.nav-admin-mobile { display: none; }
.nav-admin-cats   { display: none; }

@media (max-width: 600px) {
  /* nav-extra oculto en mobile — Dashboard/Salir van en fila 2 */
  #nav-extra { display: none; }

  /* Fila 2: greeting + Dashboard + Salir */
  .nav-admin-mobile {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap:             16px;
    padding:         5px 8px;
    background:      rgba(139, 101, 67, 0.25);
    max-height:      36px;
    opacity:         1;
    overflow:        hidden;
    transition:      max-height .3s ease, opacity .3s ease, padding .3s ease;
  }
  .nav-admin-mobile.nam-oculto { max-height: 0; opacity: 0; padding: 0; }

  .nam-greeting { font-size: .82rem; opacity: .6; color: var(--blanco); }

  .nam-link {
    font-size:      .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity:        .85;
    color:          var(--blanco);
    transition:     opacity .15s;
  }
  .nam-link:hover { opacity: 1; }

  .nam-salir {
    background:    rgba(180, 80, 20, .35);
    border-radius: 3px;
    padding:       2px 7px;
  }
  .nam-salir:hover { background: rgba(180, 80, 20, .55); }

  /* Fila 3: items del dashboard, mismo fondo */
  .nav-admin-cats {
    display:         flex;
    justify-content: center;
    gap:             16px;
    padding:         5px 8px;
    background:      rgba(139, 101, 67, 0.25);
    overflow-x:      auto;
    max-height:      36px;
    opacity:         1;
    transition:      max-height .3s ease, opacity .3s ease, padding .3s ease;
  }
  .nav-admin-cats.nam-oculto { max-height: 0; opacity: 0; padding: 0; }

  .nac-link {
    font-size:      .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity:        .75;
    color:          var(--blanco);
    white-space:    nowrap;
    transition:     opacity .15s;
  }
  .nac-link:hover { opacity: 1; }
  .nac-activo     { opacity: 1; border-bottom: 1px solid var(--verde-claro); padding-bottom: 1px; }

  .nav-admin-saludo-desktop { display: none; }
}
.btn-danger {
  background: #c0392b;
  color:      var(--blanco);
  font-weight: 700;
}
.btn-danger:hover { filter: brightness(1.1); }

/* ── Layout admin con sidebar ────────────────────────────────*/
.admin-layout {
  display:             grid;
  grid-template-columns: 220px 1fr;
  min-height:          calc(100vh - 64px);
  transition:          grid-template-columns .25s ease;
}
.admin-layout:has(.sidebar.colapsado) {
  grid-template-columns: 52px 1fr;
}

.sidebar {
  background:  var(--verde-oscuro);
  color:       var(--blanco);
  padding:     8px 0;
  position:    sticky;
  top:         64px;
  height:      calc(100vh - 64px);
  overflow:    hidden;
  width:       220px;
  transition:  width .25s ease;
  flex-shrink: 0;
}
.sidebar.colapsado { width: 52px; }

.sidebar-toggle {
  background:      transparent;
  border:          none;
  color:           rgba(255,255,255,.7);
  cursor:          pointer;
  padding:         10px 16px;
  width:           100%;
  text-align:      left;
  display:         flex;
  align-items:     center;
  transition:      color .15s;
  margin-bottom:   8px;
}
.sidebar-toggle:hover { color: var(--blanco); }

.sidebar-nav {
  display:        flex;
  flex-direction: column;
}

.sidebar-link {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     11px 16px;
  color:       rgba(255,255,255,.75);
  font-size:   .92rem;
  transition:  background .15s, color .15s;
  white-space: nowrap;
  overflow:    hidden;
}
.sidebar-link:hover  { background: rgba(255,255,255,.08); color: var(--blanco); }
.sidebar-link.activo { background: rgba(255,255,255,.12); color: var(--blanco); border-left: 3px solid var(--verde-claro); padding-left: 13px; }

.sidebar-icon {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
}
.sidebar-label {
  opacity:    1;
  transition: opacity .2s;
  overflow:   hidden;
}
.sidebar.colapsado .sidebar-label { opacity: 0; width: 0; }
.sidebar.colapsado .sidebar-link  { justify-content: center; padding: 11px 0; }
.sidebar.colapsado .sidebar-link.activo { border-left: 3px solid var(--verde-claro); padding-left: 0; justify-content: center; }

/* ── Contenido principal admin ───────────────────────────────*/
.admin-main {
  padding: 36px 40px;
  min-width: 0;
}

.admin-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   24px;
}

.admin-titulo {
  font-family: var(--fuente-titulo);
  font-size:   1.6rem;
  color:       var(--verde-oscuro);
}

.admin-nota {
  font-size:  .82rem;
  color:      var(--gris-medio);
  margin-top: 12px;
}

/* ── Stat cards (dashboard) ──────────────────────────────────*/
.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:     20px;
  margin-top: 8px;
}

.stat-card {
  background:    var(--verde-palido);
  border:        1px solid rgba(74,124,52,.2);
  border-radius: var(--radio);
  padding:       24px 20px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           8px;
}
.stat-num   { font-size: 2.2rem; font-weight: 700; color: var(--verde-oscuro); }
.stat-label { font-size: .85rem; color: var(--gris-medio); }

/* ── Tablas admin ────────────────────────────────────────────*/
.admin-tabla {
  width:           100%;
  border-collapse: collapse;
  font-size:       .92rem;
}
.admin-tabla th {
  text-align:    left;
  padding:       10px 12px;
  border-bottom: 2px solid rgba(0,0,0,.08);
  color:         var(--gris-medio);
  font-weight:   600;
  font-size:     .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.admin-tabla td {
  padding:       12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  vertical-align: middle;
}
.admin-tabla tr:hover td { background: var(--gris-claro); }

.acciones { display: flex; gap: 8px; }

.btn-tabla {
  padding:       5px 12px;
  border:        1.5px solid var(--verde-medio);
  border-radius: var(--radio);
  background:    transparent;
  color:         var(--verde-oscuro);
  font-size:     .82rem;
  cursor:        pointer;
  transition:    background .15s;
}
.btn-tabla:hover           { background: var(--verde-palido); }
.btn-tabla-danger          { border-color: #c0392b; color: #c0392b; }
.btn-tabla-danger:hover    { background: #fdecea; }

/* ── Badges ──────────────────────────────────────────────────*/
.badge {
  display:       inline-block;
  padding:       3px 10px;
  border-radius: 12px;
  font-size:     .78rem;
  font-weight:   600;
}
.badge-ok    { background: var(--verde-palido); color: var(--verde-oscuro); }
.badge-no    { background: #fdecea;             color: #a93226; }
.badge-admin { background: #eaf0fb;             color: #1a4a8a; }

/* ── Responsive admin ────────────────────────────────────────*/
@media (max-width: 768px) {

  /* Sidebar oculto en mobile — la navegación admin va en el navbar */
  .sidebar { display: none; }

  .admin-layout {
    grid-template-columns: 1fr;
  }
  .admin-layout:has(.sidebar.colapsado) {
    grid-template-columns: 1fr;
  }

  .admin-main    { padding: 20px 16px; }
  .campo-fila    { grid-template-columns: 1fr; }

  /* ── Tablas → cards ─────────────────────────────────────── */
  .admin-tabla          { display: block; }
  .admin-tabla thead    { display: none; }
  .admin-tabla tbody    { display: flex; flex-direction: column; gap: 12px; }

  .admin-tabla tr {
    display:       block;
    background:    var(--blanco);
    border:        1px solid rgba(0,0,0,.09);
    border-radius: var(--radio);
    padding:       14px 16px;
    box-shadow:    var(--sombra);
  }
  .admin-tabla tr:hover td { background: transparent; }

  .admin-tabla td {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    padding:       5px 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size:     .88rem;
  }
  .admin-tabla td:last-child {
    border-bottom: none;
    padding-top:   10px;
    justify-content: flex-end;
    gap: 8px;
  }

  /* Etiqueta automática desde data-label */
  .admin-tabla td[data-label]::before {
    content:     attr(data-label);
    font-size:   .75rem;
    font-weight: 600;
    color:       var(--gris-medio);
    text-transform: uppercase;
    letter-spacing: .04em;
    flex-shrink: 0;
  }
}