/* CatalogoAPI — Panel de cliente
   Identidad deliberadamente distinta del dashboard admin: esto no es
   una herramienta de operación, es "¿mi servicio funciona y qué estoy
   pagando?" para alguien sin conocimientos técnicos. Fondo cálido,
   una tarjeta por servicio, el color de estado marcado en el borde
   izquierdo de la tarjeta en vez de una insignia redondeada aparte. */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@500;600&family=Source+Sans+3:wght@400;500;600&display=swap');

:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --border: #e6e2d8;
  --text: #262521;
  --text-secondary: #6c6a62;
  --text-tertiary: #a3a096;

  --active: #2f8f6f;
  --active-bg: #eaf4ef;
  --provisioning: #b8791c;
  --provisioning-bg: #f8f0e2;
  --suspended: #857f6f;
  --suspended-bg: #efece4;
  --failed: #b8402f;
  --failed-bg: #f8ebe8;

  --font-display: 'Source Serif 4', Georgia, serif;
  --font-ui: 'Source Sans 3', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button, input {
  font-family: inherit;
  font-size: 15px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--active);
  outline-offset: 2px;
}

.page {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.topbar__mark {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
}

.topbar__signout {
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 13.5px;
  padding: 4px;
}

.topbar__signout:hover { color: var(--text-secondary); }

h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
}

.page-sub {
  color: var(--text-secondary);
  margin: 0 0 32px;
  font-size: 14.5px;
}

/* ---------- Service cards ---------- */

.services {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.service-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-tertiary);
  border-radius: 8px;
  padding: 20px 22px;
}

.service-card--active { border-left-color: var(--active); }
.service-card--provisioning { border-left-color: var(--provisioning); }
.service-card--suspended { border-left-color: var(--suspended); }
.service-card--failed { border-left-color: var(--failed); }

.service-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.service-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
}

.service-card__domain {
  color: var(--text-secondary);
  font-size: 13.5px;
  margin-bottom: 14px;
}

.service-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
}

.service-card__status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.service-card--active .service-card__status { color: var(--active); background: var(--active-bg); }
.service-card--provisioning .service-card__status { color: var(--provisioning); background: var(--provisioning-bg); }
.service-card--suspended .service-card__status { color: var(--suspended); background: var(--suspended-bg); }
.service-card--failed .service-card__status { color: var(--failed); background: var(--failed-bg); }

.service-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.service-card__plan {
  font-size: 14px;
}

.service-card__plan strong { font-weight: 600; }

.service-card__price {
  color: var(--text-secondary);
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary { background: var(--text); color: var(--surface); }
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-primary--muted {
  background: var(--suspended-bg);
  color: var(--text-tertiary);
  pointer-events: none;
}

.empty-state {
  padding: 48px 20px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px dashed var(--border);
  border-radius: 8px;
}

/* ---------- Auth screens (login / set password) ---------- */

.auth-page {
  max-width: 380px;
  margin: 0 auto;
  padding: 80px 24px;
}

.auth-card__mark {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 28px;
  text-align: center;
}

.auth-card h1 {
  font-size: 20px;
  margin-bottom: 6px;
}

.auth-card__sub {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 26px;
}

.field { margin-bottom: 16px; }

.field label {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 13px;
  border-radius: 6px;
}

.field input:focus {
  outline: 2px solid var(--active);
  outline-offset: 1px;
  border-color: transparent;
}

.field-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-top: 5px;
}

.btn-block { width: 100%; margin-top: 4px; }

.form-error {
  color: var(--failed);
  font-size: 13px;
  margin: -8px 0 16px;
  min-height: 16px;
}

.form-note {
  color: var(--active);
  font-size: 13.5px;
  background: var(--active-bg);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.auth-links {
  text-align: center;
  margin-top: 20px;
  font-size: 13.5px;
}

.auth-links a { color: var(--text-secondary); text-decoration: underline; }
.auth-links a:hover { color: var(--text); }

/* ---------- Registro y elección de dominio ---------- */

.plan-summary {
  background: var(--active-bg);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 20px;
  font-size: 14px;
}

.plan-summary strong { font-family: var(--font-display); }

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.domain-choice {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.domain-choice label {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.domain-choice input[type="radio"] { margin: 0; }

.domain-choice label:has(input:checked) {
  border-color: var(--active);
  background: var(--active-bg);
}

.subdomain-preview {
  font-family: monospace;
  font-size: 13.5px;
  color: var(--text-secondary);
  margin-top: 6px;
}

.subdomain-preview strong { color: var(--text); }

.dns-instructions {
  background: var(--active-bg);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 10px;
}

.dns-instructions table { width: 100%; margin-top: 8px; border-collapse: collapse; }
.dns-instructions td { padding: 4px 0; font-family: monospace; font-size: 12px; }