/* ═══════════════════════════════════════════════════════════════
   style.css — Muebles Avellanedas
   Paleta madera: fondo blanco, acento #8B5E3C
═══════════════════════════════════════════════════════════════ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --madera:          #8B5E3C;
  --madera-oscuro:   #6B4423;
  --madera-claro:    #C49468;
  --madera-palido:   #F2EAE1;
  --bg:              #FFFFFF;
  --bg-suave:        #F8F5F2;
  --bg-card:         #FFFFFF;
  --texto:           #1A1A1A;
  --texto-suave:     #5A5A5A;
  --texto-muy-suave: #999999;
  --borde:           #DDD0C4;
  --verde:           #27AE60;
  --verde-claro:     #D4EDDA;
  --amarillo:        #E8A020;
  --amarillo-claro:  #FFF3CD;
  --rojo:            #C0392B;
  --rojo-claro:      #FDECEA;
  --radio:           10px;
  --radio-lg:        16px;
  --sombra:          0 2px 12px rgba(0,0,0,.08);
  --sombra-lg:       0 4px 24px rgba(0,0,0,.12);
  --transicion:      .18s ease;
}

/* El atributo HTML `hidden` debe ganar siempre sobre cualquier display de CSS */
[hidden] { display: none !important; }

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--texto);
  background: var(--bg-suave);
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; font-size: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--madera); text-decoration: none; }


/* ══════════════════════════════════════════════════════════════
   OVERLAY DE CARGA
══════════════════════════════════════════════════════════════ */
#loading-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255,255,255,.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  backdrop-filter: blur(3px);
}
#loading-overlay span {
  font-size: 1rem;
  color: var(--texto-suave);
  font-weight: 500;
}
.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--madera-palido);
  border-top-color: var(--madera);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   TOASTS
══════════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 28px; left: 50%; transform: translateX(-50%) translateY(120%);
  z-index: 9998;
  min-width: 280px; max-width: 88vw;
  padding: 14px 20px;
  border-radius: var(--radio);
  font-size: .97rem;
  font-weight: 500;
  text-align: center;
  box-shadow: var(--sombra-lg);
  transition: transform .3s ease;
  pointer-events: none;
}
.toast.visible { transform: translateX(-50%) translateY(0); }
.toast--error { background: var(--rojo);   color: #fff; }
.toast--ok    { background: var(--verde);  color: #fff; }


/* ══════════════════════════════════════════════════════════════
   LOGIN
══════════════════════════════════════════════════════════════ */
#login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 48px;
  background: var(--bg-suave);
}

/* Encabezado de marca */
.login-header {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo-icon {
  width: 64px; height: 64px;
  color: var(--madera);
  margin: 0 auto 10px;
}
.login-marca {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--madera-oscuro);
  letter-spacing: -.02em;
}
.login-sub {
  font-size: 1rem;
  color: var(--texto-suave);
  margin-top: 4px;
}

/* Secciones de pasos */
#login-paso-1,
#login-paso-2 {
  width: 100%;
  max-width: 560px;
}

.login-titulo {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 20px;
  text-align: center;
}

/* Grilla de usuarios */
.usuarios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
}
.cargando-usuarios {
  color: var(--texto-suave);
  text-align: center;
  grid-column: 1/-1;
  padding: 24px 0;
}

.tarjeta-usuario {
  background: var(--bg-card);
  border: 2px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.tarjeta-usuario:hover,
.tarjeta-usuario:focus-visible {
  border-color: var(--madera);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.tarjeta-usuario:active { transform: translateY(0); }

.tarjeta-usuario .avatar {
  width: 56px; height: 56px;
  font-size: 1.25rem;
}
.tarjeta-usuario .nombre-usuario {
  font-size: .93rem;
  font-weight: 600;
  text-align: center;
  color: var(--texto);
  line-height: 1.3;
}
.tarjeta-usuario .rol-usuario {
  font-size: .8rem;
  color: var(--madera);
  font-weight: 500;
  text-align: center;
}

/* Avatar con iniciales */
.avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--madera);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .03em;
  flex-shrink: 0;
}

/* Paso 2: PIN */
.btn-volver {
  background: none;
  border: none;
  color: var(--madera);
  font-size: .95rem;
  font-weight: 500;
  padding: 4px 0 16px;
  display: block;
}
.btn-volver:hover { color: var(--madera-oscuro); }

.usuario-seleccionado {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--madera-palido);
  border-radius: var(--radio);
  margin-bottom: 24px;
}
.usuario-nombre-login {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--madera-oscuro);
}

/* Puntos del PIN */
.pin-puntos {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}
.pin-punto {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--madera);
  background: transparent;
  transition: background var(--transicion);
}
.pin-punto.activo { background: var(--madera); }

/* Teclado PIN */
.pin-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 300px;
  margin: 0 auto;
}
.pin-tecla {
  height: 68px;
  font-size: 1.5rem;
  font-weight: 600;
  background: var(--bg-card);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  transition: background var(--transicion), border-color var(--transicion), transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.pin-tecla:hover  { background: var(--madera-palido); border-color: var(--madera-claro); }
.pin-tecla:active { transform: scale(.94); }

.pin-borrar {
  background: var(--bg-suave);
  color: var(--rojo);
  font-size: 1.3rem;
}
.pin-entrar {
  background: var(--madera);
  border-color: var(--madera);
  color: #fff;
  font-size: 1.4rem;
}
.pin-entrar:hover { background: var(--madera-oscuro); border-color: var(--madera-oscuro); }

.login-error {
  color: var(--rojo);
  font-size: .93rem;
  text-align: center;
  margin-top: 14px;
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════════ */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#vista-principal {
  flex: 1;
  padding: 20px 16px 80px; /* bottom: espacio para navbar fija en móvil */
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #vista-principal { padding: 28px 24px 40px; }
}


/* ══════════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════════ */
#navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: 12px;
}
.navbar-marca {
  font-size: 1rem;
  font-weight: 700;
  color: var(--madera-oscuro);
  white-space: nowrap;
}
.navbar-usuario {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .9rem;
  color: var(--texto-suave);
}
.navbar-usuario .avatar { width: 34px; height: 34px; font-size: .85rem; }
.navbar-links {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  overflow: visible;
}
.navbar-link {
  background: none;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--texto-suave);
  font-size: .9rem;
  font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
  white-space: nowrap;
}
.navbar-link:hover   { background: var(--madera-palido); color: var(--madera); }
.navbar-link.activo  { background: var(--madera-palido); color: var(--madera); font-weight: 600; }

.btn-cerrar-sesion {
  background: none;
  border: 1px solid var(--borde);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--texto-suave);
  transition: background var(--transicion);
  white-space: nowrap;
}
.btn-cerrar-sesion:hover { background: var(--rojo-claro); color: var(--rojo); border-color: var(--rojo); }

/* Dropdown "Más" para ítems que no caben */
.navbar-mas {
  position: relative;
}
.navbar-mas-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  min-width: 180px;
  z-index: 1000;
  padding: 4px 0;
}
.navbar-mas:hover .navbar-mas-dropdown,
.navbar-mas.activo .navbar-mas-dropdown {
  display: block;
}
.navbar-dropdown-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--texto);
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background var(--transicion);
}
.navbar-dropdown-item:hover { background: var(--madera-palido); color: var(--madera); }
.navbar-dropdown-item.activo { background: var(--madera-palido); color: var(--madera); font-weight: 600; }

/* Hamburguesa móvil — oculta en desktop */
.navbar-hamburguesa {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--texto);
  padding: 4px 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar-hamburguesa { display: flex; align-items: center; }
  .navbar-inner { flex-wrap: wrap; height: auto; min-height: 56px; }
  .navbar-links {
    display: none;
    flex-direction: column;
    width: 100%;
    order: 10;
    padding: 8px 0;
    border-top: 1px solid var(--borde);
    gap: 0;
  }
  .navbar-links.abierto { display: flex; }
  .navbar-links .navbar-link {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    border-radius: 0;
  }
  .navbar-mas { width: 100%; }
  .navbar-mas-toggle { width: 100%; text-align: left; padding: 10px 16px; border-radius: 0; }
  .navbar-mas-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    border-radius: 0;
    min-width: 0;
    padding-left: 16px;
    background: var(--bg-suave);
  }
  .navbar-mas:hover .navbar-mas-dropdown { display: none; }
  .navbar-mas.activo .navbar-mas-dropdown { display: block; }
  .navbar-nombre-oculto { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   CARDS Y SECCIONES GENERALES
══════════════════════════════════════════════════════════════ */
.card {
  background: var(--bg-card);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 20px;
}
.card-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.seccion-titulo {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--texto);
  margin-bottom: 20px;
}

/* Saludo en el home */
.saludo-bloque {
  background: linear-gradient(135deg, var(--madera) 0%, var(--madera-oscuro) 100%);
  color: #fff;
  border-radius: var(--radio-lg);
  padding: 24px 24px 20px;
  margin-bottom: 24px;
}
.saludo-titulo {
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.saludo-sub {
  font-size: .95rem;
  opacity: .85;
}

/* Grid de botones grandes en home */
.home-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}
@media (min-width: 480px) {
  .home-acciones { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

.btn-accion-grande {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 12px 18px;
  background: var(--bg-card);
  border: 2px solid var(--borde);
  border-radius: var(--radio-lg);
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion), transform var(--transicion);
  -webkit-tap-highlight-color: transparent;
}
.btn-accion-grande:hover {
  border-color: var(--madera);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}
.btn-accion-grande .icono { font-size: 1.8rem; }
.btn-accion-grande.primario {
  background: var(--madera);
  border-color: var(--madera);
  color: #fff;
}
.btn-accion-grande.primario:hover {
  background: var(--madera-oscuro);
  border-color: var(--madera-oscuro);
}

/* Tarjetas de resumen (contador + label) */
.resumen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
@media (min-width: 640px) {
  .resumen-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}
.resumen-card {
  background: var(--bg-card);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow var(--transicion);
}
.resumen-card:hover { box-shadow: var(--sombra); }
.resumen-numero {
  font-size: 2rem;
  font-weight: 800;
  color: var(--madera);
  line-height: 1;
  margin-bottom: 6px;
}
.resumen-label {
  font-size: .85rem;
  color: var(--texto-suave);
  font-weight: 500;
}
.resumen-card.alerta .resumen-numero { color: var(--rojo); }


/* ══════════════════════════════════════════════════════════════
   BOTONES COMUNES
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: var(--radio);
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), transform .1s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }

.btn-primario {
  background: var(--madera);
  color: #fff;
  border-color: var(--madera);
}
.btn-primario:hover { background: var(--madera-oscuro); border-color: var(--madera-oscuro); }

.btn-secundario {
  background: transparent;
  color: var(--madera);
  border-color: var(--madera);
}
.btn-secundario:hover { background: var(--madera-palido); }

.btn-peligro {
  background: var(--rojo);
  color: #fff;
  border-color: var(--rojo);
}
.btn-peligro:hover { background: #a93226; border-color: #a93226; }

.btn-neutro {
  background: var(--bg-suave);
  color: var(--texto);
  border-color: var(--borde);
}
.btn-neutro:hover { background: var(--borde); }

.btn-sm { padding: 7px 14px; font-size: .88rem; }
.btn-lg { padding: 15px 30px; font-size: 1.08rem; }
.btn-bloque { width: 100%; }


/* ══════════════════════════════════════════════════════════════
   FORMULARIOS
══════════════════════════════════════════════════════════════ */
.form-grupo {
  margin-bottom: 18px;
}
.form-grupo label {
  display: block;
  font-size: .93rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
}
.form-grupo input,
.form-grupo select,
.form-grupo textarea {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  background: var(--bg-card);
  color: var(--texto);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  font-size: 1rem;
  appearance: none;
  -webkit-appearance: none;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  outline: none;
  border-color: var(--madera);
  box-shadow: 0 0 0 3px rgba(139,94,60,.15);
}
.form-grupo textarea { min-height: 90px; resize: vertical; }
.form-grupo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238B5E3C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

/* Buscador con resultados dropdown */
.buscador-wrap { position: relative; }
.buscador-resultados {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-card);
  border: 2px solid var(--madera);
  border-radius: var(--radio);
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: var(--sombra-lg);
}
.buscador-item {
  padding: 11px 16px;
  cursor: pointer;
  font-size: .97rem;
  border-bottom: 1px solid var(--borde);
  transition: background var(--transicion);
}
.buscador-item:last-child { border-bottom: none; }
.buscador-item:hover { background: var(--madera-palido); }
.buscador-vacio {
  padding: 14px 16px;
  color: var(--texto-suave);
  font-size: .93rem;
  text-align: center;
}

/* Campo de foto */
.campo-foto label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  cursor: pointer;
  color: var(--texto-suave);
  font-size: .97rem;
  font-weight: 500;
  transition: border-color var(--transicion), background var(--transicion);
}
.campo-foto label:hover { border-color: var(--madera); background: var(--madera-palido); color: var(--madera); }
.campo-foto input[type="file"] { display: none; }
.campo-foto .preview-foto {
  max-height: 180px;
  border-radius: var(--radio);
  margin-top: 10px;
  object-fit: contain;
}


/* ══════════════════════════════════════════════════════════════
   TABLA
══════════════════════════════════════════════════════════════ */
.tabla-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
thead tr {
  background: var(--madera-palido);
}
thead th {
  padding: 12px 16px;
  text-align: left;
  font-size: .85rem;
  font-weight: 700;
  color: var(--madera-oscuro);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
tbody tr {
  border-top: 1px solid var(--borde);
  transition: background var(--transicion);
}
tbody tr:hover { background: var(--bg-suave); }
tbody td {
  padding: 13px 16px;
  vertical-align: middle;
}
.tabla-vacia td {
  text-align: center;
  padding: 32px 16px;
  color: var(--texto-suave);
  font-style: italic;
}

/* Filtros de tabla */
.filtros-tabla {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.filtro-btn {
  padding: 7px 16px;
  border-radius: 20px;
  border: 2px solid var(--borde);
  background: var(--bg-card);
  font-size: .88rem;
  font-weight: 500;
  color: var(--texto-suave);
  cursor: pointer;
  transition: all var(--transicion);
}
.filtro-btn:hover   { border-color: var(--madera-claro); color: var(--madera); }
.filtro-btn.activo  { background: var(--madera); border-color: var(--madera); color: #fff; }


/* ══════════════════════════════════════════════════════════════
   BADGES / ETIQUETAS DE ESTADO
══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-verde     { background: var(--verde-claro);    color: #1a7a40; }
.badge-amarillo  { background: var(--amarillo-claro); color: #7a5000; }
.badge-rojo      { background: var(--rojo-claro);     color: var(--rojo); }
.badge-gris      { background: #eee;                  color: #555; }
.badge-madera    { background: var(--madera-palido);  color: var(--madera-oscuro); }


/* ══════════════════════════════════════════════════════════════
   BARRA DE PROGRESO (etapas de producción)
══════════════════════════════════════════════════════════════ */
.etapas-produccion {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 8px 0;
}
.etapa {
  flex: 1;
  text-align: center;
  padding: 6px 4px;
  font-size: .75rem;
  font-weight: 600;
  background: var(--bg-suave);
  border: 1.5px solid var(--borde);
  color: var(--texto-suave);
  position: relative;
}
.etapa:first-child { border-radius: 6px 0 0 6px; }
.etapa:last-child  { border-radius: 0 6px 6px 0; }
.etapa + .etapa    { border-left: none; }
.etapa.completada  { background: var(--verde-claro);    color: #1a7a40; border-color: var(--verde); }
.etapa.activa      { background: var(--madera);         color: #fff;    border-color: var(--madera); }
.etapa.atrasada    { background: var(--rojo-claro);     color: var(--rojo); border-color: var(--rojo); }


/* ══════════════════════════════════════════════════════════════
   SEMÁFORO DE STOCK
══════════════════════════════════════════════════════════════ */
.semaforo {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.semaforo-verde    { background: var(--verde); }
.semaforo-amarillo { background: var(--amarillo); }
.semaforo-rojo     { background: var(--rojo); }


/* ══════════════════════════════════════════════════════════════
   TARJETAS DE TAREA (Operario)
══════════════════════════════════════════════════════════════ */
.tarea-card {
  background: var(--bg-card);
  border: 2px solid var(--borde);
  border-radius: var(--radio-lg);
  padding: 18px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.tarea-card:hover { border-color: var(--madera); box-shadow: var(--sombra); }
.tarea-card.en-curso { border-color: var(--amarillo); background: var(--amarillo-claro); }
.tarea-card.completada { border-color: var(--verde); opacity: .7; }
.tarea-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.tarea-operacion {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--texto);
}
.tarea-mueble {
  font-size: .9rem;
  color: var(--texto-suave);
}
.tarea-tiempo {
  font-size: .85rem;
  color: var(--texto-muy-suave);
  white-space: nowrap;
}

/* Botones de acción de tarea */
.tarea-acciones {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}


/* ══════════════════════════════════════════════════════════════
   KANBAN
══════════════════════════════════════════════════════════════ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}
.kanban-columna {
  background: var(--bg-suave);
  border-radius: var(--radio-lg);
  padding: 0 12px 12px;
  min-width: 185px;
}
.kanban-columna-header {
  padding: 14px 4px 10px;
  font-size: .88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  display: flex;
  align-items: center;
  justify-content: space-between;
  sticky: top 0;
}
.kanban-count {
  background: var(--borde);
  color: var(--texto-suave);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}

.kanban-tarjeta {
  background: var(--bg-card);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  transition: box-shadow var(--transicion);
}
.kanban-tarjeta:hover { box-shadow: var(--sombra); }
.kanban-tarjeta.a-tiempo  { border-left: 4px solid var(--verde); }
.kanban-tarjeta.hoy       { border-left: 4px solid var(--amarillo); }
.kanban-tarjeta.atrasado  { border-left: 4px solid var(--rojo); background: var(--rojo-claro); }

.kanban-tarjeta .cliente  { font-size: .8rem; color: var(--texto-suave); margin-bottom: 3px; }
.kanban-tarjeta .mueble   { font-size: .97rem; font-weight: 700; color: var(--texto); margin-bottom: 6px; }
.kanban-tarjeta .dias-chip {
  font-size: .8rem;
  font-weight: 600;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
}
.dias-chip.positivo  { background: var(--verde-claro);    color: #1a7a40; }
.dias-chip.hoy       { background: var(--amarillo-claro); color: #7a5000; }
.dias-chip.negativo  { background: var(--rojo-claro);     color: var(--rojo); }


/* ══════════════════════════════════════════════════════════════
   GRÁFICOS
══════════════════════════════════════════════════════════════ */
.grafico-wrap {
  position: relative;
  width: 100%;
}
.grafico-wrap canvas {
  max-width: 100%;
}
.grafico-titulo {
  font-size: .93rem;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* ══════════════════════════════════════════════════════════════
   MÉTRICAS DASHBOARD
══════════════════════════════════════════════════════════════ */
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.metrica-card {
  background: var(--bg-card);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  padding: 18px 16px;
}
.metrica-valor {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--madera);
  line-height: 1;
  margin-bottom: 6px;
  word-break: break-all;
}
.metrica-label {
  font-size: .83rem;
  color: var(--texto-suave);
  font-weight: 500;
}
.metrica-sub {
  font-size: .8rem;
  color: var(--texto-muy-suave);
  margin-top: 4px;
}
.metrica-card.alerta .metrica-valor { color: var(--rojo); }
.metrica-card.ok     .metrica-valor { color: var(--verde); }


/* ══════════════════════════════════════════════════════════════
   ALERTAS INFORMATIVAS
══════════════════════════════════════════════════════════════ */
.alerta {
  padding: 14px 18px;
  border-radius: var(--radio);
  font-size: .95rem;
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid transparent;
}
.alerta-rojo    { background: var(--rojo-claro);     color: var(--rojo);     border-color: var(--rojo); }
.alerta-amarillo{ background: var(--amarillo-claro); color: #7a5000;         border-color: var(--amarillo); }
.alerta-verde   { background: var(--verde-claro);    color: #1a7a40;         border-color: var(--verde); }


/* ══════════════════════════════════════════════════════════════
   ESTADO VACÍO
══════════════════════════════════════════════════════════════ */
.estado-vacio {
  text-align: center;
  padding: 48px 20px;
  color: var(--texto-suave);
}
.estado-vacio-icono { font-size: 3rem; margin-bottom: 12px; opacity: .35; }
.estado-vacio p { font-size: 1rem; }


/* ══════════════════════════════════════════════════════════════
   DETALLE — header con botón volver
══════════════════════════════════════════════════════════════ */
.vista-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.btn-volver-vista {
  background: none;
  border: none;
  color: var(--madera);
  font-size: 1rem;
  font-weight: 600;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-volver-vista:hover { color: var(--madera-oscuro); }
.vista-header h2 {
  font-size: 1.25rem;
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════
   LISTA DE MATERIALES (tabla inline en detalle tarea)
══════════════════════════════════════════════════════════════ */
.materiales-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.materiales-lista li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--borde);
  font-size: .95rem;
}
.materiales-lista li:last-child { border-bottom: none; }
.mat-nombre { color: var(--texto); }
.mat-cantidad { color: var(--texto-suave); font-weight: 600; }


/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — tablets (iPad, 768px+)
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .home-acciones { grid-template-columns: repeat(4, 1fr); }
  .resumen-grid  { grid-template-columns: repeat(4, 1fr); }
  .metricas-grid { grid-template-columns: repeat(3, 1fr); }
  .kanban-board  { grid-template-columns: repeat(4, 1fr); overflow-x: visible; }

  #login-paso-1,
  #login-paso-2 { max-width: 640px; }

  .usuarios-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* Pantallas grandes */
@media (min-width: 1024px) {
  .metricas-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Animación shake (error PIN) */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-6px); }
  80%      { transform: translateX(6px); }
}
.pin-shake { animation: shake .52s ease; }

/* Pantallas pequeñas (teléfono) */
@media (max-width: 480px) {
  .home-acciones { grid-template-columns: 1fr 1fr; }
  .kanban-board  { grid-template-columns: repeat(4, minmax(170px,1fr)); }
}

/* ── FICHAS TÉCNICAS ─────────────────────────────────────── */
.fichas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 4px 0;
}

.ficha-card {
  background: var(--fondo-secundario, #f9f9f9);
  border: 1px solid var(--borde);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .1s;
  display: flex;
  flex-direction: column;
}
.ficha-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-2px); }

.ficha-img { height: 160px; background: #eee; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ficha-img img { width: 100%; height: 100%; object-fit: cover; }
.ficha-img-placeholder { font-size: 3rem; color: #ccc; }
.ficha-img-placeholder.grande { font-size: 5rem; }

.ficha-info { padding: 12px 16px 16px; }
.ficha-nombre { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.ficha-medidas { font-size: .85rem; color: var(--texto-suave); }

/* Detalle */
.ficha-detalle { display: flex; flex-direction: column; gap: 16px; }
.ficha-detalle-header { display: flex; gap: 16px; align-items: flex-start; }
.ficha-detalle-foto { width: 200px; min-width: 200px; height: 200px; background: #eee; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ficha-detalle-foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha-detalle-meta { flex: 1; }
.ficha-detalle-meta h2 { margin: 0 0 8px; }

/* Tabla simple */
.tabla-simple { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-simple th { text-align: left; font-size: .8rem; color: var(--texto-suave); font-weight: 600; border-bottom: 2px solid var(--borde); padding: 6px 8px; }
.tabla-simple td { padding: 8px; border-bottom: 1px solid var(--borde); }
.tabla-simple tr:last-child td { border-bottom: none; }

/* Input campo */
.input-campo { width: 100%; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 8px; font-size: .95rem; box-sizing: border-box; background: var(--fondo); color: var(--texto); }

/* ── RESPONSIVE MOBILE — HAL-UI-022/023/024/025 ─────────── */
@media (max-width: 600px) {
  #er-tablas { grid-template-columns: 1fr !important; }
  #kpi-iso-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .nc-col-secundaria { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   MODALES GENÉRICOS (confirmación, input, fichas técnicas)
══════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-caja {
  background: var(--bg-card);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-titulo {
  padding: 20px 24px 16px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
}

.modal-cuerpo {
  padding: 20px 24px;
  flex: 1;
}

.modal-pie {
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--borde);
}

@media (max-width: 480px) {
  .modal-caja { width: 100%; }
  .modal-pie { flex-direction: column-reverse; }
  .modal-pie .btn { width: 100%; }
}

/* ── PRINT — Ficha técnica ───────────────────────────────── */
@media print {
  #navbar, .btn-volver, #btn-guardar-medidas, button, .saludo-bloque { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
  .ficha-img-placeholder { display: none; }
  .ficha-detalle-foto { width: 150px; min-width: 150px; height: 150px; }
}