/* onclic.shop — Área de cliente (panel) */

.account { display: grid; gap: var(--sp-5); }
@media (min-width: 1024px) {
  .account { grid-template-columns: 240px 1fr; align-items: start; }
}
.account__content { min-width: 0; }
.account__title { margin-bottom: var(--sp-1); }
.account__sub { color: var(--gray-500); margin-bottom: var(--sp-5); }

/* Sidebar */
.account-nav { display: flex; gap: var(--sp-2); overflow-x: auto; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: var(--sp-2); }
@media (min-width: 1024px) {
  .account-nav { flex-direction: column; position: sticky; top: 80px; box-shadow: var(--shadow-sm); overflow: visible; }
}
.account-nav__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md); color: var(--gray-700); font-weight: var(--fw-medium); white-space: nowrap; text-decoration: none; }
.account-nav__item:hover { background: var(--brand-50); text-decoration: none; }
.account-nav__item[aria-current] { background: var(--brand-600); color: var(--white); }
.account-nav__item .icon { width: 20px; height: 20px; flex-shrink: 0; }
.account-nav__sep { display: none; }
@media (min-width: 1024px) { .account-nav__sep { display: block; height: 1px; background: var(--gray-200); margin: var(--sp-2) 0; } }
.account-nav__logout { color: var(--error-600); }

/* Acciones pendientes */
.alerts { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.alert-row { display: flex; align-items: center; gap: var(--sp-3); background: var(--white);
  border: 1px solid var(--gray-200); border-left: 4px solid var(--warning-600); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); }
.alert-row--danger { border-left-color: var(--error-600); }
.alert-row__msg { flex: 1; }
.alert-row .icon { width: 20px; height: 20px; flex-shrink: 0; }
.alerts-ok { display: flex; align-items: center; gap: var(--sp-2); color: var(--success-600);
  background: var(--success-50); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-6); }

/* Cards de resumen */
.summary-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-bottom: var(--sp-6); }
@media (min-width: 600px) { .summary-grid { grid-template-columns: repeat(3, 1fr); } }
.summary-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-2); }
.summary-card__head { display: flex; align-items: center; gap: var(--sp-2); color: var(--brand-700); font-weight: var(--fw-semibold); }
.summary-card__head .icon { width: 22px; height: 22px; }
.summary-card__count { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xl); color: var(--brand-900); }
.summary-card__roll { color: var(--gray-500); font-size: var(--fs-sm); }

/* Paneles genéricos */
.panel { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-5); }
.panel__title { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-lg); margin-bottom: var(--sp-4); }
.dash-cols { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .dash-cols { grid-template-columns: 1fr 1fr; } }

/* Tabla de servicios/pedidos */
.account-table { width: 100%; background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--r-lg); overflow: hidden; border-collapse: collapse; }
.account-table th { background: var(--brand-50); color: var(--brand-900); text-align: left;
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); }
.account-table td { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--gray-100); vertical-align: middle; }
.account-table__name { font-family: var(--font-mono); font-weight: var(--fw-semibold); word-break: break-all; }
@media (max-width: 767px) {
  .account-table thead { display: none; }
  .account-table tr { display: block; border: 1px solid var(--gray-200); border-radius: var(--r-md); margin-bottom: var(--sp-3); }
  .account-table td { display: flex; justify-content: space-between; gap: var(--sp-3); border: 0; border-top: 1px solid var(--gray-100); text-align: right; }
  .account-table tr td:first-child { border-top: 0; }
  .account-table td::before { content: attr(data-label); font-weight: var(--fw-semibold); color: var(--gray-500); text-align: left; }
}

/* Lista de filas (renovaciones, etc.) */
.mini-list { display: flex; flex-direction: column; }
.mini-list__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-2) 0; border-top: 1px solid var(--gray-100); font-size: var(--fs-sm); }
.mini-list__row:first-child { border-top: 0; }

/* Detalle (tarjetas) */
.detail-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--gray-100); }
.kv:first-child { border-top: 0; }
.kv__k { color: var(--gray-500); }
.kv--stack { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.cfg-row { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; justify-content: flex-end; }
.epp-field { display: flex; gap: var(--sp-2); align-items: center; width: 100%; }
.epp-code { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono, monospace); font-size: var(--fs-sm); letter-spacing: .04em; }
.epp-code[type="text"] { user-select: all; }
.soon { opacity: .55; }
.soon-tag { font-size: var(--fs-xs); background: var(--gray-100); color: var(--gray-500); padding: 1px var(--sp-2); border-radius: var(--r-full); }

/* Empty state */
.empty-state { text-align: center; padding: var(--sp-7) var(--sp-5); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.empty-state .icon { width: 48px; height: 48px; color: var(--gray-300); }

/* Accesos rápidos */
.quick { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Badges extra */
.badge--neutral { background: var(--gray-100); color: var(--gray-700); }
.badge--danger { background: var(--error-50); color: var(--error-600); }
.badge--info { background: var(--brand-100); color: var(--brand-700); }

/* ===== Panel de administración ===== */
.account__head { margin-bottom: var(--sp-5); }
.account__head h1 { margin-bottom: var(--sp-1); }

/* Métricas */
.stats-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-bottom: var(--sp-6); }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(5, 1fr); } }
.stat { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__icon { color: var(--brand-500); }
.stat__icon .icon { width: 22px; height: 22px; }
.stat__value { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-xl); color: var(--brand-900); }
.stat__label { color: var(--gray-500); font-size: var(--fs-sm); }
.stat--brand { border-left: 4px solid var(--brand-600); }
.stat--ok { border-left: 4px solid var(--success-600); }
.stat--warn { border-left: 4px solid var(--warning-600); }

/* Píldoras / chips de filtro */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.pill { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
  text-decoration: none; color: var(--gray-700); font-size: var(--fs-sm); }
.pill:hover { border-color: var(--brand-300); text-decoration: none; }
.pill.is-active { border-color: var(--brand-600); background: var(--brand-50); }

/* Filtros (formularios en línea) */
.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; margin-bottom: var(--sp-5); }
.filters .field { margin: 0; flex: 1 1 220px; }
.inline-form { display: flex; gap: var(--sp-2); align-items: center; }
.input--sm { min-height: 36px; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-sm); }
.btn--sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); min-height: 36px; }

/* Tarjetas en dos columnas */
.cards-2 { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cards-2 { grid-template-columns: 1fr 1fr; } }

/* Lista clave-valor (definición) */
.kv-list { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 0; }
.kv-list dt { color: var(--gray-500); padding: var(--sp-2) var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--gray-100); }
.kv-list dd { padding: var(--sp-2) 0; border-top: 1px solid var(--gray-100); word-break: break-word; }
.kv-list dt:first-of-type, .kv-list dd:nth-of-type(1) { border-top: 0; }

/* Encabezado de sección con enlace a la derecha */
.account-section { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.account-section__link { font-size: var(--fs-sm); }

/* Paginador */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.pager__btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--gray-200); border-radius: var(--r-md); text-decoration: none; color: var(--brand-700); background: var(--white); }
.pager__btn:hover { border-color: var(--brand-300); text-decoration: none; }
.pager__btn.is-disabled { color: var(--gray-300); pointer-events: none; }
.pager__info { color: var(--gray-500); font-size: var(--fs-sm); }

/* Log API */
.log-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-md); margin-bottom: var(--sp-2); }
.log-item > summary { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; list-style: none; }
.log-item__action { font-family: var(--font-mono); font-weight: var(--fw-semibold); flex: 1; word-break: break-all; }
.log-item__date { color: var(--gray-500); font-size: var(--fs-sm); white-space: nowrap; }
.log-item__body { padding: 0 var(--sp-4) var(--sp-4); }
.log-item__body h4 { margin: var(--sp-3) 0 var(--sp-1); color: var(--gray-700); font-size: var(--fs-sm); }
.code-block { background: var(--gray-50, #f8fafc); border: 1px solid var(--gray-100); border-radius: var(--r-sm);
  padding: var(--sp-3); overflow-x: auto; font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; word-break: break-word; }

/* Factura imprimible */
@media print {
  .navbar, .footer, .account-nav, .cookie-banner, .no-print { display: none !important; }
  .account { grid-template-columns: 1fr; }
  body { background: var(--white); }
  .invoice { border: 0; box-shadow: none; padding: 0; }
}

/* Justificante / factura */
.account__actions { display: flex; gap: var(--sp-2); align-items: center; }
.invoice { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--r-lg); padding: var(--sp-6); margin-top: var(--sp-4); }
.invoice__head { display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; padding-bottom: var(--sp-5); border-bottom: 2px solid var(--gray-100); }
.invoice__brand { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xl); font-weight: 700; color: var(--brand-700); margin-bottom: var(--sp-2); }
.invoice__brand .icon { width: 22px; height: 22px; color: var(--brand-600); }
.invoice__seller-data { font-size: var(--fs-sm); color: var(--gray-600); line-height: 1.5; }
.invoice__meta { text-align: right; min-width: 220px; }
.invoice__doctype { display: inline-block; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-sm); color: var(--brand-700); background: var(--brand-100); padding: 2px var(--sp-3); border-radius: var(--r-full); margin-bottom: var(--sp-3); }
.invoice__metatable { margin-left: auto; border-collapse: collapse; font-size: var(--fs-sm); }
.invoice__metatable th { text-align: right; color: var(--gray-500); font-weight: 500; padding: 2px var(--sp-3) 2px 0; }
.invoice__metatable td { text-align: right; }
.invoice__parties { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin: var(--sp-5) 0; }
.invoice__party-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--gray-500); margin: 0 0 var(--sp-2); }
.invoice__party p { margin: 0; line-height: 1.6; }
.invoice__items { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; }
.invoice__items th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; color: var(--gray-500); text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid var(--gray-200); }
.invoice__items td { padding: var(--sp-3); border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.invoice__items .num { text-align: right; white-space: nowrap; }
.invoice__bottom { display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-4); }
.invoice__pay { font-size: var(--fs-sm); }
.invoice__pay p { line-height: 1.7; margin: 0; }
.invoice__totals { min-width: 280px; margin-left: auto; }
.invoice__total { border-top: 2px solid var(--gray-200); margin-top: var(--sp-1); padding-top: var(--sp-2); font-size: var(--fs-lg); }
.invoice__note { font-size: var(--fs-xs); color: var(--gray-500); margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--gray-100); line-height: 1.6; }
@media (max-width: 640px) {
  .invoice__parties { grid-template-columns: 1fr; }
  .invoice__meta { text-align: left; }
  .invoice__metatable { margin-left: 0; }
  .invoice__metatable th, .invoice__metatable td { text-align: left; }
}

/* Gestión de DNS */
.dns-domlist { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.dns-domlist a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.dns-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.dns-domain { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); }
.dns-domain .icon { color: var(--brand-600); }
.dns-val { word-break: break-all; }
.dns-locked { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.dns-locked .icon { width: 14px; height: 14px; }
.dns-add { margin-top: var(--sp-3); }