:root{
  /* Encinas tokens */
  --enc-primary: #85A9AD;
  --enc-secondary: #A1CEC7;
  --enc-muted: #BAC6BC;
  --enc-surface: #DDD6C9;
  --enc-bg: #EFEADD;
  --enc-text: #000000;
  --enc-inverse: #EFEADD;

  --radius-card: 18px;
  --radius-btn: 14px;
  --shadow-card: 0 14px 40px rgba(0,0,0,.12);
  --shadow-btn: 0 10px 22px rgba(0,0,0,.14);
  --shadow-btn-hover: 0 14px 28px rgba(0,0,0,.18);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  font-family: var(--font);
  color: var(--enc-text);
  background: var(--enc-bg);
  text-transform: uppercase;
}

input,
textarea,
select,
button{
  text-transform: uppercase;
}

input::placeholder,
textarea::placeholder{
  text-transform: uppercase;
}

.page{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 16px;
  position: relative;
  overflow: hidden;
}

.bg{
  position: absolute;
  inset: 0;
  background-image: url('assets/bg.jpg');
  background-size: cover;
  background-position: right center;
  transform: scale(1.02);
}

.overlay{
  position: absolute;
  inset: 0;
  /* Suaviza la foto manteniendo sensación clínica */
  background:
    radial-gradient(1200px 700px at 28% 28%, rgba(239,234,221,.92), rgba(239,234,221,.78) 55%, rgba(239,234,221,.70) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.12));
}

.card{
  width: min(560px, 92vw);
  position: relative;
  z-index: 1;
  background: rgba(221, 214, 201, .88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(186,198,188,.75);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 22px 18px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 14px;
}


.brand__logoWrap{
  background: #85A9AD;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(186,198,188,.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
}

.brand__logo{
  width: 160px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.18));
}

.brand__meta{ line-height: 1.1; }

.brand__kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.70);
}

.brand__title{
  margin: 6px 0 0;
  font-size: 22px;
  letter-spacing: .02em;
}

.divider{
  height: 1px;
  background: rgba(186,198,188,.9);
  margin: 18px 0 18px;
}


.svgIcon{
  width: 18px;
  height: 18px;
  display: block;
}

.svgIcon--btn{ width: 20px; height: 20px; }
.svgIcon--cta{ width: 18px; height: 18px; }

.inputWrap{
  position: relative;
  display: flex;
  align-items: center;
}

.inputIcon{
  position: absolute;
  left: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: rgba(0,0,0,.70);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.form{ display: grid; gap: 16px; }

.field{ display: grid; gap: 8px; }

.label{
  font-weight: 650;
  font-size: 13px;
  letter-spacing: .02em;
}

.input{
  width: 100%;
  border: 1px solid rgba(186,198,188,.95);
  background: rgba(239,234,221,.85);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}


.input.input--withIcon{
  padding-left: 52px;
}

/* Cuando el campo tiene contenido, ocultamos el icono para evitar superposición */
.inputWrap.hasValue .inputIcon{
  opacity: 0;
  transform: scale(.92);
}
.input::placeholder{ color: rgba(0,0,0,.45); }

.input:focus{
  border-color: rgba(161,206,199,1);
  box-shadow: 0 0 0 4px rgba(161,206,199,.45);
}

.help{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

.password{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.iconBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(186,198,188,.95);
  background: rgba(239,234,221,.85);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  color: rgba(0,0,0,.80);
}

.iconBtn:hover{ transform: translateY(-1px); box-shadow: 0 10px 18px rgba(0,0,0,.12); }


.actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 2px;
}

/* Pantalla de selección de accesos: botones más grandes para mejor UX */
.actions--access{
  gap: 14px;
  margin-top: 6px;
}

.actions--access .btn{
  padding: 18px 18px;
  min-height: 64px;
  font-size: 15px;
}

.btn{
  border-radius: var(--radius-btn);
  border: 1px solid rgba(186,198,188,.9);
  padding: 12px 14px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, opacity .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  user-select: none;
}

.btn-primary{
  color: var(--enc-text);
  background: linear-gradient(135deg, var(--enc-primary), var(--enc-secondary));
  box-shadow: var(--shadow-btn);
}

.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); filter: saturate(1.05); }

.btn-primary:active{ transform: translateY(0px); }

.btn-primary:focus{ outline: none; box-shadow: 0 0 0 4px rgba(161,206,199,.52), var(--shadow-btn); }

.btn-secondary{
  color: rgba(0,0,0,.92);
  background: rgba(239,234,221,.55);
  border: 1px solid rgba(133,169,173,.65);
}

.btn-secondary:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }

.btn[disabled]{
  opacity: .72;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.badge{
  font-size: 10px;
  font-weight: 800;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(133,169,173,.20);
  border: 1px solid rgba(133,169,173,.35);
  letter-spacing: .08em;
}

.status{
  min-height: 22px;
}

.status__text{
  margin: 0;
  font-size: 13px;
  font-weight: 650;
}

.status__text{
  display: flex;
  align-items: center;
  gap: 8px;
}

.status__text::before{
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  opacity: .92;
}

.status__text.ok::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.status__text.err::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6'/%3E%3Cpath d='M9 9l6 6'/%3E%3C/svg%3E"); }

.status__text.ok{ color: rgba(0,0,0,.90); }
.status__text.err{ color: rgba(0,0,0,.90); }

/* Error visual sin agregar colores ajenos: usamos borde más fuerte + glow del secondary */
.field.invalid .input{
  border-color: rgba(133,169,173,.95);
  box-shadow: 0 0 0 4px rgba(133,169,173,.28);
}

.foot{
  margin-top: 8px;
}

.foot__text{
  margin: 0;
  font-size: 12px;
  color: rgba(0,0,0,.60);
  text-align: center;
}

.card--patient{
  width: min(640px, 92vw);
}

.patientHero{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.patientHero__copy{
  display: grid;
  gap: 6px;
}

.patientHero__title{
  margin: 0;
  font-size: 20px;
  letter-spacing: .02em;
}

.patientHero__text{
  margin: 0;
  color: rgba(0,0,0,.64);
  line-height: 1.45;
}

.patientHero__sample{
  flex: 0 0 auto;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(133,169,173,.42);
  background: rgba(161,206,199,.24);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,.76);
}

.patientPanel{
  margin-top: 18px;
  border-radius: 18px;
  border: 1px solid rgba(186,198,188,.82);
  background: rgba(239,234,221,.84);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
  padding: 18px;
}

.patientPanel.isHidden{
  display: none;
}

.patientPanel__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(186,198,188,.72);
}

.patientPanel__kicker{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(133,169,173,.96);
}

.patientPanel__name{
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.patientPanel__id{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(133,169,173,.42);
  background: rgba(161,206,199,.22);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.patientPanel__grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.patientPanel__actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

.patientPanel__card{
  border-radius: 16px;
  border: 1px solid rgba(186,198,188,.72);
  background: rgba(221,214,201,.38);
  padding: 16px;
  min-height: 160px;
}

.patientPanel__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(0,0,0,.58);
  margin-bottom: 10px;
}

.patientPanel__value{
  font-size: 18px;
  line-height: 1.5;
  font-weight: 720;
  color: rgba(0,0,0,.90);
}

@media (min-width: 560px){
  .actions{ grid-template-columns: 1fr; }
}

@media (max-width: 440px){
  .brand{ flex-direction: column; align-items: flex-start; }
  .brand__logo{ width: 150px; }
  .actions--access .btn{ padding: 16px 16px; min-height: 60px; font-size: 14px; }
  .patientHero{ flex-direction: column; }
  .patientHero__sample{ align-self: flex-start; }
  .patientPanel__head{ flex-direction: column; }
  .patientPanel__grid{ grid-template-columns: 1fr; }
  .patientPanel__card{ min-height: 0; }
  .patientPanel__value{ font-size: 16px; }
}