/* =========================================================
   Patient Portal Login — Modern UI
   Replica del diseño de connectionsPostgresql/Pacientes
========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --blue-dark:  #0d2157;
    --blue-mid:   #1246aa;
    --blue-light: #1a6fd4;
    --blue-vivid: #1e90ff;
    --accent:     #2196f3;
    --text:       #1a202c;
    --text-muted: #718096;
    --border:     #e2e8f0;
    --input-bg:   #f7fafc;
    --font:       'Inter', 'Source Sans Pro', system-ui, sans-serif;
}

html, body {
    height: 100%;
    font-family: var(--font) !important;
    -webkit-font-smoothing: antialiased;
    background: transparent !important;
    overflow: hidden;
}

.login-wrapper { display: flex; min-height: 100vh; }

/* ══ LEFT PANEL ══ */
.panel-left {
    flex: 0 0 44%;
    background: linear-gradient(160deg, #0a1640 0%, #0e3080 42%, #1565c0 80%, #1976d2 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 48px 40px;
    position: relative; overflow: hidden;
    min-height: 100vh;
}

/* Burbujas animadas */
.bubble {
    position: absolute; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.07);
}
.b1 { width:340px; height:340px; top:-100px; left:-110px;   animation: floatBubble 18s ease-in-out infinite 0s;  }
.b2 { width:220px; height:220px; bottom:-60px; right:-70px; animation: floatBubble 22s ease-in-out infinite -4s; }
.b3 { width:130px; height:130px; top:55%; left:10%;
      background:rgba(30,144,255,0.18); border:2px solid rgba(30,144,255,0.35);
      animation: floatBubble 14s ease-in-out infinite -2s; }
.b4 { width:70px;  height:70px;  top:20%; right:14%;   animation: floatBubble 10s ease-in-out infinite -6s; }
.b5 { width:50px;  height:50px;  bottom:22%; left:22%; animation: floatBubble 12s ease-in-out infinite -1s; }

@keyframes floatBubble {
    0%   { transform: translateY(0px)   rotate(0deg);  opacity: 0.7; }
    30%  { transform: translateY(-24px) rotate(5deg);  opacity: 1;   }
    60%  { transform: translateY(12px)  rotate(-4deg); opacity: 0.8; }
    100% { transform: translateY(0px)   rotate(0deg);  opacity: 0.7; }
}

/* Iconos medicos flotantes */
.med-icon { position: absolute; color: rgba(255,255,255,0.28); pointer-events: none; user-select: none; }
.mi1  { top:8%;    left:6%;    font-size:1.3rem;  animation: driftIcon 16s ease-in-out infinite 0s;   }
.mi2  { top:14%;   right:10%;  font-size:1.8rem;  animation: driftIcon 20s ease-in-out infinite -5s;  }
.mi3  { top:36%;   left:4%;    font-size:1.2rem;  animation: driftIcon 13s ease-in-out infinite -2s;  }
.mi4  { top:62%;   right:6%;   font-size:1.5rem;  animation: driftIcon 17s ease-in-out infinite -8s;  }
.mi5  { bottom:18%; left:15%;  font-size:1.1rem;  animation: driftIcon 11s ease-in-out infinite -3s;  }
.mi6  { bottom:10%; right:18%; font-size:1.4rem;  animation: driftIcon 19s ease-in-out infinite -6s;  }
.mi7  { top:44%;   right:22%;  font-size:1.2rem;  animation: driftIcon 15s ease-in-out infinite -9s;  }
.mi8  { top:78%;   left:8%;    font-size:1.1rem;  animation: driftIcon 12s ease-in-out infinite -1s;  }
.mi9  { top:26%;   left:28%;   font-size:1.3rem;  animation: driftIcon 18s ease-in-out infinite -7s;  }
.mi10 { bottom:30%; right:12%; font-size:1.6rem;  animation: driftIcon 21s ease-in-out infinite -4s;  }

@keyframes driftIcon {
    0%   { transform: translateY(0px)   scale(1)    rotate(0deg);  opacity: 0.28; }
    25%  { transform: translateY(-18px) scale(1.1)  rotate(7deg);  opacity: 0.42; }
    50%  { transform: translateY(-6px)  scale(0.94) rotate(-5deg); opacity: 0.32; }
    75%  { transform: translateY(14px)  scale(1.06) rotate(3deg);  opacity: 0.38; }
    100% { transform: translateY(0px)   scale(1)    rotate(0deg);  opacity: 0.28; }
}

/* Contenido central */
.left-content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }

.logo-box {
    width: 160px; height: 160px; border-radius: 26px; background: #ffffff; border: none;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.15); padding: 18px;
}
.logo-box img { max-width:100%; max-height:100%; object-fit:contain; }

.left-company { font-size: 1.5rem; font-weight: 800; color: #fff; letter-spacing: -0.3px; margin-bottom: 14px; }
.left-divider { width: 34px; height: 2px; background: rgba(255,255,255,0.22); border-radius: 2px; margin-bottom: 14px; }
.left-desc { font-size: 0.83rem; color: rgba(255,255,255,0.5); line-height: 1.65; max-width: 260px; margin-bottom: 0; }
.left-desc strong { color: rgba(255,255,255,0.85); }

.left-features { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; text-align: left; width: 100%; }
.lf-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); border-radius: 9px; padding: 9px 13px; }
.lf-item i { color: #90caf9; font-size: 0.88rem; width: 16px; text-align: center; flex-shrink: 0; }
.lf-item span { font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.3; }

.left-footer { position: absolute; bottom: 18px; font-size: 0.72rem; color: rgba(255,255,255,0.5); letter-spacing: 0.3px; }
.left-footer a { color: rgba(255,255,255,0.65); text-decoration: none; }

/* ══ RIGHT PANEL ══ */
.panel-right {
    flex: 1; background: #eef2f7;
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; min-height: 100vh;
}

.login-card {
    width: 100%; max-width: 400px;
    background: #fff !important; border-radius: 16px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 10px 40px rgba(0,0,0,0.09) !important;
    overflow: hidden; display: block !important; flex-direction: unset !important;
}
.card-top-bar { height: 5px; background: linear-gradient(90deg, var(--blue-mid), var(--blue-vivid)); display: block !important; }
.lcard-body { padding: 34px 36px 26px !important; display: block !important; flex: unset !important; }

.lcard-label { font-size: 0.67rem; font-weight: 700; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 7px; display: block; }
.lcard-title { font-size: 1.75rem; font-weight: 800; color: var(--text); letter-spacing: -0.5px; margin-bottom: 5px; display: block; line-height: 1.2; }
.lcard-subtitle { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 26px; line-height: 1.5; display: block; }

/* Campos del formulario */
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 0.75rem; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.field-wrap { position: relative; }
.field-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #a0aec0; font-size: 0.82rem; pointer-events: none; }
.field-input {
    width: 100%; padding: 11px 42px 11px 38px;
    border: 1.5px solid var(--border); border-radius: 9px;
    font-family: var(--font); font-size: 0.875rem; color: var(--text);
    background: var(--input-bg); outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.field-input::placeholder { color: #c0c9d4; }
.field-input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(33,150,243,0.13); }
.btn-eye { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #a0aec0; font-size: 0.82rem; padding: 4px; transition: color 0.2s; }
.btn-eye:hover { color: var(--accent); }

/* Chips de tipo de acceso */
.access-row { display: flex; gap: 8px; margin-bottom: 20px; }
.access-chip {
    flex: 1; display: flex; align-items: center; gap: 7px; padding: 9px 12px;
    border: 1.5px solid var(--border); border-radius: 9px; background: var(--input-bg);
    font-size: 0.79rem; color: var(--text-muted); font-weight: 500;
    cursor: pointer; user-select: none; transition: all 0.18s; position: relative;
}
.access-chip input[type=checkbox] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.access-chip i { font-size: 0.82rem; }
.access-chip.active { border-color: var(--accent); background: #e3f2fd; color: var(--blue-mid); }

/* Boton de login */
.btn-login {
    width: 100%; padding: 12px;
    background: linear-gradient(135deg, var(--blue-mid), var(--blue-vivid));
    color: #fff; border: none; border-radius: 9px;
    font-family: var(--font); font-size: 0.9rem; font-weight: 700;
    cursor: pointer; letter-spacing: 0.3px;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    box-shadow: 0 4px 14px rgba(26,111,212,0.35); transition: all 0.2s;
}
.btn-login:hover { background: linear-gradient(135deg, #0d3d8c, #1565c0); box-shadow: 0 6px 20px rgba(26,111,212,0.45); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }

.lcard-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid #f0f4f8; font-size: 0.7rem; color: #b0bbc8; text-align: center; line-height: 1.6; display: block; }
.lcard-footer a { color: #94a3b8; text-decoration: none; }

/* ══ TOAST NOTIFICATIONS ══ */
.toast-container { position: fixed; top: 16px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast-item {
    display: flex; align-items: flex-start; gap: 12px; background: #fff;
    border-radius: 13px; border-left: 4px solid #ef4444;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13), 0 1px 4px rgba(0,0,0,0.07);
    padding: 14px 16px; min-width: 300px; max-width: 380px;
    pointer-events: all; animation: toastIn 0.38s cubic-bezier(0.34,1.4,0.64,1) forwards;
    position: relative; overflow: hidden;
}
.toast-item.hiding { animation: toastOut 0.28s ease-in forwards; }
@keyframes toastIn  { from { opacity:0; transform:translateX(60px) scale(0.93); } to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes toastOut { from { opacity:1; transform:translateX(0) scale(1); } to { opacity:0; transform:translateX(60px) scale(0.93); } }
.toast-icon-wrap { width:34px; height:34px; border-radius:50%; background:#fef2f2; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:0.88rem; color:#ef4444; margin-top:1px; }
.toast-body { flex: 1; }
.toast-title { font-size:0.82rem; font-weight:700; color:#1a202c; margin-bottom:3px; }
.toast-msg   { font-size:0.77rem; color:#718096; line-height:1.45; }
.toast-close { background:none; border:none; cursor:pointer; color:#a0aec0; font-size:0.76rem; padding:2px; flex-shrink:0; margin-top:1px; transition:color 0.2s; }
.toast-close:hover { color:#ef4444; }
.toast-bar { position:absolute; bottom:0; left:0; height:3px; background:#ef4444; opacity:0.3; border-radius:0 0 0 13px; animation:barShrink 4.5s linear forwards; }
@keyframes barShrink { from { width:100%; } to { width:0%; } }

/* ══ RESPONSIVE — MOVIL ══ */
.mobile-logo { display: none; flex-direction: column; align-items: center; margin-bottom: 20px; gap: 10px; }
.mobile-logo-box { width:90px; height:90px; background:#fff; border-radius:18px; display:flex; align-items:center; justify-content:center; padding:12px; box-shadow:0 6px 24px rgba(0,0,0,0.22); }
.mobile-logo-box img { max-width:100%; max-height:100%; object-fit:contain; }
.mobile-logo-name { font-size:1rem; font-weight:700; color:#fff; text-align:center; letter-spacing:-0.2px; text-shadow:0 1px 6px rgba(0,0,0,0.3); }

@media (max-width: 768px) {
    .panel-left  { display: none; }
    .mobile-logo { display: flex; }
    .panel-right { background: linear-gradient(160deg, #0a1640 0%, #0e3080 50%, #1976d2 100%); padding: 40px 16px; align-items: flex-start; }
    .panel-right > .mobile-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }
    .login-card  { border-radius: 14px; }
    .lcard-body  { padding: 28px 24px 22px !important; }
}
@media (max-width: 400px) {
    .lcard-body { padding: 22px 18px 18px !important; }
    .access-row { flex-direction: column; }
}