/* =========================================================
   componentes.css
   Piezas reutilizables en cualquier página del sitio.
   ========================================================= */

/* ---------- Tarjetas ---------- */
.panel-card{
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid var(--panel-border);
  box-shadow: 0 4px 20px -10px rgba(0,0,0,0.05); /* Sombra suave */
}

.stat-card{
  background: var(--field);
  border: 1px solid var(--field-border);
}

/* ---------- Campos de formulario ---------- */
.field{
  background: var(--field);
  border: 1px solid var(--field-border);
  color: var(--text-hi);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field::placeholder{
  color: var(--text-dim);
}
.field:focus{
  outline: none;
  border-color: var(--blue-hi);
  box-shadow: 0 0 0 3px rgba(48, 52, 214, 0.15);
  background: #ffffff;
}
.field:hover:not(:focus){
  border-color: #94a3b8;
}

select.field{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2364748b' stroke-width='1.6'><path d='M5 7l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
}
select.field option{
  background: #ffffff;
  color: var(--text-hi);
}

label.field-label{
  color: var(--text-mid);
  letter-spacing: .02em;
}

/* ---------- Botones ---------- */
.btn-primary{
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  box-shadow: 0 8px 20px -6px rgba(48, 52, 214, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-primary:hover{
  filter: brightness(1.1);
  box-shadow: 0 10px 25px -4px rgba(48, 52, 214, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.btn-primary:active{
  transform: translateY(0);
  filter: brightness(0.95);
}

.eye-btn{
  color: var(--text-dim);
  transition: color .15s ease;
}
.eye-btn:hover{
  color: var(--blue);
}

/* ---------- Badges de estado ---------- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.badge-dot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
}
.badge-green{ background: rgba(16, 185, 129, 0.12); color: var(--green-fg); }
.badge-green .badge-dot{ background: var(--green-fg); }

.badge-amber{ background: rgba(245, 158, 11, 0.12); color: var(--amber-fg); }
.badge-amber .badge-dot{ background: var(--amber-fg); }

.badge-red{ background: rgba(239, 68, 68, 0.12); color: var(--red-fg); }
.badge-red .badge-dot{ background: var(--red-fg); }

.badge-gray{ background: rgba(100, 116, 139, 0.1); color: var(--text-mid); }
.badge-gray .badge-dot{ background: var(--text-mid); }

/* ---------- Tablas de datos ---------- */
table.data-table{
  border-collapse: separate;
  border-spacing: 0;
}
table.data-table thead th{
  color: var(--text-dim);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--panel-border);
  padding: .75rem 1rem;
  text-align: left;
  white-space: nowrap;
}
table.data-table tbody td{
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--panel-border);
  color: var(--text-mid);
  font-size: .85rem;
}
table.data-table tbody tr:last-child td{
  border-bottom: none;
}
table.data-table tbody tr{
  transition: background .12s ease;
}
table.data-table tbody tr:hover{
  background: rgba(0, 0, 0, 0.02); /* Hover adaptado a fondo blanco */
}

/* ---------- Gráfica de barras ---------- */
.bar{
  background: linear-gradient(180deg, var(--blue-hi), var(--blue));
  border-radius: 6px 6px 0 0;
}
.bar--today{
  background: linear-gradient(180deg, #7b7eff, var(--blue-hi));
}