/*
  AtrioMed Web App — diseño web-first
  La app Cordova conserva su CSS original. Este archivo solo transforma la copia web.
*/

body.web-app-mode{
  --web-max:1480px;
  --web-rail:248px;
  --web-gap:22px;
  --web-header:72px;
  min-height:100dvh;
  background:
    radial-gradient(circle at 8% 0%,rgba(89,227,194,.18),transparent 27%),
    radial-gradient(circle at 96% 4%,rgba(255,117,101,.12),transparent 24%),
    linear-gradient(145deg,#001728 0%,#042b3d 45%,#0b4d49 100%);
}
body.web-app-mode:after{display:none!important;content:none!important}
body.web-app-mode .web-limitation-note{display:none!important}

.web-site-link{
  position:fixed;
  z-index:90;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:42px;
  padding:0 15px;
  color:#ebfff6;
  border:1px solid rgba(235,255,246,.16);
  border-radius:15px;
  background:rgba(0,27,51,.74);
  box-shadow:0 16px 42px rgba(0,0,0,.22);
  backdrop-filter:blur(18px);
  font-size:.84rem;
  font-weight:950;
  transition:.2s ease;
}
.web-site-link:hover{transform:translateY(-1px);background:rgba(8,66,76,.9)}
.web-site-link svg{width:18px;height:18px}

/* Elementos y controles compartidos */
body.web-app-mode .card{
  margin:0;
  border-radius:24px;
  border-color:rgba(235,255,246,.14);
  background:linear-gradient(155deg,rgba(5,39,61,.93),rgba(6,55,76,.8));
  box-shadow:0 18px 48px rgba(0,0,0,.18);
}
body.web-app-mode .card:hover{border-color:rgba(89,227,194,.21)}
body.web-app-mode .section-title{font-size:clamp(1.45rem,2vw,2.15rem);line-height:1.02}
body.web-app-mode .section-sub{font-size:.98rem;line-height:1.58;max-width:76ch}
body.web-app-mode .field input,
body.web-app-mode .field select,
body.web-app-mode .field textarea{
  min-height:48px;
  border-radius:14px;
  padding:12px 14px;
}
body.web-app-mode .field textarea{min-height:120px}
body.web-app-mode .btn{min-height:44px;border-radius:14px;padding:11px 15px}
body.web-app-mode .btn.small{min-height:38px;padding:8px 12px}
body.web-app-mode .form-grid{gap:14px}
body.web-app-mode .grid{gap:14px}
body.web-app-mode .item,
body.web-app-mode .chat-row,
body.web-app-mode .pro-card{
  border-radius:19px;
  border:1px solid rgba(235,255,246,.11);
  background:rgba(235,255,246,.055);
}
body.web-app-mode .item{padding:16px}
body.web-app-mode .upload-box{min-height:100px;border-radius:18px}
body.web-app-mode .empty{border-radius:18px}
body.web-app-mode .meta{gap:10px;flex-wrap:wrap}
body.web-app-mode .status-badge{white-space:nowrap}
body.web-app-mode .section-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
body.web-app-mode .section-head-row>div{min-width:0}
body.web-app-mode .web-head-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
body.web-app-mode .spaced-action{margin-top:16px}
body.web-app-mode .list,
body.web-app-mode .chat-list,
body.web-app-mode .pro-list{gap:14px}
body.web-app-mode .camera-only input{cursor:pointer}

/* Autenticación: siempre centrada en navegador */
body.web-app-mode .app-main.auth-mode{
  width:100%!important;
  max-width:none!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:36px 24px!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
body.web-app-mode .auth-screen{
  width:100%!important;
  min-height:calc(100dvh - 72px)!important;
  display:grid!important;
  place-items:center!important;
  position:relative;
}
body.web-app-mode .auth-screen:before,
body.web-app-mode .auth-screen:after{
  content:"";
  position:fixed;
  pointer-events:none;
  border-radius:50%;
  filter:blur(2px);
  opacity:.75;
}
body.web-app-mode .auth-screen:before{
  width:360px;height:360px;left:7vw;top:12vh;
  background:radial-gradient(circle,rgba(89,227,194,.2),transparent 68%);
}
body.web-app-mode .auth-screen:after{
  width:300px;height:300px;right:8vw;bottom:8vh;
  background:radial-gradient(circle,rgba(255,117,101,.15),transparent 68%);
}
body.web-app-mode .auth-card{
  width:min(540px,calc(100vw - 48px))!important;
  max-width:540px!important;
  margin:auto!important;
  padding:30px!important;
  border-radius:28px!important;
  box-shadow:0 30px 90px rgba(0,0,0,.38)!important;
  isolation:isolate;
}
body.web-app-mode .auth-card.auth-register-card{width:min(720px,calc(100vw - 48px))!important;max-width:720px!important}
body.web-app-mode .auth-card h2{font-size:clamp(2.35rem,4.5vw,3.5rem)!important;max-width:10ch}
body.web-app-mode .auth-logo{justify-content:center;text-align:left;margin-bottom:22px}
body.web-app-mode .auth-links{margin-top:18px}
body.web-app-mode .login-form{margin-top:6px}
body.web-app-mode .reg-stepper{margin:4px 0 18px}

/* Notebook y escritorio */
@media (min-width:960px){
  body.web-app-mode{overflow-x:hidden!important}
  body.web-app-mode .app-shell{
    width:100%!important;
    min-height:100dvh!important;
    margin:0!important;
    overflow:visible!important;
    background:transparent!important;
  }
  body.web-app-mode .app-header{
    top:18px!important;
    left:18px!important;
    right:18px!important;
    width:auto!important;
    height:var(--web-header)!important;
    transform:none!important;
    grid-template-columns:54px minmax(0,1fr) 50px 50px!important;
    gap:10px!important;
    padding:8px 10px!important;
    border-radius:23px!important;
    background:rgba(0,24,43,.9)!important;
    border-color:rgba(235,255,246,.16)!important;
    box-shadow:0 20px 65px rgba(0,0,0,.28)!important;
  }
  body.web-app-mode .brand-mini img{width:46px!important;height:46px!important}
  body.web-app-mode .header-title-wrap{
    height:52px!important;
    justify-content:flex-start!important;
    padding:0 20px!important;
    border-radius:17px!important;
  }
  body.web-app-mode .app-header h1{font-size:1.18rem!important;text-align:left!important}
  body.web-app-mode .icon-btn{height:50px!important;border-radius:16px!important}

  body.web-app-mode .bottom-nav{
    top:108px!important;
    bottom:auto!important;
    left:18px!important;
    width:var(--web-rail)!important;
    height:auto!important;
    transform:none!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:12px!important;
    border-radius:24px!important;
    background:rgba(0,24,43,.9)!important;
    border-color:rgba(235,255,246,.15)!important;
    box-shadow:0 20px 65px rgba(0,0,0,.25)!important;
  }
  body.web-app-mode .bottom-nav button{
    min-height:58px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:13px!important;
    padding:9px 13px!important;
    border-radius:17px!important;
    font-size:.95rem!important;
  }
  body.web-app-mode .bottom-nav button:hover{color:#ebfff6;background:rgba(235,255,246,.08)}
  body.web-app-mode .bottom-nav button.active{
    color:#001b33!important;
    background:linear-gradient(135deg,#59e3c2,#ebfff6)!important;
    box-shadow:0 12px 32px rgba(89,227,194,.16)!important;
  }
  body.web-app-mode .bottom-nav .nav-home{transform:none!important}
  body.web-app-mode .bottom-nav .nav-icon{width:34px!important;height:34px!important;flex:0 0 34px}
  body.web-app-mode .bottom-nav small{font-size:.88rem!important;white-space:normal!important;text-align:left}

  body.web-app-mode .app-main:not(.auth-mode){
    width:auto!important;
    max-width:none!important;
    min-height:100dvh!important;
    margin:0 18px 0 calc(var(--web-rail) + 38px)!important;
    padding:108px 0 38px!important;
    overflow:visible!important;
  }
  body.web-app-mode .screen{
    width:min(100%,var(--web-max))!important;
    max-width:var(--web-max)!important;
    margin:0 auto!important;
    display:grid;
    gap:var(--web-gap);
    align-items:start;
  }

  body.web-app-mode .web-site-link{left:calc(var(--web-rail) + 58px);top:33px}

  body.web-app-mode .turno-fab,
  body.web-app-mode .emergency-fab{
    left:32px!important;
    right:auto!important;
    width:220px!important;
    min-height:50px!important;
    justify-content:center!important;
    border-radius:16px!important;
    padding:0 14px!important;
    z-index:58!important;
  }
  body.web-app-mode .turno-fab{bottom:80px!important}
  body.web-app-mode .emergency-fab{bottom:22px!important}

  /* Inicio paciente */
  body.web-app-mode .home-web-screen{
    grid-template-columns:minmax(300px,.72fr) minmax(560px,1.55fr);
    grid-auto-flow:row;
  }
  body.web-app-mode .home-web-screen .home-top-card{grid-column:1}
  body.web-app-mode .home-web-screen .home-agenda-card{grid-column:2;grid-row:1 / span 3;min-height:100%}
  body.web-app-mode .home-agenda-card .agenda-web-list{margin-top:18px}
  body.web-app-mode .health-hero{min-height:230px;display:flex;flex-direction:column;justify-content:center}
  body.web-app-mode .plan-home-cta,
  body.web-app-mode .plan-status-card{min-height:160px}

  /* Perfil paciente */
  body.web-app-mode .profile-web-screen{
    grid-template-columns:320px minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  body.web-app-mode .profile-top-card{grid-column:1;grid-row:1;padding:22px!important}
  body.web-app-mode .profile-top-tabs{
    grid-column:1;grid-row:2;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:10px!important;
    margin:0!important;
    border:1px solid rgba(235,255,246,.14);
    border-radius:22px;
    background:rgba(0,24,43,.76);
  }
  body.web-app-mode .profile-top-tabs button{
    min-height:50px!important;
    justify-content:flex-start!important;
    padding:10px 14px!important;
    border-radius:15px!important;
  }
  body.web-app-mode .profile-main-panel{grid-column:2;grid-row:1 / span 2;min-width:0}
  body.web-app-mode .profile-main-panel>.card,
  body.web-app-mode .profile-main-panel>.cred-card{margin-bottom:18px}
  body.web-app-mode .profile-main-panel>.card:last-child,
  body.web-app-mode .profile-main-panel>.cred-card:last-child{margin-bottom:0}
  body.web-app-mode .profile-hero{display:grid!important;grid-template-columns:90px 1fr!important;align-items:center!important}
  body.web-app-mode .avatar-wrap{width:90px;height:90px}
  body.web-app-mode .avatar-wrap>img{width:90px!important;height:90px!important}
  body.web-app-mode .profile-name-row{display:flex;align-items:flex-start;flex-direction:column;gap:10px!important}
  body.web-app-mode .profile-name-row h2{font-size:1.55rem;margin:0}
  body.web-app-mode .profile-photo-btn{margin-top:12px}
  body.web-app-mode .camera-btn{display:none!important}
  body.web-app-mode .patient-credential{max-width:780px;margin-inline:auto!important}

  /* Cartilla y gestiones */
  body.web-app-mode .cartilla-web-screen,
  body.web-app-mode .gestiones-web-screen{
    grid-template-columns:220px minmax(0,1fr);
  }
  body.web-app-mode .cartilla-head-card,
  body.web-app-mode .gestiones-head-card,
  body.web-app-mode .cart-plan-cta{grid-column:1 / -1}
  body.web-app-mode .cartilla-web-screen>.web-tabs,
  body.web-app-mode .gestiones-web-screen>.web-tabs{
    grid-column:1;
    display:grid!important;
    grid-template-columns:1fr!important;
    align-content:start;
    gap:8px!important;
    margin:0!important;
    padding:10px!important;
    border-radius:22px;
    border:1px solid rgba(235,255,246,.14);
    background:rgba(0,24,43,.76);
  }
  body.web-app-mode .cartilla-web-screen>.web-tabs button,
  body.web-app-mode .gestiones-web-screen>.web-tabs button{
    min-height:52px!important;
    justify-content:flex-start!important;
    border-radius:15px!important;
    padding:10px 13px!important;
  }
  body.web-app-mode .cartilla-web-screen>.web-panel,
  body.web-app-mode .gestiones-web-screen>.web-panel{grid-column:2;min-width:0}
  body.web-app-mode .web-panel>.card{margin-bottom:18px}
  body.web-app-mode .web-panel>.list,
  body.web-app-mode .pro-list,
  body.web-app-mode .recommendations-list,
  body.web-app-mode .patient-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body.web-app-mode .pro-list .empty,
  body.web-app-mode .recommendations-list .empty,
  body.web-app-mode .patient-list .empty{grid-column:1 / -1}
  body.web-app-mode .pro-card,
  body.web-app-mode .rec-item,
  body.web-app-mode .patient-card{height:100%}
  body.web-app-mode .gestiones-web-screen #gestionPanel>.list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

  /* Consultas y soporte */
  body.web-app-mode .screen:not(.home-web-screen):not(.profile-web-screen):not(.cartilla-web-screen):not(.gestiones-web-screen):not(.about-web-screen):has(>.chat-list){
    grid-template-columns:360px minmax(0,1fr);
  }
  body.web-app-mode .screen:has(>.chat-list)>.card{grid-column:1}
  body.web-app-mode .screen:has(>.chat-list)>.chat-list{grid-column:2;grid-row:1}
  body.web-app-mode .chat-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
  body.web-app-mode .chat-row{min-height:88px;padding:14px;text-align:left}
  body.web-app-mode .screen:has(#ticketForm){grid-template-columns:repeat(2,minmax(0,1fr))}
  body.web-app-mode .screen:has(#ticketForm)>.card:first-child{grid-column:1 / -1}
  body.web-app-mode .screen:has(#ticketForm)>.account-delete-card{grid-column:1 / -1}

  /* Profesional */
  body.web-app-mode .doctor-screen:has(.doctor-agenda-filter){
    grid-template-columns:340px minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  body.web-app-mode .doctor-screen .doctor-hero{grid-column:1;grid-row:1}
  body.web-app-mode .doctor-screen .doctor-agenda-filter{grid-column:1;grid-row:2;margin:0!important}
  body.web-app-mode .doctor-screen .agenda-list{grid-column:2;grid-row:1 / span 2}
  body.web-app-mode .doctor-metrics{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:9px!important}
  body.web-app-mode .doctor-metrics>div{min-width:0;padding:12px 8px!important}
  body.web-app-mode .doctor-actions-row{display:flex;gap:9px;flex-wrap:wrap}
  body.web-app-mode .doctor-turno{height:100%}
  body.web-app-mode .agenda-list,
  body.web-app-mode .agenda-web-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  body.web-app-mode .agenda-list>.empty,
  body.web-app-mode .agenda-web-list>.empty{grid-column:1 / -1}
  body.web-app-mode .doctor-screen:not(:has(.doctor-agenda-filter))>.card:first-child{grid-column:1 / -1}

  /* Sobre nosotros */
  body.web-app-mode .about-card-v16{
    display:grid!important;
    grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr)!important;
    gap:30px!important;
    align-items:center!important;
    padding:30px!important;
  }
  body.web-app-mode .about-media{display:grid;place-items:center}
  body.web-app-mode .creator-photo{width:min(100%,360px)!important;max-height:420px!important;margin:0!important}
  body.web-app-mode .legal-link-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* Modales y cajón */
  body.web-app-mode .modal{padding:30px!important}
  body.web-app-mode .modal-card{
    width:min(820px,calc(100vw - 64px))!important;
    max-width:820px!important;
    max-height:calc(100dvh - 60px)!important;
    padding:24px!important;
    border-radius:25px!important;
  }
  body.web-app-mode .modal-card:has(.chat-thread){width:min(900px,calc(100vw - 64px))!important;max-width:900px!important}
  body.web-app-mode .chat-thread{min-height:360px!important;max-height:52vh!important}
  body.web-app-mode .drawer{
    top:100px!important;
    right:20px!important;
    bottom:20px!important;
    left:auto!important;
    width:min(410px,calc(100vw - 40px))!important;
    transform:none!important;
    border-radius:25px!important;
  }
  body.web-app-mode .drawer-card{max-width:none!important;height:100%!important}

  /* Horarios y formularios densos */
  body.web-app-mode .schedule-range{grid-template-columns:1fr 1fr .9fr auto!important}
  body.web-app-mode .schedule-row{grid-template-columns:1.25fr .8fr .8fr .8fr!important}
  body.web-app-mode .history-grid.visual-history{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.web-app-mode .history-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}

/* Notebook angosta */
@media (min-width:960px) and (max-width:1240px){
  body.web-app-mode{--web-rail:218px;--web-gap:16px}
  body.web-app-mode .turno-fab,
  body.web-app-mode .emergency-fab{width:190px!important}
  body.web-app-mode .home-web-screen{grid-template-columns:300px minmax(0,1fr)}
  body.web-app-mode .profile-web-screen{grid-template-columns:280px minmax(0,1fr)}
  body.web-app-mode .web-panel>.list,
  body.web-app-mode .pro-list,
  body.web-app-mode .recommendations-list,
  body.web-app-mode .patient-list,
  body.web-app-mode .agenda-list,
  body.web-app-mode .agenda-web-list,
  body.web-app-mode .chat-list{grid-template-columns:1fr!important}
  body.web-app-mode .legal-link-grid{grid-template-columns:1fr!important}
}

/* Tablet: interfaz amplia, navegación inferior */
@media (min-width:760px) and (max-width:959.98px){
  body.web-app-mode .web-site-link{display:none}
  body.web-app-mode .app-main:not(.auth-mode){
    width:min(920px,calc(100vw - 28px))!important;
    max-width:none!important;
    margin:0 auto!important;
    padding:88px 0 112px!important;
  }
  body.web-app-mode .app-header,
  body.web-app-mode .bottom-nav{
    left:50%!important;
    width:min(920px,calc(100vw - 28px))!important;
    transform:translateX(-50%)!important;
  }
  body.web-app-mode .app-header{top:10px!important;height:64px!important;border-radius:22px!important}
  body.web-app-mode .bottom-nav{bottom:10px!important;height:82px!important;border-radius:24px!important}
  body.web-app-mode .bottom-nav button{flex-direction:row!important;gap:7px!important}
  body.web-app-mode .bottom-nav small{font-size:.76rem!important}
  body.web-app-mode .turno-fab,
  body.web-app-mode .emergency-fab{bottom:102px!important}
  body.web-app-mode .turno-fab{left:16px!important}
  body.web-app-mode .emergency-fab{right:16px!important}
  body.web-app-mode .screen{display:grid;gap:16px}
  body.web-app-mode .home-web-screen{grid-template-columns:1fr 1fr}
  body.web-app-mode .home-agenda-card{grid-column:1/-1}
  body.web-app-mode .profile-main-panel>.card,
  body.web-app-mode .profile-main-panel>.cred-card{margin-bottom:14px}
  body.web-app-mode .web-panel>.list,
  body.web-app-mode .pro-list,
  body.web-app-mode .patient-list,
  body.web-app-mode .recommendations-list,
  body.web-app-mode .agenda-list,
  body.web-app-mode .agenda-web-list,
  body.web-app-mode .chat-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  body.web-app-mode .web-panel>.list>.empty,
  body.web-app-mode .pro-list>.empty,
  body.web-app-mode .patient-list>.empty,
  body.web-app-mode .agenda-list>.empty{grid-column:1/-1}
  body.web-app-mode .modal-card{max-width:min(760px,calc(100vw - 38px))!important}
}

/* Mobile: se conserva la experiencia compacta de la app, con ajustes de alineación */
@media (max-width:759.98px){
  body.web-app-mode .web-site-link{display:none}
  body.web-app-mode .app-main.auth-mode{padding:14px 9px!important}
  body.web-app-mode .auth-screen{min-height:calc(100dvh - 28px)!important}
  body.web-app-mode .auth-card,
  body.web-app-mode .auth-card.auth-register-card{
    width:100%!important;
    max-width:460px!important;
    padding:21px 18px!important;
    border-radius:25px!important;
  }
  body.web-app-mode .auth-card h2{font-size:clamp(2.25rem,11vw,3rem)!important}
  body.web-app-mode .auth-logo{justify-content:flex-start}
  body.web-app-mode .section-head-row{display:grid;grid-template-columns:1fr}
  body.web-app-mode .web-head-actions{justify-content:stretch}
  body.web-app-mode .web-head-actions .btn{flex:1}
  body.web-app-mode .profile-main-panel>.card,
  body.web-app-mode .profile-main-panel>.cred-card,
  body.web-app-mode .web-panel>.card{margin-bottom:12px}
  body.web-app-mode .about-card-v16{display:block!important}
}

@media (max-width:430px){
  body.web-app-mode .grid.two{grid-template-columns:1fr!important}
  body.web-app-mode .auth-links{flex-direction:column;align-items:stretch;text-align:center}
  body.web-app-mode .section-title{font-size:1.35rem}
  body.web-app-mode .web-head-actions{display:grid;grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  body.web-app-mode *,body.web-app-mode *:before,body.web-app-mode *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* Ajustes finales de estructura */
@media (min-width:960px){
  body.web-app-mode:has(.app-header.hidden) .web-site-link{
    top:20px!important;
    left:20px!important;
    right:auto!important;
    bottom:auto!important;
    width:auto!important;
  }
  body.web-app-mode:has(.app-header:not(.hidden)) .web-site-link{
    top:auto!important;
    left:32px!important;
    right:auto!important;
    bottom:140px!important;
    width:220px!important;
  }
  body.web-app-mode .screen:has(>.doctor-profile-tabs){
    grid-template-columns:220px minmax(0,1fr);
  }
  body.web-app-mode .screen:has(>.doctor-profile-tabs)>.card:first-child{grid-column:1/-1}
  body.web-app-mode .doctor-profile-tabs{
    grid-column:1;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    align-content:start;
    margin:0!important;
    padding:10px!important;
    border:1px solid rgba(235,255,246,.14);
    border-radius:22px;
    background:rgba(0,24,43,.76);
  }
  body.web-app-mode .doctor-profile-tabs button{
    min-height:52px!important;
    justify-content:flex-start!important;
    border-radius:15px!important;
  }
  body.web-app-mode #doctorProfilePanel{grid-column:2;min-width:0}
  body.web-app-mode .profile-photo-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
}