:root {
  --bg: #0E1116;
  --sup: #171B22;
  --sup2: #252a32;
  --borde: #2f3540;
  --acento: #FF5A1F;
  --acento2: #FF7A45;
  --txt: #E6E9EF;
  --tenue: #9AA3AF;
  --ok: #16A34A;
  --err: #DC2626;
  --warn: #F59E0B;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
}

.tarjeta {
  width: 100%;
  max-width: 360px;
  background: var(--sup);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 18px;
}

/* ------------------------------------------------------------ cabecera */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.logo { height: 32px; width: auto; }
.estado { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tenue); }
.estado.ok .punto { background: var(--ok); }
.estado.conectando .punto { background: var(--warn); }
.estado.error .punto { background: var(--err); }

/* ------------------------------------------------------------- formulario */
label { display: block; font-size: 12px; color: var(--tenue); margin-bottom: 10px; }
input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--txt);
  font-size: 15px;
}
input:focus { outline: none; border-color: var(--acento); }
.check { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 13px; }
.check input { width: auto; margin: 0; }
.nota { font-size: 11px; color: var(--tenue); margin: -4px 0 14px; }
.error { color: var(--err); font-size: 13px; margin: 10px 0 0; }

button { font: inherit; cursor: pointer; border: none; border-radius: 8px; }
.primario { width: 100%; padding: 12px; background: var(--acento); color: #fff; font-weight: 600; }
.primario:hover { background: var(--acento2); }

/* --------------------------------------------------------------- telefono */
.activar-audio {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px;
  background: rgba(245, 158, 11, .12);
  border: 1px solid var(--warn);
  color: var(--warn);
  font-size: 13px;
}
.activar-audio:hover { background: rgba(245, 158, 11, .2); }

.pantalla { display: flex; gap: 6px; margin-bottom: 12px; }
.pantalla input { margin: 0; font-size: 22px; text-align: center; letter-spacing: 1px; }
.icono { padding: 0 14px; background: var(--sup2); color: var(--txt); font-size: 18px; }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.teclado button {
  padding: 12px 0 8px;
  background: var(--sup2);
  color: var(--txt);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
}
.teclado button small { display: block; font-size: 9px; letter-spacing: 2px; color: var(--tenue); min-height: 11px; }
.teclado button:hover { background: #2e3440; }
.teclado button:active { background: var(--acento); }

.principal button { width: 100%; padding: 13px; font-weight: 600; font-size: 16px; color: #fff; }
.llamar { background: var(--ok); }
.colgar { background: var(--err); }
.llamar:hover, .colgar:hover { filter: brightness(1.1); }

/* ------------------------------------------------------------ en llamada */
.en-llamada { text-align: center; margin-bottom: 12px; }
.llamada-numero { font-size: 22px; font-weight: 600; word-break: break-all; }
.llamada-estado { font-size: 13px; color: var(--tenue); margin-top: 2px; }
.llamada-tiempo { font-size: 14px; color: var(--acento); margin-top: 4px; font-variant-numeric: tabular-nums; }

.acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.acciones button { padding: 10px 4px; background: var(--sup2); color: var(--txt); font-size: 12px; }
.acciones button.activo { background: var(--acento); color: #fff; }

.fila-transfer { display: flex; gap: 6px; margin-bottom: 12px; }
.fila-transfer input { margin: 0; }
.fila-transfer button { padding: 0 14px; background: var(--acento); color: #fff; }

/* --------------------------------------------------------------- historial */
.historial { margin-top: 14px; font-size: 13px; }
.historial summary { cursor: pointer; color: var(--tenue); }
.historial ul { list-style: none; padding: 0; margin: 8px 0 0; max-height: 180px; overflow: auto; }
.historial li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--borde);
}
.hist-num { background: none; color: var(--txt); padding: 0; font-size: 13px; text-align: left; }
.hist-num:hover { color: var(--acento); }
.hist-meta { color: var(--tenue); font-size: 11px; white-space: nowrap; }
.hist-meta.perdida { color: var(--err); }
.vacio { color: var(--tenue); }

.pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--tenue);
}
.enlace { background: none; color: var(--tenue); text-decoration: underline; padding: 0; font-size: 12px; }
.enlace:hover { color: var(--acento); }

/* -------------------------------------------------------- llamada entrante */
.entrante {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.entrante-caja {
  background: var(--sup);
  border: 1px solid var(--acento);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, .45); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 90, 31, 0); }
}
.entrante-titulo { color: var(--tenue); font-size: 13px; }
.entrante-numero { font-size: 26px; font-weight: 600; margin: 8px 0 18px; word-break: break-all; }
.entrante-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.entrante-botones button { padding: 12px; color: #fff; font-weight: 600; }

/* ------------------------------------------------------------------ aviso */
.aviso {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sup2);
  border: 1px solid var(--borde);
  color: var(--txt);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  max-width: 90%;
}