@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css");

/* ========================================================
   RESET / BASE
   ========================================================= */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ font-size:16px; }

body{
  font-family:"Poppins", sans-serif;
  color:#2a2a2a;
  min-height:100vh;
  background:#eef2f7;
}

/* =========================================================
   TOKENS (ÚNICOS)
   ========================================================= */
:root{
  /* Radios */
  --r-xs: 12px;
  --r-sm: 14px;
  --r-md: 16px;
  --r-lg: 18px;
  --r-xl: 22px;

  /* Botón 3D negro */
  --btn-top: #2b2f38;
  --btn-mid: #141821;
  --btn-bot: #07090d;
  --btn-border: rgba(255,255,255,0.12);
  --btn-icon: #f2f5ff;

  --btn-shadow:
    0 28px 44px rgba(0,0,0,0.38),
    0 12px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -16px 26px rgba(0,0,0,0.70);

  --btn-shadow-hover:
    0 32px 50px rgba(0,0,0,0.42),
    0 14px 20px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.24),
    inset 0 -16px 26px rgba(0,0,0,0.72);

  --btn-shadow-active:
    0 18px 30px rgba(0,0,0,0.38),
    0 8px 14px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -20px 30px rgba(0,0,0,0.78);

  /* Watermark */
  --wm-size: 140px;
  --wm-color: rgba(15, 18, 24, 0.18);

  /* Cards */
  --card-bg: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(245,248,252,0.86) 100%);
  --card-border: 1px solid rgba(20, 24, 30, 0.08);
  --card-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

/* =========================================================
   BOTONES 3D (ÚNICOS)
   - Flotantes + back (rx)
   ========================================================= */
.botones-flotantes{
  position:fixed !important;
  right:18px !important;
  bottom:18px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  z-index:999 !important;
}

/* Base 3D (FAB + back) */
.botones-flotantes button,
.botones-flotantes a,
.rx-back{
  position:relative !important;
  width:58px !important;
  height:58px !important;
  border-radius:var(--r-lg) !important;

  display:grid !important;
  place-items:center !important;

  border:1px solid var(--btn-border) !important;
  background:linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 48%, var(--btn-bot) 100%) !important;

  box-shadow:var(--btn-shadow) !important;
  cursor:pointer !important;
  text-decoration:none !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;

  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}

/* Gloss */
.botones-flotantes button::after,
.botones-flotantes a::after,
.rx-back::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%) !important;
  opacity:.95 !important;
}

/* Bisel interior */
.botones-flotantes button::before,
.botones-flotantes a::before,
.rx-back::before{
  content:"" !important;
  position:absolute !important;
  inset:8px !important;
  border-radius:var(--r-sm) !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45) !important;
  opacity:.72 !important;
}

.botones-flotantes button:hover,
.botones-flotantes a:hover,
.rx-back:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.03) contrast(1.03) !important;
  box-shadow:var(--btn-shadow-hover) !important;
}

.botones-flotantes button:active,
.botones-flotantes a:active,
.rx-back:active{
  transform:translateY(1px) !important;
  filter:brightness(0.985) !important;
  box-shadow:var(--btn-shadow-active) !important;
}

.botones-flotantes i,
.rx-back i{
  font-size:20px !important;
  color:var(--btn-icon) !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.40) !important;
  position:relative !important;
  z-index:1 !important;
}

/* Back (siempre esquina superior izquierda) */
.rx-back{
  position:fixed !important;
  left:14px !important;
  top:14px !important;
  z-index:1000 !important;
}

/* Fix tap highlight + focus (general) */
button, a{ -webkit-tap-highlight-color:transparent; }
button:focus, button:focus-visible,
a:focus, a:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}

@media (max-width:480px){
  .botones-flotantes{
    right:12px !important;
    bottom:12px !important;
  }
  .botones-flotantes button,
  .botones-flotantes a,
  .rx-back{
    width:56px !important;
    height:56px !important;
    border-radius:var(--r-lg) !important;
  }
}

/* =========================================================
   ALERT MANAGER (ÚNICO)
   ========================================================= */
.alert-container{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.alert-box{
  width:min(360px, 92vw);
  border-radius:var(--r-lg);
  padding:18px 18px 16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(245,248,252,0.92) 100%);
  box-shadow:0 20px 50px rgba(0,0,0,0.22);
  border:1px solid rgba(20,24,30,0.08);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.alert-icon-fa{
  width:72px;
  height:72px;
  border-radius:var(--r-lg);
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #2f3440 0%, #0f1218 100%);
  box-shadow:
    0 16px 26px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 16px rgba(0,0,0,0.35);
}

.alert-icon-fa i{
  font-size:28px;
  color:#f3f6fb;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);
}

.alert-message{
  font-size:16px;
  text-align:center;
  color:#1a1e27;
  font-weight:600;
  line-height:1.25;
  word-break:break-word;
  padding:0 6px;
}

.alert-buttons{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:6px;
}

.alert-btn{
  width:54px;
  height:54px;
  border:0;
  border-radius:var(--r-md);
  cursor:pointer;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #2f3440 0%, #0f1218 100%);
  box-shadow:
    0 16px 24px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 16px rgba(0,0,0,0.35);
  transition:transform .14s ease;
}
.alert-btn:hover{ transform:translateY(-1px); }
.alert-btn:active{ transform:translateY(1px); }
.alert-btn i{ color:#f3f6fb; font-size:18px; }

/* Variantes por tipo */
.alert-box.alert--error .alert-icon-fa { background:linear-gradient(180deg, #3a1d22 0%, #160b0e 100%); }
.alert-box.alert--warn  .alert-icon-fa { background:linear-gradient(180deg, #3a2f16 0%, #141006 100%); }
.alert-box.alert--ok    .alert-icon-fa { background:linear-gradient(180deg, #15341f 0%, #07140c 100%); }
.alert-box.alert--email .alert-icon-fa { background:linear-gradient(180deg, #1b2f3f 0%, #0a1117 100%); }
.alert-box.alert--pdf   .alert-icon-fa { background:linear-gradient(180deg, #2b1a33 0%, #100813 100%); }

/* =========================================================
   FONDO / ESTRUCTURA RX (ÚNICO)
   ========================================================= */
body.rx-dark{
  background:
    radial-gradient(1200px 600px at 30% 0%, #e8eef7 0%, transparent 55%),
    radial-gradient(900px 520px at 90% 10%, #e2e9f4 0%, transparent 58%),
    linear-gradient(180deg, #dfe6f1 0%, #edf2f7 55%, #f4f7fb 100%);
  color:#12151d;
}

/* En mobile, que el back no tape el header */
.rx-header{ padding:26px 14px 18px; }
@media (max-width:640px){
  .rx-header{ padding-top:92px; }
}

.rx-header-inner{
  max-width:980px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  overflow:visible;
}

.rx-title{
  position:relative;
  width:100%;
  max-width:820px;
  padding:22px 18px 18px;
  border-radius:var(--r-xl);
  background:linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(245,248,252,0.82) 100%);
  box-shadow:0 18px 45px rgba(0,0,0,0.12);
  border:1px solid rgba(20,24,30,0.08);
  text-align:center;
  overflow:visible;
  isolation:isolate;
}

/* Watermark por <i class="rx-title-watermark"> */
.rx-title .rx-watermark,
.rx-title .rx-title-watermark{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -56%) !important;
  font-size:var(--wm-size) !important;
  color:var(--wm-color) !important;
  pointer-events:none !important;
  z-index:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  filter:blur(.15px) !important;
}

.rx-title h1,
.rx-title .rx-subtitle{
  position:relative;
  z-index:1;
}

.rx-title h1{
  font-size:clamp(34px, 5.5vw, 46px);
  font-weight:800;
  letter-spacing:-0.6px;
  color:#151a22;
  margin-bottom:6px;
}

.rx-subtitle{
  font-size:18px;
  font-weight:600;
  color:rgba(21,26,34,0.70);
}

/* Layout */
.rx-shell{
  max-width:980px;
  margin:0 auto;
  padding:14px 14px 96px;
}

.rx-card{
  background:var(--card-bg);
  border:var(--card-border);
  border-radius:var(--r-xl);
  box-shadow:var(--card-shadow);
  padding:18px;
}

.rx-divider{
  grid-column:1 / -1;
  height:1px;
  background:rgba(20,24,30,0.10);
  margin:6px 0 8px;
  border-radius:999px;
}

/* =========================================================
   FORMULARIOS (ÚNICO SISTEMA)
   ========================================================= */
#form-receta,
#form-indicaciones,
#form-registro,
body.em-page #form-estudios,
body.em-page #form-cargar-estudio,
body.enf-page #form-enfermeria,
body.turnos-page #form-turnos,
body.cd-page #form-consulta,
body.hcr-page #form-resumen,
body.hc-page #form-historia{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:12px 16px;
  align-items:center;
}

#form-receta label,
#form-indicaciones label,
#form-registro label,
body.em-page #form-estudios label,
body.em-page #form-cargar-estudio label,
body.enf-page #form-enfermeria label,
body.turnos-page #form-turnos label,
body.cd-page #form-consulta label,
body.hcr-page #form-resumen label,
body.hc-page #form-historia label{
  font-size:18px;
  font-weight:800;
  color:rgba(21,26,34,0.78);
}

#form-receta input, #form-receta textarea,
#form-indicaciones input, #form-indicaciones textarea,
#form-registro input,
body.em-page #form-estudios input, body.em-page #form-estudios select,
body.em-page #form-cargar-estudio input, body.em-page #form-cargar-estudio select,
body.enf-page #form-enfermeria input, body.enf-page #form-enfermeria select, body.enf-page #form-enfermeria textarea,
body.turnos-page #form-turnos input, body.turnos-page #form-turnos textarea,
body.cd-page #form-consulta input, body.cd-page #form-consulta textarea,
body.hcr-page #form-resumen input, body.hcr-page #form-resumen select, body.hcr-page #form-resumen textarea,
body.hc-page #form-historia input, body.hc-page #form-historia select, body.hc-page #form-historia textarea{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);
  padding:12px 14px;
  font-size:16px;
  color:#12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

#form-receta textarea,
#form-indicaciones textarea,
body.enf-page #form-enfermeria textarea,
body.turnos-page #form-turnos textarea,
body.cd-page #form-consulta textarea,
body.hcr-page #form-resumen textarea,
body.hc-page #form-historia textarea{
  min-height:120px;
  resize:vertical;
}

#form-receta input:focus, #form-receta textarea:focus,
#form-indicaciones input:focus, #form-indicaciones textarea:focus,
#form-registro input:focus,
body.em-page #form-estudios input:focus, body.em-page #form-estudios select:focus,
body.em-page #form-cargar-estudio input:focus, body.em-page #form-cargar-estudio select:focus,
body.enf-page #form-enfermeria input:focus, body.enf-page #form-enfermeria select:focus, body.enf-page #form-enfermeria textarea:focus,
body.turnos-page #form-turnos input:focus, body.turnos-page #form-turnos textarea:focus,
body.cd-page #form-consulta input:focus, body.cd-page #form-consulta textarea:focus,
body.hcr-page #form-resumen input:focus, body.hcr-page #form-resumen select:focus, body.hcr-page #form-resumen textarea:focus,
body.hc-page #form-historia input:focus, body.hc-page #form-historia select:focus, body.hc-page #form-historia textarea:focus{
  border-color:rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform:translateY(-1px);
}

@media (max-width:860px){
  #form-receta,
  #form-indicaciones,
  #form-registro,
  body.em-page #form-estudios,
  body.em-page #form-cargar-estudio,
  body.enf-page #form-enfermeria,
  body.turnos-page #form-turnos,
  body.cd-page #form-consulta,
  body.hcr-page #form-resumen,
  body.hc-page #form-historia{
    grid-template-columns:1fr;
  }
  #form-receta label,
  #form-indicaciones label,
  #form-registro label,
  body.em-page #form-estudios label,
  body.em-page #form-cargar-estudio label,
  body.enf-page #form-enfermeria label,
  body.turnos-page #form-turnos label,
  body.cd-page #form-consulta label,
  body.hcr-page #form-resumen label,
  body.hc-page #form-historia label{
    margin-top:6px;
  }
}

/* =========================================================
   RX-BTN (GLOBAL)
   ========================================================= */
body.cd-page form[action="/public/login"] button[type="submit"],
.rx-btn{
  width:100%;
  height:58px;
  border-radius:var(--r-lg);
  border:1px solid var(--btn-border);
  background:linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 48%, var(--btn-bot) 100%);
  box-shadow:var(--btn-shadow);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  font-size:16px;
  color:var(--btn-icon);
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
  position:relative;
}

body.cd-page form[action="/public/login"] button[type="submit"]::after,
.rx-btn::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 42%);
  opacity:.95;
}

body.cd-page form[action="/public/login"] button[type="submit"]::before,
.rx-btn::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:var(--r-sm);
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45);
  opacity:.72;
}

body.cd-page form[action="/public/login"] button[type="submit"]:hover,
.rx-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03) contrast(1.03);
  box-shadow:var(--btn-shadow-hover);
}

body.cd-page form[action="/public/login"] button[type="submit"]:active,
.rx-btn:active{
  transform:translateY(1px);
  filter:brightness(0.985);
  box-shadow:var(--btn-shadow-active);
}

body.cd-page form[action="/public/login"] button[type="submit"] i,
.rx-btn i{
  font-size:18px;
  color:var(--btn-icon);
  text-shadow:0 1px 0 rgba(0,0,0,0.40);
  position:relative;
  z-index:1;
}

/* =========================================================
   ESTUDIOS (EM-PAGE) — UI ACTUAL
   ========================================================= */
body.em-page #estado{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);
  padding:12px 14px;
  font-size:16px;
  color:#12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
body.em-page #estado:focus{
  border-color:rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform:translateY(-1px);
}

body.em-page .em-mensaje{
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.10);
  background:rgba(255,255,255,0.70);
  padding:12px 14px;
  color:rgba(18,21,29,.86);
  font-weight:700;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

body.em-page #inbox-list{
  display:grid;
  gap:12px;
}

/* Toolbar bandeja */
body.em-page .em-toolbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  margin-bottom:14px;
  flex-wrap:wrap;
}

body.em-page .em-toolbar-left{
  min-width:220px;
  flex:1 1 240px;
}

body.em-page .em-toolbar-actions{
  display:flex;
  gap:12px;
  flex:1 1 320px;
  justify-content:flex-end;
  flex-wrap:nowrap;
  align-items:stretch;
}

body.em-page .em-toolbar-actions .rx-btn{
  height:54px !important;
  font-size:14px;
  padding:0 14px;
  width:auto !important;
  min-width:0 !important;
  flex:1 1 0;
  white-space:nowrap;
  color:var(--btn-icon) !important;
}
body.em-page .em-toolbar-actions .rx-btn i{
  color:var(--btn-icon) !important;
}

@media (max-width:420px){
  body.em-page .em-toolbar-actions{ gap:10px; }
  body.em-page .em-toolbar-actions .rx-btn{
    height:52px !important;
    font-size:13px;
    padding:0 12px;
  }
}

/* Cargar estudio */
body.em-page #form-cargar-estudio .em-span{ grid-column:1 / -1; }

body.em-page #archivo_nombre{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);
  padding:0 14px;
  font-size:15px;
  color:#12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline:none;

  height:52px;
  min-height:52px;
  max-height:52px;
  line-height:52px;

  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  cursor:pointer;
}

body.em-page #archivo_nombre:focus{
  border-color:rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform:translateY(-1px);
}

body.em-page .em-btn-row{
  grid-column:1 / -1 !important;
  display:flex !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  align-items:stretch !important;
  margin-top:12px !important;
  max-width:720px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

body.em-page .em-btn-row .rx-btn{
  flex:1 1 0 !important;
  width:auto !important;
  min-width:0 !important;
  height:52px !important;
  padding:0 14px !important;
  font-size:15px !important;
  line-height:1 !important;
  justify-content:center !important;
  color:var(--btn-icon) !important;
}
body.em-page .em-btn-row .rx-btn i{ color:var(--btn-icon) !important; }

@media (max-width:420px){
  body.em-page .em-btn-row .rx-btn{ height:50px !important; }
}

body.em-page label.rx-btn{ cursor:pointer; user-select:none; }

body.em-page .em-file-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Resultado: link Abrir PDF como botón 3D */
body.em-page #resultado a{
  height:52px !important;
  padding:0 16px !important;
  border-radius:var(--r-lg) !important;
  border:1px solid var(--btn-border) !important;
  background:linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 48%, var(--btn-bot) 100%) !important;
  box-shadow:var(--btn-shadow) !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;

  font-weight:800 !important;
  font-size:15px !important;
  color:var(--btn-icon) !important;
  text-decoration:none !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;

  position:relative !important;
  margin-left:8px;
}

body.em-page #resultado a::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 42%) !important;
  opacity:.95 !important;
}

body.em-page #resultado a::before{
  content:"" !important;
  position:absolute !important;
  inset:8px !important;
  border-radius:var(--r-sm) !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45) !important;
  opacity:.72 !important;
}

body.em-page #resultado a:hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.03) contrast(1.03) !important;
  box-shadow:var(--btn-shadow-hover) !important;
}

body.em-page #resultado a:active{
  transform:translateY(1px) !important;
  filter:brightness(0.985) !important;
  box-shadow:var(--btn-shadow-active) !important;
}

/* Inbox: cards + inputs + adjuntos */
body.em-page #inbox-list > div{
  background:rgba(255,255,255,0.72) !important;
  border:1px solid rgba(20,24,30,0.10) !important;
  border-radius:var(--r-xl) !important;
  padding:14px !important;
  margin-bottom:0 !important;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

body.em-page #inbox-list > div > div{ align-items:flex-start !important; }
body.em-page #inbox-list > div > div div{ color:rgba(18,21,29,.90); }

body.em-page #inbox-list > div > div div[style*="font-size:13px"],
body.em-page #inbox-list > div > div div[style*="font-size: 13px"]{
  color:rgba(18,21,29,.78) !important;
}

body.em-page #inbox-list input[type="text"]{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);
  padding:12px 14px;
  font-size:16px;
  color:#12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline:none;
  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

body.em-page #inbox-list input[type="text"]:focus{
  border-color:rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform:translateY(-1px);
}

body.em-page #inbox-list > div > div > div:last-child{
  align-items:flex-end !important;
  justify-content:flex-end !important;
  flex-wrap:wrap;
}

body.em-page #inbox-list ul{
  margin-top:12px !important;
  padding:10px 12px !important;
  border-radius:var(--r-lg) !important;
  background:rgba(255,255,255,0.58) !important;
  border:1px solid rgba(20,24,30,0.08) !important;
  box-shadow:0 10px 18px rgba(0,0,0,0.04) !important;
  list-style:none !important;
}

body.em-page #inbox-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(20,24,30,0.08);
  font-size:14px;
  color:rgba(18,21,29,.86);
}

body.em-page #inbox-list li:last-child{ border-bottom:0; }

body.em-page #inbox-list a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(20,24,30,0.12);
  background:rgba(255,255,255,0.80);
  color:rgba(18,21,29,.92);
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 10px 18px rgba(0,0,0,0.05);
  transition:transform .12s ease, filter .12s ease;
}
body.em-page #inbox-list a:hover{ transform:translateY(-1px); filter:brightness(1.02); }
body.em-page #inbox-list a:active{ transform:translateY(1px); }

@media (max-width:640px){
  body.em-page #inbox-list > div > div{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  body.em-page #inbox-list > div > div > div:last-child{
    width:100%;
    align-items:stretch !important;
  }
  body.em-page #inbox-list input[type="text"]{ min-width:100% !important; }
}

/* Acciones tipo pill (si se usan) */
body.em-page #inbox-list button.em-pill-btn{
  border:1px solid rgba(20,24,30,0.12);
  background:rgba(255,255,255,0.80);
  color:rgba(18,21,29,.92);
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  box-shadow:0 10px 18px rgba(0,0,0,0.05);
  transition:transform .12s ease, filter .12s ease;
}
body.em-page #inbox-list button.em-pill-btn:hover{ transform:translateY(-1px); filter:brightness(1.02); }
body.em-page #inbox-list button.em-pill-btn:active{ transform:translateY(1px); }
body.em-page #inbox-list button.em-pill-btn:disabled{
  opacity:.60;
  cursor:not-allowed;
  transform:none;
}

/* Estudios list (selección) */
body.em-page #estudios-list{
  display:grid;
  gap:12px;
}

body.em-page .estudio-card{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;

  background:rgba(255,255,255,0.72);
  border:1px solid rgba(20,24,30,0.10);
  border-radius:var(--r-xl);
  padding:14px;

  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);

  cursor:pointer;
  user-select:none;
}

body.em-page .estudio-card.is-selected{
  border-color:rgba(15,18,24,0.22);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.09),
    0 0 0 4px rgba(20,24,30,0.05),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

body.em-page .estudio-meta{ flex:1 1 auto; min-width:0; }
body.em-page .estudio-line{
  font-size:14px;
  color:rgba(18,21,29,.88);
  line-height:1.25;
  margin-bottom:6px;
}
body.em-page .estudio-line strong{ color:rgba(18,21,29,.92); }

body.em-page .estudio-select{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding-top:2px;
}

body.em-page input.estudio-check{
  width:22px;
  height:22px;
  accent-color:#12151d;
}

/* Modal enviar */
body.em-page .send-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  justify-content:center;
  align-items:center;
  z-index:9999;
  padding:16px;
}

body.em-page .send-box{
  width:min(420px, 94vw);
  border-radius:var(--r-xl);
  padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(245,248,252,0.92) 100%);
  box-shadow:0 20px 50px rgba(0,0,0,0.22);
  border:1px solid rgba(20,24,30,0.08);
  display:grid;
  gap:12px;
}

body.em-page .send-head{
  display:flex;
  align-items:center;
  gap:12px;
}

body.em-page .send-icon{
  width:58px;
  height:58px;
  border-radius:var(--r-lg);
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, #2f3440 0%, #0f1218 100%);
  box-shadow:
    0 16px 26px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -10px 16px rgba(0,0,0,0.35);
}

body.em-page .send-icon i{ font-size:20px; color:#f3f6fb; }

body.em-page .send-title{
  font-size:18px;
  font-weight:900;
  color:rgba(18,21,29,.92);
}

body.em-page .send-body{
  display:grid;
  gap:10px;
}

body.em-page .send-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  color:rgba(18,21,29,.88);
  padding:8px 10px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,0.70);
  border:1px solid rgba(20,24,30,0.10);
}

body.em-page .send-body label{
  font-size:14px;
  font-weight:900;
  color:rgba(21,26,34,0.78);
}

body.em-page .send-body input{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);
  padding:12px 14px;
  font-size:15px;
  color:#12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline:none;
}

body.em-page .send-actions{
  display:flex;
  gap:12px;
  align-items:stretch;
}

body.em-page .send-actions .rx-btn{
  flex:1 1 0;
  height:52px !important;
  width:auto !important;
  min-width:0 !important;
}

/* =========================================================
   TURNOS — CALENDARIO / HORARIOS (ÚNICA VERSIÓN)
   - FULL rojo NO clickeable
   - Selección borde negro inmediato + persistente
   ========================================================= */
.turnos-cal{
  margin-top:8px;
  border-radius:18px;
  padding:12px;
  background:rgba(0,0,0,0.10);
  border:1px solid rgba(0,0,0,0.12);
}

.turnos-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.turnos-cal-title{
  font-weight:900;
  font-size:16px;
  color:rgba(21,26,34,0.88);
  text-align:center;
  flex:1;
}

.turnos-cal-nav{
  width:42px;
  height:42px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  background:linear-gradient(180deg, rgba(20,24,30,0.95), rgba(10,12,16,0.95));
  color:#fff;
  box-shadow:
    0 10px 22px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
}

.turnos-cal-wd{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
  margin-bottom:6px;
  opacity:.95;
}

.turnos-cal-wdcell{
  text-align:center;
  font-weight:900;
  font-size:12px;
  color:rgba(21,26,34,0.78);
}

.turnos-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}

.turnos-cal-empty{ height:40px; }

.turnos-day{
  height:40px;
  border-radius:14px;

  border:1px solid rgba(0,0,0,0.20);
  background:rgba(255,255,255,0.92);
  color:rgba(17,24,39,0.92);

  font-weight:900;
  cursor:pointer;

  box-shadow:0 10px 20px rgba(0,0,0,0.14);
  -webkit-tap-highlight-color:transparent;
}

/* feedback inmediato al tocar */
.turnos-day:active{
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.85),
    0 10px 20px rgba(0,0,0,0.14);
  transform:translateY(-1px);
}

/* selección persistente */
.turnos-day.is-selected{
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.85),
    0 10px 20px rgba(0,0,0,0.14);
  transform:translateY(-1px);
}

.turnos-day.is-past{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none; /* no clickeable */
}

/* FULL rojo + NO clickeable */
.turnos-day.is-full{
  background:rgba(220, 38, 38, 0.22);
  border-color:rgba(220, 38, 38, 0.45);
  color:rgba(120, 10, 10, 0.95);
  cursor:not-allowed;
  pointer-events:none; /* no clickeable */
  box-shadow:0 10px 20px rgba(0,0,0,0.10);
}

/* Si tu JS usa disabled, también queda NO clickeable */
.turnos-day:disabled{
  opacity:0.55;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

.turnos-cal-msg{
  margin-top:10px;
  opacity:.90;
  font-weight:800;
  font-size:13px;
  color:rgba(21,26,34,0.78);
}

.turnos-horas{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:8px;
}

@media (max-width:420px){
  .turnos-horas{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}

.turnos-horas-msg{
  grid-column:1 / -1;
  opacity:.90;
  font-weight:800;
  font-size:13px;
  color:rgba(21,26,34,0.78);
}

.turnos-hora-btn{
  height:40px;
  border-radius:14px;

  border:1px solid rgba(0,0,0,0.20);
  background:rgba(255,255,255,0.92);
  color:rgba(17,24,39,0.92);

  font-weight:900;
  cursor:pointer;

  box-shadow:0 10px 20px rgba(0,0,0,0.12);
  -webkit-tap-highlight-color:transparent;
}

/* feedback inmediato al tocar */
.turnos-hora-btn:active{
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.85),
    0 10px 20px rgba(0,0,0,0.12);
  transform:translateY(-1px);
}

/* selección persistente */
.turnos-hora-btn.is-selected{
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.85),
    0 10px 20px rgba(0,0,0,0.12);
  transform:translateY(-1px);
}

.turnos-hora-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
  pointer-events:none;
  box-shadow:none;
}

/* Hint debajo del DNI */
.rx-hint{
  margin-top:6px;
  font-size:13px;
  font-weight:800;
  opacity:0.75;
}

/* =========================================================
   PRINT
   ========================================================= */
@media print{
  body{ background:#fff !important; color:#000 !important; }
  .botones-flotantes, .rx-back, .alert-container{ display:none !important; }
  .rx-watermark, .rx-title-watermark{ color:rgba(0,0,0,0.10) !important; }
  .rx-card, .rx-title{ box-shadow:none !important; background:#fff !important; }

  #form-receta input, #form-receta textarea,
  #form-indicaciones input, #form-indicaciones textarea,
  #form-registro input,
  body.em-page #form-estudios input, body.em-page #form-estudios select,
  body.em-page #form-cargar-estudio input, body.em-page #form-cargar-estudio select,
  body.enf-page #form-enfermeria input, body.enf-page #form-enfermeria select, body.enf-page #form-enfermeria textarea,
  body.turnos-page #form-turnos input, body.turnos-page #form-turnos textarea,
  body.cd-page #form-consulta input, body.cd-page #form-consulta textarea,
  body.hcr-page #form-resumen input, body.hcr-page #form-resumen select, body.hcr-page #form-resumen textarea,
  body.hc-page #form-historia input, body.hc-page #form-historia select, body.hc-page #form-historia textarea{
    box-shadow:none !important;
    background:#fff !important;
  }
}

/* =======================================================
   Estudios Inbox: tarjetas compactas + botón Archivar
   Pegar al FINAL de static/style.css
   ======================================================= */

.em-page .em-inbox-item {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

.em-page .em-inbox-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.em-page .em-inbox-left {
  min-width: 0;
  flex: 1 1 auto;
}

.em-page .em-inbox-title {
  font-weight: 800;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
}

.em-page .em-inbox-meta {
  opacity: 0.85;
  font-size: 13px;
  line-height: 1.25;
  margin-top: 4px;
  word-break: break-word;
}

.em-page .em-inbox-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.em-page .em-inbox-actions input {
  height: 38px;
  padding: 0 12px;
  border-radius: 14px;
  max-width: 160px;
}

.em-page .em-pill-btn {
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.em-page .em-pill-btn i {
  font-size: 14px;
}

.em-page .em-archive-btn {
  opacity: 0.95;
}

.em-page .em-adj-list {
  margin: 10px 0 0 0;
  padding-left: 18px;
}

.em-page .em-adj-item {
  margin: 6px 0;
  line-height: 1.25;
}

.em-page .em-adj-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  font-size: 13px;
}

.em-page .em-no-adj {
  margin-top: 10px;
  opacity: 0.85;
}

/* Mobile: acciones en 2 filas (compacto) */
@media (max-width: 520px) {
  .em-page .em-inbox-head {
    flex-direction: column;
    gap: 10px;
  }

  .em-page .em-inbox-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .em-page .em-inbox-actions input {
    flex: 1 1 160px;
    max-width: none;
  }
}

/* ==============================
   Estudios Inbox - selección + tamaño tarjeta + modal abrir adjuntos
   (Pegar al final de style.css)
   ============================== */

.em-page .em-inbox-item{
  width:100%;
  box-sizing:border-box;
  border-radius:18px;
  padding:14px 14px 12px 14px;
  margin:12px 0;
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.em-page .em-inbox-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.em-page .em-inbox-sel{
  flex:0 0 auto;
  width:34px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:2px;
}

.em-page .em-inbox-select{
  width:18px;
  height:18px;
  accent-color:#111;
}

.em-page .em-inbox-left{
  flex:1 1 auto;
  min-width:0;
}

.em-page .em-inbox-title{
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  margin-bottom:4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.em-page .em-inbox-meta{
  opacity:.85;
  font-size:13px;
  line-height:1.25;
  margin-top:2px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.em-page .em-adj-list{
  margin:10px 0 0 0;
  padding:0;
  list-style:none;
}

.em-page .em-adj-item{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  margin-top:8px;
}

.em-page .em-adj-file{ font-weight:700; }
.em-page .em-adj-sep{ opacity:.55; }
.em-page .em-adj-fecha{ opacity:.85; }
.em-page .em-adj-tipo{ font-weight:800; }

.em-page .em-no-adj{
  margin-top:10px;
  opacity:.85;
  font-size:13px;
}

.em-page .em-inbox-item.is-selected{
  box-shadow:0 16px 34px rgba(0,0,0,.18), inset 0 0 0 2px rgba(0,0,0,.22);
  transform:translateY(-1px);
}

/* Modal "Abrir adjuntos" (multi-adjunto) */
.em-open-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:9999;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  box-sizing:border-box;
}

.em-open-modal-box{
  width:min(520px, 100%);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  overflow:hidden;
}

.em-open-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.10);
}

.em-open-modal-title{
  font-weight:900;
  font-size:15px;
}

.em-open-modal-close{
  border:0;
  background:rgba(0,0,0,.06);
  border-radius:14px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.em-open-modal-body{
  padding:12px 16px 16px 16px;
}

.em-open-modal-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.em-open-modal-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.75);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
}

.em-open-modal-link:active{
  transform:translateY(1px);
}

/* =========================================================
   FIX: textarea no toma el estilo "rx-input" (legacy look)
   Pegar al FINAL de /static/style.css
   ========================================================= */

/* 1) Asegura que textarea se vea igual que input dentro del sistema RX */
.rx-dark .rx-field textarea,
.rx-dark textarea.rx-input {
  width: 100%;
  display: block;

  /* match de inputs */
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;

  padding: 12px 14px;
  border-radius: 14px;

  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.92);

  outline: none;
  box-sizing: border-box;

  /* evita look viejo */
  appearance: none;
  -webkit-appearance: none;
}

/* 2) Placeholder coherente */
.rx-dark .rx-field textarea::placeholder,
.rx-dark textarea.rx-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* 3) Focus coherente con inputs */
.rx-dark .rx-field textarea:focus,
.rx-dark textarea.rx-input:focus {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

/* 4) Comportamiento típico textarea (sin romper layouts) */
.rx-dark .rx-field textarea,
.rx-dark textarea.rx-input {
  min-height: 110px;   /* ajustá si querés más alto */
  resize: vertical;    /* o 'none' si lo querés fijo */
}

/* =========================================================
   RECEPCIÓN – TURNOS (rt-page)
   Pegar al FINAL de /static/style.css
   ========================================================= */

.rt-page .rt-wrap{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

/* Grid de tarjetas */
.rt-page .rx-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 760px){
  .rt-page .rx-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px){
  .rt-page .rx-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tarjeta mini (cola por profesional) */
.rt-page .rx-card-mini{
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  user-select: none;
}

.rt-page .rx-card-mini:active{
  transform: translateY(1px);
}

.rt-page .rx-card-mini.is-selected{
  border-color: rgba(255,255,255,0.42);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10), 0 12px 30px rgba(0,0,0,0.22);
}

/* Título + badge */
.rt-page .rx-card-title{
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.rt-page .rx-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .4px;
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
}

.rt-page .rx-badge.rx-badge-pause{
  background: rgba(255, 210, 0, 0.14);
  border-color: rgba(255, 210, 0, 0.22);
}

/* Filas (Turno actual / Próximo pendiente) */
.rt-page .rx-row{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.88);
  font-size: 14px;
}

.rt-page .rx-row:first-of-type{
  border-top: 0;
}

.rt-page .rx-row > span:first-child{
  color: rgba(255,255,255,0.62);
  font-weight: 700;
}

.rt-page .rx-muted{
  color: rgba(255,255,255,0.55);
}

/* Panel de acciones (abajo) */
.rt-page .rt-actions{
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* queda "anclado" visualmente abajo sin romper layouts */
  position: sticky;
  bottom: 12px;
  z-index: 5;
}

.rt-page .rt-actions-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.rt-page .rt-selected{
  font-size: 15px;
  color: rgba(255,255,255,0.85);
}

.rt-page .rt-selected b{
  font-weight: 900;
  color: rgba(255,255,255,0.92);
}

.rt-page .rt-btnrow{
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Botones de acción (estilo “3D” similar a floating) */
.rt-page .rt-actbtn{
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(0,0,0,0.18));
  box-shadow: 0 12px 26px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rt-page .rt-actbtn i{
  font-size: 18px;
}

.rt-page .rt-actbtn:active{
  transform: translateY(1px);
}

.rt-page .rt-actbtn:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

.rt-page .rt-hint{
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.60);
}

/* ================================
   Recepción – Turnos (rt-page)
   Ajuste de contraste / tonos
   Pegar al FINAL de /static/style.css
   ================================ */

body.rt-page .rt-wrap,
body.rt-page .rx-grid,
body.rt-page .rt-actions,
body.rt-page .rx-card-mini {
  opacity: 1 !important; /* por si quedó un opacity viejo lavando todo */
}

/* Tarjetas (colas) */
body.rt-page .rx-card-mini {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(21, 26, 34, 0.88);
}

body.rt-page .rx-card-title {
  color: rgba(21, 26, 34, 0.92);
  font-weight: 800;
}

body.rt-page .rx-row span:first-child {
  color: rgba(21, 26, 34, 0.62);
  font-weight: 700;
}

body.rt-page .rx-row span:last-child {
  color: rgba(21, 26, 34, 0.88);
  font-weight: 700;
}

body.rt-page .rx-muted {
  color: rgba(21, 26, 34, 0.55);
}

/* Badge */
body.rt-page .rx-badge {
  background: rgba(21, 26, 34, 0.10);
  border: 1px solid rgba(21, 26, 34, 0.12);
  color: rgba(21, 26, 34, 0.86);
}

body.rt-page .rx-badge.rx-badge-pause {
  background: rgba(255, 140, 0, 0.14);
  border-color: rgba(255, 140, 0, 0.22);
  color: rgba(120, 60, 0, 0.92);
}

/* Selección */
body.rt-page .rx-card-mini.is-selected {
  outline: 3px solid rgba(21, 26, 34, 0.28);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.20);
  transform: translateY(-1px);
}

/* Panel de acciones */
body.rt-page .rt-actions {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 26px;
  padding: 14px 14px 16px;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.rt-page .rt-selected {
  color: rgba(21, 26, 34, 0.86);
  font-size: 18px;
}

body.rt-page .rt-selected b {
  color: rgba(21, 26, 34, 0.95);
}

body.rt-page .rt-hint {
  margin-top: 10px;
  color: rgba(21, 26, 34, 0.70);
  font-weight: 600;
}

/* Botones de acción */
body.rt-page .rt-btnrow {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

body.rt-page .rt-actbtn {
  width: 74px;
  height: 74px;
  border-radius: 20px;
  border: 1px solid rgba(21, 26, 34, 0.14);
  background: rgba(21, 26, 34, 0.06);
  color: rgba(21, 26, 34, 0.90);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

body.rt-page .rt-actbtn:active {
  transform: translateY(1px);
}

body.rt-page .rt-actbtn:disabled {
  opacity: 0.35;
  box-shadow: none;
  cursor: not-allowed;
}

/* Mejor espaciado en mobile */
body.rt-page .rx-grid {
  gap: 14px;
}

/* ================================
   BP (Buscar Paciente) -> igualar look a Registro (RP)
   Pegar al FINAL de /static/style.css
   ================================ */

/* Label grande / pesado como Registro */
body.bp-page .rx-card label,
body.bp-page .rx-field > label {
  display: block;
  margin: 14px 0 10px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(21, 26, 34, 0.78);
  font-size: clamp(20px, 4.8vw, 28px);
  line-height: 1.1;
}

/* Input pill / ancho completo como Registro */
body.bp-page .rx-card input[type="text"],
body.bp-page .rx-card input[type="email"],
body.bp-page .rx-card input[type="date"],
body.bp-page .rx-input {
  width: 100%;
  box-sizing: border-box;

  padding: 14px 18px;
  min-height: 56px;

  border-radius: 26px;
  border: 1px solid rgba(21, 26, 34, 0.12);

  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.12);

  color: rgba(21, 26, 34, 0.88);
  font-size: 18px;
  font-weight: 600;

  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Focus como el resto de la UI */
body.bp-page .rx-card input[type="text"]:focus,
body.bp-page .rx-card input[type="email"]:focus,
body.bp-page .rx-card input[type="date"]:focus,
body.bp-page .rx-input:focus {
  border-color: rgba(21, 26, 34, 0.26);
  box-shadow: 0 20px 65px rgba(0, 0, 0, 0.14);
}

/* Espaciado del wrapper de campo */
body.bp-page .rx-field {
  margin-top: 6px;
}

/* =========================================
   Recepción Turnos (rt-page) — Botones 3D negros
   Pegar al FINAL de /static/style.css
   ========================================= */

/* Fila de botones */
body.rt-page .rt-btnrow{
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

/* Botón base (look 3D negro) */
body.rt-page .rt-actbtn{
  width: 84px;
  height: 84px;
  border-radius: 22px;

  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(52,58,70,0.96) 0%, rgba(15,17,21,0.98) 100%);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.40),          /* sombra exterior */
    inset 0 1px 0 rgba(255,255,255,0.14),  /* brillo arriba */
    inset 0 -3px 0 rgba(0,0,0,0.55);       /* borde abajo (3D) */

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: rgba(255,255,255,0.92);
  cursor: pointer;

  transition: transform 90ms ease, box-shadow 140ms ease, filter 140ms ease, opacity 140ms ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Icono (más contundente como los flotantes) */
body.rt-page .rt-actbtn i{
  font-size: 30px;
  line-height: 1;
  color: rgba(255,255,255,0.92);
}

/* Hover (desktop) */
body.rt-page .rt-actbtn:not(:disabled):hover{
  transform: translateY(-1px);
  box-shadow:
    0 22px 48px rgba(0,0,0,0.48),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -3px 0 rgba(0,0,0,0.60);
}

/* Press (efecto botón físico) */
body.rt-page .rt-actbtn:not(:disabled):active{
  transform: translateY(2px);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 1px 0 rgba(0,0,0,0.55);
}

/* Focus accesible (teclado) */
body.rt-page .rt-actbtn:focus-visible{
  outline: none;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.40),
    0 0 0 3px rgba(0,0,0,0.25),
    0 0 0 6px rgba(255,255,255,0.10),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -3px 0 rgba(0,0,0,0.55);
}

/* Disabled (se ve apagado, pero mantiene el 3D) */
body.rt-page .rt-actbtn:disabled{
  opacity: 0.38;
  filter: grayscale(1);
  cursor: not-allowed;
  transform: none;
  box-shadow:
    0 14px 32px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -3px 0 rgba(0,0,0,0.50);
}

/* =========================================================
   RECEPCIÓN – TURNOS (rt-page)
   Botones de acciones con el MISMO look que .botones-flotantes
   Pegar al FINAL de /static/style.css
   ========================================================= */

body.rt-page .rt-actions .rt-actbtn{
  position:relative !important;

  /* Tamaño (ajustable si querés) */
  width:84px !important;
  height:84px !important;

  border-radius:var(--r-xl) !important;

  display:grid !important;
  place-items:center !important;

  border:1px solid var(--btn-border) !important;
  background:linear-gradient(
    180deg,
    var(--btn-top) 0%,
    var(--btn-mid) 48%,
    var(--btn-bot) 100%
  ) !important;

  box-shadow:var(--btn-shadow) !important;

  cursor:pointer !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;

  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}

/* Gloss (igual a flotantes) */
body.rt-page .rt-actions .rt-actbtn::after{
  content:"" !important;
  position:absolute !important;
  inset:1px !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(140px 90px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%) !important;
  opacity:.95 !important;
}

/* Bisel interior (igual a flotantes) */
body.rt-page .rt-actions .rt-actbtn::before{
  content:"" !important;
  position:absolute !important;
  inset:10px !important; /* un poco más amplio por ser botón grande */
  border-radius:var(--r-sm) !important;
  pointer-events:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45) !important;
  opacity:.72 !important;
}

/* Icono igual que flotantes */
body.rt-page .rt-actions .rt-actbtn i{
  font-size:30px !important;
  color:var(--btn-icon) !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.40) !important;
  position:relative !important;
  z-index:1 !important;
}

/* Hover / Active igual que flotantes */
body.rt-page .rt-actions .rt-actbtn:not(:disabled):hover{
  transform:translateY(-2px) !important;
  filter:brightness(1.03) contrast(1.03) !important;
  box-shadow:var(--btn-shadow-hover) !important;
}

body.rt-page .rt-actions .rt-actbtn:not(:disabled):active{
  transform:translateY(1px) !important;
  filter:brightness(0.985) !important;
  box-shadow:var(--btn-shadow-active) !important;
}

/* Disabled coherente */
body.rt-page .rt-actions .rt-actbtn:disabled{
  opacity:.45 !important;
  cursor:not-allowed !important;
  transform:none !important;
  filter:grayscale(0.2) !important;
}

/* =========================================================
   FIRMA / SELLO (fs-page)
   Pegar al FINAL de /static/style.css
   ========================================================= */

body.fs-page #form-firma-sello{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Selector médico */
body.fs-page .fs-doctor{
  display:grid;
  gap:10px;
}

body.fs-page .fs-doctor-label{
  font-size:18px;
  font-weight:900;
  color:rgba(21,26,34,0.78);
}

body.fs-page .fs-doctor-select{
  width:100%;
  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);
  padding:12px 14px;
  font-size:16px;
  font-weight:800;
  color:#12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline:none;
}

body.fs-page .fs-doctor-hint{
  font-size:13px;
  font-weight:800;
  opacity:0.75;
}

/* Grupos */
body.fs-page .fs-group{
  border-radius:var(--r-xl);
  background:rgba(255,255,255,0.72);
  border:1px solid rgba(20,24,30,0.10);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  padding:14px;
  display:grid;
  gap:12px;
}

body.fs-page .fs-head{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  font-size:16px;
  color:rgba(18,21,29,.90);
}

body.fs-page .fs-actions{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap;
}

body.fs-page .fs-btn{
  width:58px;
  height:58px;
  border-radius:var(--r-lg);
  border:1px solid var(--btn-border);
  background:linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 48%, var(--btn-bot) 100%);
  box-shadow:var(--btn-shadow);
  cursor:pointer;
  display:grid;
  place-items:center;
  text-decoration:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  position:relative;
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

body.fs-page .fs-btn::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%);
  opacity:.95;
}

body.fs-page .fs-btn::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:var(--r-sm);
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45);
  opacity:.72;
}

body.fs-page .fs-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03) contrast(1.03);
  box-shadow:var(--btn-shadow-hover);
}

body.fs-page .fs-btn:active{
  transform:translateY(1px);
  filter:brightness(0.985);
  box-shadow:var(--btn-shadow-active);
}

body.fs-page .fs-btn i{
  font-size:20px;
  color:var(--btn-icon);
  text-shadow:0 1px 0 rgba(0,0,0,0.40);
  position:relative;
  z-index:1;
}

body.fs-page .fs-file-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

body.fs-page .fs-filename{
  font-size:14px;
  font-weight:800;
  opacity:.80;
  padding:10px 12px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,0.62);
  border:1px solid rgba(20,24,30,0.08);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

body.fs-page .fs-preview{
  display:flex;
  justify-content:flex-start;
  align-items:center;
}

body.fs-page .fs-img{
  max-width:280px;
  max-height:160px;
  width:auto;
  height:auto;
  border-radius:16px;
  border:1px solid rgba(20,24,30,0.10);
  background:#fff;
  box-shadow:0 14px 26px rgba(0,0,0,0.08);
}


  /* =========================================================
   RECETA MÉDICA (rm-page) — UI específica
   ========================================================= */

body.rm-page #form-receta{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

/* Encabezado interno SOLO impresión */
body.rm-page .rm-print-head{
  display:none;
  margin:0 0 10px 0;
}

body.rm-page .rm-print-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

body.rm-page .rm-print-t1{ font-weight:900; font-size:22px; }
body.rm-page .rm-print-t2{ opacity:.75; font-weight:700; margin-top:3px; }

/* Label sobrio para diagnóstico / medicamentos */
body.rm-page .rm-plain-label{
  font-size:18px;
  font-weight:900;
  color:rgba(21,26,34,0.78);
  margin-top:6px;
}

/* =========================================================
   PÍLDORA de campo (icono + texto + input dentro)
   - pantalla + impresión
   ========================================================= */

body.rm-page .rm-pill-field{
  width:100%;
  min-height:60px;
  border-radius:22px;

  display:flex;
  align-items:center;
  gap:12px;

  padding:10px 12px;

  border:1px solid rgba(255,255,255,0.12);
  background:linear-gradient(180deg, rgba(52,58,70,0.96) 0%, rgba(15,17,21,0.98) 100%);

  box-shadow:
    0 24px 40px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -14px 22px rgba(0,0,0,0.55);

  position:relative;
}

body.rm-page .rm-pill-field::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(220px 120px at 22% 18%,
      rgba(255,255,255,0.28),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.12) 0%,
      transparent 42%);
  opacity:.95;
}

body.rm-page .rm-pill-tag{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 12px;
  border-radius:18px;

  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);

  color:rgba(255,255,255,0.92);
  font-weight:900;
  letter-spacing:.2px;

  position:relative;
  z-index:1;
}

body.rm-page .rm-pill-tag i{
  font-size:18px;
  color:rgba(255,255,255,0.92);
  text-shadow:0 1px 0 rgba(0,0,0,0.40);
}

body.rm-page .rm-pill-tag span{
  font-size:15px;
}

body.rm-page .rm-pill-field input{
  flex:1 1 auto;
  min-width:0;

  height:44px;
  border:0;
  outline:none;

  background:transparent;
  color:rgba(255,255,255,0.92);
  font-size:16px;
  font-weight:700;

  padding:0 8px;
  position:relative;
  z-index:1;
}

body.rm-page .rm-pill-field input::placeholder{
  color:rgba(255,255,255,0.45);
}

body.rm-page .rm-pill-field input[readonly]{
  opacity:.92;
}

/* =========================================================
   RP pill (más presencia y “3D”)
   ========================================================= */

body.rm-page .rm-rp-row{
  display:flex;
  justify-content:flex-start;
  margin:8px 0 2px;
}

body.rm-page .rm-rp-pill{
  width:100%;
  min-height:70px;
  border-radius:24px;

  display:inline-flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;
  border:1px solid rgba(255,255,255,0.14);

  background:linear-gradient(180deg, rgba(55,62,76,0.98) 0%, rgba(10,12,16,1) 100%);
  box-shadow:
    0 30px 50px rgba(0,0,0,0.40),
    0 14px 22px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -18px 28px rgba(0,0,0,0.72);

  position:relative;
  user-select:none;
}

body.rm-page .rm-rp-pill::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(260px 140px at 22% 18%,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.10) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%);
  opacity:.95;
}

body.rm-page .rm-rp-ico{
  width:52px;
  height:52px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);

  position:relative;
  z-index:1;
}

body.rm-page .rm-rp-ico i{
  font-size:24px;
  color:rgba(255,255,255,0.92);
  text-shadow:0 1px 0 rgba(0,0,0,0.40);
}

/* RP / con más presencia (sin agrandar “negro”) */
body.rm-page .rm-rp-text{
  font-weight:900;
  color:rgba(255,255,255,0.95);
  position:relative;
  z-index:1;

  font-size:22px;          /* más grande */
  letter-spacing:1.2px;    /* más presencia */
  text-shadow:0 1px 0 rgba(0,0,0,0.45);
}

/* =========================================================
   Firma / Sello
   ========================================================= */

body.rm-page .rm-fs-wrap{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}

body.rm-page .rm-fs-box{
  flex:1 1 220px;
  min-width:220px;

  padding:12px;
  border-radius:18px;
  border:1px solid rgba(20,24,30,0.10);
  background:rgba(255,255,255,0.62);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

body.rm-page .rm-fs-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:rgba(18,21,29,.90);
  margin-bottom:10px;
}

body.rm-page .rm-fs-box img{
  width:100%;
  max-height:180px;
  object-fit:contain;
  border-radius:14px;
  border:1px solid rgba(20,24,30,0.10);
  background:rgba(255,255,255,0.70);
  box-shadow:0 12px 22px rgba(0,0,0,0.06);
  display:none; /* JS lo habilita si hay imagen */
}

body.rm-page .rm-fs-hint{
  opacity:.78;
  font-size:13px;
  font-weight:800;
}

/* =========================================================
   Textareas: aire y separación
   ========================================================= */

body.rm-page textarea{
  width:100%;
  border-radius:18px;
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);

  padding:14px 16px;
  font-size:16px;
  color:#12151d;

  min-height:140px;  /* más aire */
  resize:vertical;

  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);

  outline:none;
}

body.rm-page textarea:focus{
  border-color:rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform:translateY(-1px);
}

/* =========================================================
   PRINT
   ========================================================= */

@media print{
  body.rm-page .rm-print-head{ display:block !important; }

  body.rm-page .rx-back,
  body.rm-page .botones-flotantes,
  body.rm-page #alert-manager,
  body.rm-page .rx-title-watermark{
    display:none !important;
  }

  body.rm-page .rx-shell{ padding:0 !important; }
  body.rm-page .rx-card{
    box-shadow:none !important;
    border:none !important;
    background:#fff !important;
  }

  /* Píldoras en impresión: sin sombras 3D */
  body.rm-page .rm-pill-field,
  body.rm-page .rm-rp-pill{
    box-shadow:none !important;
    background:#fff !important;
    border:1px solid rgba(0,0,0,0.18) !important;
  }

  body.rm-page .rm-pill-field::after,
  body.rm-page .rm-rp-pill::after{
    display:none !important;
  }

  body.rm-page .rm-pill-tag{
    background:#fff !important;
    border:1px solid rgba(0,0,0,0.18) !important;
    color:#000 !important;
  }

  body.rm-page .rm-pill-tag i{ color:#000 !important; text-shadow:none !important; }

  body.rm-page .rm-pill-field input{
    color:#000 !important;
  }

  body.rm-page textarea{
    box-shadow:none !important;
    background:#fff !important;
  }

  body.rm-page .rm-fs-box{
    box-shadow:none !important;
    background:#fff !important;
  }
}

/* =========================================================
   Menú flotante desplegable (tres puntos)
   - Por defecto: solo se ve el botón principal
   - Hover (desktop) o click (mobile): muestra items hacia arriba
   ========================================================= */
.botones-flotantes.fab-menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
}

.botones-flotantes.fab-menu .fab-item{
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease;
}

/* Desktop: al hover despliega */
.botones-flotantes.fab-menu:hover .fab-item{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Mobile: toggle por JS */
.botones-flotantes.fab-menu.open .fab-item{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.botones-flotantes.is-collapsed button:not(.btn-menu),
.botones-flotantes.is-collapsed a:not(.btn-menu) {
  display: none !important;
}

.botones-flotantes .btn-menu {
  display: flex;
}
/* Médico – Turno: "Abrir PDF" como botón (Enfermería vista) */
body.med-page #med-enf a.med-pdf-btn{
  width: auto !important;      /* evita full-width de .rx-btn */
  height: 52px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  display: inline-flex !important;
}
body.med-page #med-enf a.med-pdf-btn i{
  font-size: 18px !important;
}

/* Enfermería: botón Ver PDF visible/oculto */
#btn-verpdf {
  display: none;
}

#btn-verpdf.is-visible {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* opcional: estado loading */
.is-loading {
  opacity: .75;
  pointer-events: none;
}

/* =========================================================
   FIX TURNOS: no anular box-shadow al enfocar (mobile)
   El global button:focus { box-shadow:none !important; } pisaba la selección
   ========================================================= */

/* Mantener sin outline, pero permitir sombra */
.turnos-day:focus,
.turnos-day:focus-visible,
.turnos-hora-btn:focus,
.turnos-hora-btn:focus-visible{
  outline: none !important;
}

/* Estado normal con foco (sin “reborde de navegador”, mantiene look) */
.turnos-day:focus,
.turnos-day:focus-visible{
  box-shadow: 0 10px 20px rgba(0,0,0,0.14) !important;
}

.turnos-hora-btn:focus,
.turnos-hora-btn:focus-visible{
  box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important;
}

/* ✅ Si está seleccionado, que se vea seleccionado incluso con foco */
.turnos-day.is-selected:focus,
.turnos-day.is-selected:focus-visible{
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.85),
    0 10px 20px rgba(0,0,0,0.14) !important;
  transform: translateY(-1px) !important;
}

.turnos-hora-btn.is-selected:focus,
.turnos-hora-btn.is-selected:focus-visible{
  box-shadow:
    0 0 0 3px rgba(0,0,0,0.85),
    0 10px 20px rgba(0,0,0,0.12) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   PÚBLICO (rp-page) — Recuperar / Restablecer contraseña
   Pegar al FINAL de /static/style.css
   Scope: SOLO body.rp-page
   ========================================================= */

/* Card centrada y más “premium” sin cambiar el sistema */
body.rp-page .rx-card{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(20,24,30,0.10);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Form público: 1 columna (evita look “registro” 2 columnas) */
body.rp-page #form-registro{
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

/* Labels un poco más chicos que en privado, pero con tu peso */
body.rp-page #form-registro label{
  font-size: 16px;
  font-weight: 800;
  color: rgba(21,26,34,0.78);
  margin: 6px 0 2px;
}

/* Inputs (mismo lenguaje visual de tu sistema, sin dark global) */
body.rp-page #form-registro input{
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(20,24,30,0.14);
  background: rgba(255,255,255,0.90);
  padding: 12px 14px;
  font-size: 16px;
  color: #12151d;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

body.rp-page #form-registro input:focus{
  border-color: rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

/* Botón “ancho” del público: lo mapeamos a tu look 3D sin tocar .rx-btn global */
body.rp-page .rx-btn-wide{
  width: 100%;
  height: 58px;
  border-radius: var(--r-lg);
  border: 1px solid var(--btn-border);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 48%, var(--btn-bot) 100%);
  box-shadow: var(--btn-shadow);
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-weight: 800;
  font-size: 16px;
  color: var(--btn-icon);
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

body.rp-page .rx-btn-wide::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,0.14) 0%, transparent 42%);
  opacity:.95;
}

body.rp-page .rx-btn-wide::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:var(--r-sm);
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45);
  opacity:.72;
}

body.rp-page .rx-btn-wide:hover{
  transform: translateY(-2px);
  filter: brightness(1.03) contrast(1.03);
  box-shadow: var(--btn-shadow-hover);
}
body.rp-page .rx-btn-wide:active{
  transform: translateY(1px);
  filter: brightness(0.985);
  box-shadow: var(--btn-shadow-active);
}
body.rp-page .rx-btn-wide i{
  font-size: 18px;
  color: var(--btn-icon);
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
  position: relative;
  z-index: 1;
}

/* Mensajes */
body.rp-page .rx-note{
  border-radius: var(--r-lg);
  border: 1px solid rgba(20,24,30,0.10);
  background: rgba(255,255,255,0.70);
  padding: 12px 14px;
  color: rgba(18,21,29,.88);
  font-weight: 800;
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

body.rp-page .rx-note-error{
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.22);
  color: rgba(120, 10, 10, 0.95);
}

/* Hint del público */
body.rp-page .rx-hint{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.75;
}

/* Mobile: un toque más de aire */
@media (max-width: 520px){
  body.rp-page .rx-card{ padding: 16px; }
}

/* =========================================================
   PÚBLICO (rp-page) — FIX inputs Email / DNI (recuperar)
   Pegar al FINAL de /static/style.css
   ========================================================= */

body.rp-page input[type="email"],
body.rp-page input[type="text"],
body.rp-page input[type="number"],
body.rp-page input[name="email"],
body.rp-page input[name="dni"],
body.rp-page #email,
body.rp-page #dni{
  width:100% !important;
  box-sizing:border-box !important;

  border-radius:var(--r-lg) !important;
  border:1px solid rgba(20,24,30,0.14) !important;
  background:rgba(255,255,255,0.90) !important;

  padding:12px 14px !important;
  font-size:16px !important;
  color:#12151d !important;

  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;

  outline:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;

  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

body.rp-page input[type="email"]:focus,
body.rp-page input[type="text"]:focus,
body.rp-page input[type="number"]:focus,
body.rp-page input[name="email"]:focus,
body.rp-page input[name="dni"]:focus,
body.rp-page #email:focus,
body.rp-page #dni:focus{
  border-color:rgba(15,18,24,0.28) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55) !important;
  transform:translateY(-1px) !important;
}

body.rp-page input::placeholder{
  color:rgba(21,26,34,0.45) !important;
}

/* =========================================================
   FIX: Público (rp-page) SIN imagen de fondo
   - Deja el mismo fondo estándar del sistema (como el resto)
   - Pegar al FINAL de /static/style.css
   ========================================================= */
body.rp-page.rx-dark{
  background:
    radial-gradient(1200px 600px at 30% 0%, #e8eef7 0%, transparent 55%),
    radial-gradient(900px 520px at 90% 10%, #e2e9f4 0%, transparent 58%),
    linear-gradient(180deg, #dfe6f1 0%, #edf2f7 55%, #f4f7fb 100%) !important;
}

/* =========================================================
   PÚBLICO (rp-page) — FORZAR fondo SIN imagen (hard override)
   Pegar al FINAL de /static/style.css
   ========================================================= */

/* Si alguien metió una imagen con pseudo-elementos, la anulamos */
body.rp-page::before,
body.rp-page::after{
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Fondo del público: igual al sistema (sin url() de imagen) */
html,
body.rp-page{
  background-color: #eef2f7 !important;
}

body.rp-page{
  background:
    radial-gradient(1200px 600px at 30% 0%, #e8eef7 0%, transparent 55%),
    radial-gradient(900px 520px at 90% 10%, #e2e9f4 0%, transparent 58%),
    linear-gradient(180deg, #dfe6f1 0%, #edf2f7 55%, #f4f7fb 100%) !important;

  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: #12151d;
}


/* === Fix estilo select Obra Social (mismo look que inputs) === */
#obra_social{
  width: 100%;
  box-sizing: border-box;

  padding: 14px 16px;
  min-height: 48px;

  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;

  font: inherit;
  color: inherit;

  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

#obra_social:focus{
  outline: none;
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 10px 26px rgba(0,0,0,.08);
}

/* ===== FIX: botón Enviar no queda hundido/traslúcido mientras envía ===== */
#btnPdfSend,
#btnPdfSend:focus,
#btnPdfSend:active,
#btnPdfSend:disabled,
#btnPdfSend[aria-busy="true"] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Si tenés reglas globales de disabled, esto evita el “apagado” visual */
#btnPdfSend:disabled {
  pointer-events: none; /* sigue bloqueado, pero sin look deshabilitado */
}

/* Opcional: quitá cualquier sombra/estilo “presionado” si lo tuvieran */
#btnPdfSend:active,
#btnPdfSend:disabled,
#btnPdfSend[aria-busy="true"] {
  box-shadow: inherit !important;
}

/* ✅ Links legales (solo login) */
.rp-legal{
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  opacity: 0.92;
  line-height: 1.25;
}
.rp-legal a{
  color: #7ad7ff;
  text-decoration: none;
}
.rp-legal a:hover{
  text-decoration: underline;
}
.rp-legal .sep{
  margin: 0 8px;
  opacity: 0.6;
}

/* ================================
   Alert Manager - Botones Confirmar/Cancelar
   Aplica al bloque: #alert-buttons
   ================================ */

#alert-buttons{
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}

#alert-buttons .alert-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  height: 52px;
  min-width: 160px;
  padding: 0 18px;

  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.14);

  background: rgba(255,255,255,0.90);
  color: rgba(21,26,34,0.90);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  box-shadow:
    0 14px 28px rgba(0,0,0,0.16),
    inset 0 1px 0 rgba(255,255,255,0.60);

  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

#alert-buttons .alert-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.60);
}

#alert-buttons .alert-btn:active{
  transform: translateY(1px);
  filter: brightness(0.99);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

#alert-buttons .alert-btn i{
  font-size: 18px;
  line-height: 1;
}

/* ================================
   ALERT MANAGER - Botones (idénticos a rp-login-btn)
   Scope: solo dentro de #alert-manager
   ================================ */

#alert-manager #alert-buttons{
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

#alert-manager #alert-buttons .alert-btn{
  width: 100%;
  max-width: 520px;
  height: 60px;
  border-radius: 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  border: 1px solid rgba(255,255,255,0.12);
  background: linear-gradient(180deg, #2b2f38 0%, #141821 48%, #07090d 100%);

  box-shadow:
    0 28px 44px rgba(0,0,0,0.38),
    0 12px 18px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -16px 26px rgba(0,0,0,0.70);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
  text-decoration: none;
  padding: 0 16px;
}

#alert-manager #alert-buttons .alert-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.03) contrast(1.03);
}

#alert-manager #alert-buttons .alert-btn:active{
  transform: translateY(1px);
  filter: brightness(0.985);
}

#alert-manager #alert-buttons .alert-btn i{
  font-size: 20px;
  color: #f2f5ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
}

#alert-manager #alert-buttons .alert-btn .alert-btn-label{
  color: #f2f5ff;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
}

/* Cancelar (idéntico a rp-login-btn-secondary) */
#alert-manager #btn-no{
  background: rgba(255,255,255,0.10);
  box-shadow:
    0 18px 30px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
}

#alert-manager #btn-no i{
  color: #f2f5ff;
  opacity: 0.95;
}

/* =========================================================
   ADMIN (admin-page) — UI consistente con sistema RX
   Pegar al FINAL de /static/style.css
   Scope: SOLO body.admin-page
   ========================================================= */

body.admin-page .admin-card{
  display: grid;
  gap: 12px;
}

body.admin-page .admin-h2{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(21,26,34,0.90);
  margin-bottom: 6px;
}

/* =========================
   FORM: Nuevo usuario
   ========================= */
body.admin-page #form-nuevo-usuario.admin-form{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px 16px;
  align-items: center;
}

body.admin-page #form-nuevo-usuario.admin-form label{
  font-size: 18px;
  font-weight: 800;
  color: rgba(21,26,34,0.78);
}

body.admin-page #form-nuevo-usuario.admin-form input,
body.admin-page #form-nuevo-usuario.admin-form select{
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid rgba(20,24,30,0.14);
  background: rgba(255,255,255,0.90);
  padding: 12px 14px;
  font-size: 16px;
  color: #12151d;

  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);

  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
  appearance: none;
  -webkit-appearance: none;
}

body.admin-page #form-nuevo-usuario.admin-form input:focus,
body.admin-page #form-nuevo-usuario.admin-form select:focus{
  border-color: rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform: translateY(-1px);
}

body.admin-page #form-nuevo-usuario .admin-form-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 6px;
}

@media (max-width: 860px){
  body.admin-page #form-nuevo-usuario.admin-form{
    grid-template-columns: 1fr;
  }
  body.admin-page #form-nuevo-usuario.admin-form label{
    margin-top: 6px;
  }
  body.admin-page #form-nuevo-usuario .admin-form-actions{
    justify-content: center;
  }
}

/* =========================
   BOTONES: mismo look 3D negro que flotantes/back
   ========================= */
body.admin-page .admin-btn{
  position: relative !important;

  width: 58px;
  height: 58px;
  border-radius: var(--r-lg);

  display: grid;
  place-items: center;

  border: 1px solid var(--btn-border);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 48%, var(--btn-bot) 100%);
  box-shadow: var(--btn-shadow);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

body.admin-page .admin-btn::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120px 75px at 30% 16%,
      rgba(255,255,255,0.34),
      rgba(255,255,255,0.08) 55%,
      transparent 72%),
    linear-gradient(180deg,
      rgba(255,255,255,0.14) 0%,
      transparent 42%);
  opacity: .95;
}

body.admin-page .admin-btn::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: var(--r-sm);
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.45);
  opacity: .72;
}

body.admin-page .admin-btn i{
  font-size: 20px;
  color: var(--btn-icon);
  text-shadow: 0 1px 0 rgba(0,0,0,0.40);
  position: relative;
  z-index: 1;
}

body.admin-page .admin-btn:not(:disabled):hover{
  transform: translateY(-2px);
  filter: brightness(1.03) contrast(1.03);
  box-shadow: var(--btn-shadow-hover);
}

body.admin-page .admin-btn:not(:disabled):active{
  transform: translateY(1px);
  filter: brightness(0.985);
  box-shadow: var(--btn-shadow-active);
}

/* tu CSS global anula focus; acá lo recuperamos sólo para admin */
body.admin-page .admin-btn:focus,
body.admin-page .admin-btn:focus-visible{
  outline: none !important;
  box-shadow:
    var(--btn-shadow),
    0 0 0 3px rgba(0,0,0,0.22),
    0 0 0 6px rgba(255,255,255,0.10) !important;
}

body.admin-page .admin-btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  filter: grayscale(0.2);
}

/* =========================
   SECCIONES + ACCIONES (usuarios/pacientes)
   ========================= */
body.admin-page .admin-section-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

body.admin-page .admin-actions{
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

/* =========================
   TABLAS (look RX)
   ========================= */
body.admin-page .admin-table-wrap{
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  max-height: 46vh;
  border-radius: 14px;

  border: 1px solid rgba(20,24,30,0.08);
  background: rgba(255,255,255,0.55);
  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
}

body.admin-page .admin-tabla{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px; /* fuerza scroll horizontal en mobile */
}

body.admin-page .admin-tabla thead th{
  position: sticky;
  top: 0;
  z-index: 2;

  text-align: left;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;

  padding: 12px 12px;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border-bottom: 1px solid rgba(20,24,30,0.10);
  color: rgba(21,26,34,0.85);
}

body.admin-page .admin-tabla tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(20,24,30,0.08);
  color: rgba(18,21,29,.90);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: middle;
}

body.admin-page .admin-tabla tbody tr{
  background: rgba(255,255,255,0.68);
}

body.admin-page .admin-tabla tbody tr:hover{
  background: rgba(255,255,255,0.86);
}

body.admin-page .admin-tabla .col-check{
  width: 44px;
  text-align: center;
}

body.admin-page .admin-tabla input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #12151d;
  cursor: pointer;
}

@media (max-width: 600px){
  body.admin-page .admin-table-wrap{ max-height: 52vh; }
  body.admin-page .admin-tabla{ min-width: 780px; }
}
/* =========================================================
   PÚBLICO (rp-page) — Restablecer/Recuperar: labels + inputs + ojito
   Pegar al FINAL de /static/style.css
   ========================================================= */

body.rp-page .rx-card .rp-form{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

body.rp-page .rx-card .rp-field{
  display:grid;
  gap:8px;
}

/* Labels: mismo lenguaje visual que el resto del sistema */
body.rp-page .rx-card .rp-field > label{
  display:block;
  font-size:18px;
  font-weight:800;
  color:rgba(21,26,34,0.78);
  margin-top:6px;
}

/* Inputs: incluye password (antes no estaba cubierto) */
body.rp-page .rx-card .rp-form input:not([type="hidden"]){
  width:100%;
  box-sizing:border-box;

  border-radius:var(--r-lg);
  border:1px solid rgba(20,24,30,0.14);
  background:rgba(255,255,255,0.90);

  padding:12px 14px;
  font-size:16px;
  color:#12151d;

  box-shadow:
    0 14px 26px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);

  outline:none;
  appearance:none;
  -webkit-appearance:none;

  transition:border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}

body.rp-page .rx-card .rp-form input:not([type="hidden"]):focus{
  border-color:rgba(15,18,24,0.28);
  box-shadow:
    0 18px 34px rgba(0,0,0,0.08),
    0 0 0 4px rgba(20,24,30,0.06),
    inset 0 1px 0 rgba(255,255,255,0.55);
  transform:translateY(-1px);
}

body.rp-page .rx-card .rp-form input::placeholder{
  color:rgba(21,26,34,0.45);
}

/* ===== Campo password con botón "ojito" ===== */
body.rp-page .rx-card .pw-field{
  position:relative;
}

/* Espacio para el botón */
body.rp-page .rx-card .pw-field > input{
  padding-right:58px !important;
}

/* Botón ojito (simple y consistente con tu estética clara) */
body.rp-page .rx-card .pw-toggle{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);

  width:44px;
  height:44px;
  border-radius:14px;

  border:1px solid rgba(20,24,30,0.10);
  background:rgba(255,255,255,0.65);
  box-shadow:0 10px 18px rgba(0,0,0,0.06);

  display:grid;
  place-items:center;

  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

body.rp-page .rx-card .pw-toggle:hover{
  filter:brightness(1.03);
}

body.rp-page .rx-card .pw-toggle:active{
  transform:translateY(-50%) translateY(1px);
}

body.rp-page .rx-card .pw-toggle i{
  font-size:18px;
  color:rgba(21,26,34,0.85);
}

/* Tu CSS global apaga outlines; acá recuperamos focus SOLO para el ojito */
body.rp-page .rx-card button.pw-toggle:focus-visible{
  outline: 3px solid rgba(0,0,0,0.20) !important;
  outline-offset: 2px !important;
}