@import url('../assets/shark8-theme.css?v=23');

/* Modo admin en área cliente */
.cuenta-admin-bar {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in oklch, var(--primary) 35%, var(--border));
  background: color-mix(in oklch, var(--primary) 10%, var(--card));
}
.cuenta-admin-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-size: 14px;
}
.cuenta-admin-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
}
.cuenta-admin-bar-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cuenta-admin-panel {
  margin-bottom: 20px;
  border: 1px dashed color-mix(in oklch, var(--primary) 40%, var(--border));
}
.cuenta-admin-panel summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.cuenta-admin-panel summary::-webkit-details-marker { display: none; }
.cuenta-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.cuenta-admin-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
}
.cuenta-admin-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cuenta-admin-inline input[type="number"],
.cuenta-admin-inline input[type="text"] {
  min-width: 120px;
  flex: 1;
}
.cuenta-admin-form .fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.btn.sm, .btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Transiciones suaves para campos dinámicos */
.field-transition {
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease;
  opacity: 1;
  max-height: 120px;
}
.field-transition[style*="display: none"] {
  opacity: 0;
  max-height: 0;
}

/* Estilo del dropdown de servicios */
#bypass-service {
  font-size: 15px;
}
#bypass-service optgroup {
  font-weight: 600;
  font-style: normal;
  color: var(--text);
  background: var(--card);
}
#bypass-service option {
  font-weight: 400;
  padding: 8px 12px;
}

/* Display de costo */
.cost-display {
  padding: 12px 16px;
  background: color-mix(in oklch, var(--primary) 8%, var(--card));
  border-radius: 8px;
  border: 1px solid color-mix(in oklch, var(--primary) 20%, var(--border));
  margin: 8px 0;
}
.cost-display strong {
  color: var(--primary);
  font-size: 1.1em;
}

/* Desactivar animaciones de hover molestas */
.card:hover,
.stat:hover,
.panel-link:hover,
.plan:hover,
.plan.on:hover,
.btn:hover,
.pack:hover,
.feature:hover,
.faq-item:hover,
[class*="card"]:hover,
[class*="panel"]:hover {
  transform: none !important;
}