/* ============================================================================
   DiariaPro 2.0 — keypad.css  ·  Teclado virtual (solo responsive)
   Autónomo: usa las variables de tema de la app cuando existen y, si no
   (ej. login.php con otra paleta), cae a colores claros tipo iOS.
   ============================================================================ */
.dp-kp{position:fixed;left:0;right:0;bottom:0;z-index:3000;background:var(--bg-2,var(--surface,#F2F2F7));
  border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -12px 44px -14px rgba(0,0,0,.5);
  padding:10px 10px;padding-bottom:calc(12px + env(safe-area-inset-bottom));
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  transform:translateY(118%);transition:transform .24s cubic-bezier(.33,1.08,.5,1);will-change:transform}
.dp-kp::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:40px;height:5px;border-radius:3px;background:var(--separator,#d8d8de)}
.dp-kp.open{transform:translateY(0)}
.dp-kp-head{display:flex;align-items:center;justify-content:space-between;padding:8px 6px 9px}
.dp-kp-title{font-weight:800;font-size:13px;color:var(--text-2,#8a8a8f)}
.dp-kp-done{border:0;background:none;color:var(--accent,#4F46E5);font-weight:800;font-size:15px;cursor:pointer;padding:4px 8px;font-family:inherit}
.dp-kp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.dp-kp-key{height:54px;border:0;border-radius:13px;background:var(--surface-2,#fff);box-shadow:0 1px 2px rgba(0,0,0,.18);
  font-size:25px;font-weight:600;color:var(--text,#1c1c1e);cursor:pointer;transition:transform .07s,background .07s;
  display:grid;place-items:center;font-family:inherit;-webkit-tap-highlight-color:transparent;user-select:none}
.dp-kp-key:active{background:var(--fill,var(--accent-soft,#ececf1));transform:scale(.95)}
.dp-kp-key.fn{background:transparent;box-shadow:none;color:var(--text-2,#8a8a8f);font-size:21px}
.dp-kp-add{width:100%;margin-top:9px;height:50px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--accent,#4F46E5),var(--accent-2,var(--accent,#4F46E5)));color:#fff;font-weight:800;font-size:15px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;-webkit-tap-highlight-color:transparent}
.dp-kp-add:active{filter:brightness(.94)}
.dp-kbt{display:flex;flex-direction:column;gap:7px}
.dp-kbt-row{display:flex;gap:5px;justify-content:center}
.dp-kbt-k{flex:1 1 0;min-width:0;height:46px;border:0;border-radius:9px;background:var(--surface-2,#fff);box-shadow:0 1px 2px rgba(0,0,0,.18);
  font-size:18px;font-weight:700;color:var(--text,#1c1c1e);cursor:pointer;transition:transform .07s,background .07s;
  display:grid;place-items:center;font-family:inherit;-webkit-tap-highlight-color:transparent;user-select:none;padding:0}
.dp-kbt-k:active{background:var(--fill,var(--accent-soft,#ececf1));transform:scale(.94)}
.dp-kbt-k.fn{background:var(--fill,#ececf1);box-shadow:none;color:var(--text-2,#8a8a8f);flex:1.5 1 0;font-size:17px}
.dp-kbt-k.shift.on{background:var(--accent-soft,rgba(79,70,229,.14));color:var(--accent,#4F46E5)}
.dp-kbt-k.space{flex:5 1 0;font-size:13px;font-weight:700;color:var(--text-2,#8a8a8f)}
.dp-kbt-k.done{flex:2 1 0;background:linear-gradient(135deg,var(--accent,#4F46E5),var(--accent-2,var(--accent,#4F46E5)));color:#fff;box-shadow:none;font-size:14px}
@media(min-width:901px){.dp-kp{display:none !important}}