:root {
  --fondo: #000000;
  --pantalla-txt: #ffffff;
  --tecla-num: #333333;
  --tecla-num-hover: #4d4d4d;
  --tecla-fn: #a5a5a5;
  --tecla-fn-txt: #000000;
  --tecla-op: #ff9f0a;
  --tecla-op-txt: #ffffff;
  --burbuja-propia: #0a84ff;
  --burbuja-otro: #262628;
  --acento: #0a84ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden;
  user-select: none;
}

.vista { display: none; }
.vista.activa { display: flex; }

/* ============ CALCULADORA ============ */
#vista-calculadora {
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  padding: 0 12px 24px;
}

.pantalla-calc {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px 12px;
  min-height: 30vh;
}

.calc-historial {
  font-size: 28px;
  color: #8e8e93;
  min-height: 34px;
}

.calc-actual {
  font-size: 72px;
  font-weight: 300;
  color: var(--pantalla-txt);
  line-height: 1;
}

.teclado-calc {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.tecla {
  border: none;
  border-radius: 50%;
  aspect-ratio: 1;
  font-size: 32px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tecla-num { background: var(--tecla-num); color: #fff; }
.tecla-num:active { background: var(--tecla-num-hover); }
.tecla-fn { background: var(--tecla-fn); color: var(--tecla-fn-txt); }
.tecla-op { background: var(--tecla-op); color: var(--tecla-op-txt); font-size: 38px; }
.tecla-igual { background: var(--tecla-op); color: var(--tecla-op-txt); font-size: 38px; }

.tecla-cero {
  grid-column: span 2;
  border-radius: 40px;
  justify-content: flex-start;
  padding-left: 32px;
  aspect-ratio: auto;
}

/* ============ DESBLOQUEO ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,0.94);
  align-items: center;
  justify-content: center;
}

.tarjeta-auth {
  width: 86%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.tarjeta-auth h2 { font-size: 18px; font-weight: 500; margin: 0 0 8px; color: #eaeaea; }

.campo-auth {
  background: #1c1c1e;
  border: 1px solid #3a3a3c;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  color: #fff;
  text-align: center;
}

.btn-auth {
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.btn-auth-secundario { background: #2c2c2e; }

.auth-error { color: #ff453a; font-size: 13px; min-height: 16px; margin: 0; }

/* ============ CHAT (paleta estilo Telegram, tema oscuro) ============ */
:root {
  --tg-fondo: #0e1621;
  --tg-header: #17212b;
  --tg-lista-hover: #1c2733;
  --tg-borde: #101921;
  --tg-burbuja-propia: #2b5278;
  --tg-burbuja-otro: #182533;
  --tg-acento: #4ea4f5;
  --tg-texto-sec: #6c7883;
}

#vista-chat { flex-direction: column; background: var(--tg-fondo); position: relative; }

.chat-header, .conv-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--tg-header);
  padding-top: max(12px, env(safe-area-inset-top));
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
  z-index: 2;
}

.chat-header-titulo, .conv-titulo { font-size: 18px; font-weight: 600; color: #fff; }
.chat-header-spacer { flex: 1; }
.chat-header .chat-header-titulo { flex: 1; }

.btn-icono {
  background: none;
  border: none;
  color: #c1c9d1;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}

.buscador-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px;
  background: var(--tg-lista-hover);
  border-radius: 20px;
  padding: 8px 14px;
}
.buscador-icono { font-size: 14px; opacity: 0.6; }
.buscador-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 15px;
}
.buscador-input::placeholder { color: var(--tg-texto-sec); }

.lista-conversaciones { flex: 1; overflow-y: auto; }

.item-conversacion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
}
.item-conversacion:active { background: var(--tg-lista-hover); }

.item-avatar {
  width: 50px; height: 50px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.item-linea-superior { display: flex; justify-content: space-between; align-items: baseline; }
.item-nombre { font-size: 16px; font-weight: 500; color: #fff; }
.item-hora { font-size: 12.5px; color: var(--tg-texto-sec); flex-shrink: 0; }
.item-preview { font-size: 14px; color: var(--tg-texto-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fab {
  position: absolute;
  right: 18px;
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--tg-acento);
  color: #fff;
  border: none;
  font-size: 24px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  cursor: pointer;
  z-index: 3;
}

.vista-conversacion {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--tg-fondo);
  display: flex;
  flex-direction: column;
}
.oculto { display: none !important; }

.conv-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.conv-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-image: radial-gradient(circle at 25% 15%, rgba(255,255,255,0.02) 0, transparent 40%);
}

.burbuja {
  max-width: 78%;
  padding: 8px 12px 6px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.35;
  word-wrap: break-word;
  color: #fff;
  position: relative;
}

.burbuja-propia { align-self: flex-end; background: var(--tg-burbuja-propia); border-bottom-right-radius: 4px; }
.burbuja-otro { align-self: flex-start; background: var(--tg-burbuja-otro); border-bottom-left-radius: 4px; }

.burbuja-hora {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}

.palomitas { display: inline-flex; line-height: 1; }
.palomitas svg { display: block; }
.palomita-leido { color: #7fd0ff; }
.palomita-pendiente { color: rgba(255,255,255,0.55); }

.conv-entrada {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--tg-header);
}

.conv-entrada input {
  flex: 1;
  background: var(--tg-fondo);
  border: none;
  border-radius: 20px;
  padding: 11px 16px;
  color: #fff;
  font-size: 15px;
  outline: none;
}
.conv-entrada input::placeholder { color: var(--tg-texto-sec); }

.btn-enviar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tg-acento);
  color: #fff;
  border: none;
  font-size: 17px;
  flex-shrink: 0;
  cursor: pointer;
}

/* ============ MODAL AGREGAR CONTACTO ============ */
.modal {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}

.modal-contenido {
  width: 86%; max-width: 320px;
  background: #1c1c1e;
  border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 10px;
}

.modal-contenido h3 { margin: 0 0 6px; font-size: 16px; text-align: center; }

.modal-botones { display: flex; gap: 10px; margin-top: 6px; }
.modal-botones .btn-auth { flex: 1; }