/* SeibFIT 3.4 — solo mejoras responsive para tablets y escritorio.
   Los estilos de celulares (menos de 700 CSS px, o landscape bajo)
   permanecen sin cambios. No hay migraciones ni lógica de datos nueva. */

/* TABLET VERTICAL: tamaño intermedio sin estirar las tarjetas del teléfono. */
@media (min-width:700px) and (max-width:959px) and (min-height:600px) and (orientation:portrait){
  .app-shell {max-width:920px; margin-inline:auto;}
  .app-header {padding-left:clamp(24px,4vw,38px)!important;padding-right:clamp(24px,4vw,38px)!important;}
  main#content {padding:27px clamp(24px,4vw,38px) 115px!important;}
  .home-intro,.home-today,.grid3,.quick-grid,.section-label,.home-consistency {max-width:100%;}
  .home-identity h1 {font-size:clamp(32px,4.5vw,42px);}
  .settings-accordion,.profile-card{border-radius:20px;}
  .settings-accordion .accordion-content .field input{width:100%;}
  .settings-accordion .accordion-content .button.full{width:min(100%,360px);}
  .modal {width:min(620px,100%);max-height:min(86dvh,840px);}
  .modal:has(.catalog-list){width:min(740px,100%);}
  .modal:has(.guide-tech){width:min(680px,100%);}
  .modal .catalog-row{gap:16px;}
  .modal .catalog-row-actions{flex-shrink:0;}
  .editor-panel,.editor-ex,.editor-save-footer,.auto-backups{border-radius:19px;}
}

/* Tablet ancho, especialmente iPad Pro vertical. El sidebar para escritorio
   del CSS original no se debe aplicar a una pantalla táctil vertical. */
@media (min-width:960px) and (max-width:1366px) and (min-height:650px) and (pointer:coarse) and (orientation:portrait){
  .app-shell {max-width:1100px; padding:0 0 112px!important; margin:0 auto;}
  .app-header {padding:14px 34px!important;min-height:84px!important;height:auto!important;}
  main#content {padding:30px 38px 120px!important;max-width:100%;margin-inline:auto;}
  .bottom-nav {position:fixed;top:auto;bottom:0;left:0;transform:none;max-width:none;width:100%;height:calc(76px + env(safe-area-inset-bottom,0px));flex-direction:row;justify-content:space-around;gap:0;border-right:0;border-top:1px solid var(--border);padding:9px 20px calc(10px + env(safe-area-inset-bottom,0px))!important;}
  .bottom-nav .nav-item{width:auto;height:auto;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:5px;}
  .bottom-nav .nav-item svg{width:23px;height:23px;}
  .modal {width:min(660px,100%);max-height:88dvh;}
  .modal:has(.catalog-list){width:min(820px,100%);}
  .settings-accordion .accordion-content .button.full{width:min(100%,390px);}
  .rest-bar{left:26px;right:26px;bottom:calc(96px + env(safe-area-inset-bottom,0px));max-width:none;margin:0;}
}

/* PC: distribución independiente de la versión móvil; barra lateral real,
   límite de anchura y aire equilibrado en pantallas grandes. */
@media (min-width:960px) and (pointer:fine){
  .app-shell{
    width:min(100%,1320px);
    max-width:1320px;
    min-height:100dvh;
    margin-inline:auto;
    padding:0 0 64px 164px!important;
  }
  .app-header{
    min-height:88px!important;
    height:88px!important;
    padding:0 clamp(30px,3vw,46px)!important;
    gap:24px;
    background:linear-gradient(105deg,#121115,#0c0d11 80%);
  }
  .app-header .brand{min-width:0;}
  .app-header .brand-mark{flex-shrink:0;}
  .app-header .header-actions{flex-shrink:0;}
  .bottom-nav{
    position:fixed;
    top:0;
    bottom:auto;
    left:max(0px,calc((100vw - 1320px)/2));
    transform:none;
    width:164px;
    max-width:164px;
    height:100dvh;
    padding:112px 12px 24px!important;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:12px;
    border:0;
    border-right:1px solid #42313a;
    background:linear-gradient(180deg,#101015,#0c0b10 82%);
    backdrop-filter:blur(18px);
  }
  .bottom-nav .nav-item{
    flex:0 0 auto;
    width:100%;
    min-width:0;
    min-height:53px;
    height:auto;
    padding:11px 12px;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    border-radius:14px;
    font-size:12px;
    white-space:nowrap;
    transition:background-color .16s ease,color .16s ease;
  }
  .bottom-nav .nav-item svg{width:21px!important;height:21px!important;flex-shrink:0;}
  .bottom-nav .nav-item:hover{background:#29212a;color:#f8d9df;}
  .bottom-nav .nav-item.active{background:#55212c;color:#ff7b8c;}
  main#content{
    width:100%;
    max-width:1160px;
    margin-inline:auto;
    padding:35px clamp(27px,3.1vw,46px) 65px!important;
    min-width:0;
  }
  main#content .page-title{font-size:clamp(34px,3.2vw,44px);line-height:1.1;}
  main#content .subtitle{max-width:70ch;}
  main#content .section-label{margin-block:29px 15px;gap:16px;}
  main#content .card,main#content .editor-panel,main#content .editor-ex,main#content .editor-save-footer{border-radius:20px;min-width:0;}
  main#content .home-intro{margin-bottom:24px;}
  main#content .home-identity{gap:25px;}
  main#content .home-today{padding:30px clamp(30px,3.4vw,42px);}
  main#content .home-today-copy h2{max-width:23ch;font-size:clamp(30px,3.3vw,46px);}
  main#content .home-today-copy p{max-width:58ch;}
  main#content .home-metrics{gap:16px;}
  main#content .home-metrics .stat{padding:20px 24px;}
  main#content .quick-grid{gap:14px;}
  main#content .quick-tile{min-height:128px;padding:20px 18px;border-radius:18px;}
  main#content .quick-tile b{font-size:14px;}
  main#content .quick-tile small{font-size:11px;}
  main#content .workout-heading{gap:22px;}
  main#content .day-row{scrollbar-width:thin;overflow-x:auto;flex-wrap:nowrap;gap:11px;}
  main#content .day-chip{min-width:87px;border-radius:16px;}
  main#content .exercise-card{max-width:100%;overflow:clip;}
  main#content .exercise-head,main#content .exercise-meta{gap:14px;}
  main#content .editor-ex-list{gap:15px;}
  main#content .editor-controls button{min-height:57px;transition:background .15s,border-color .15s,transform .15s;}
  main#content .editor-controls button:hover{background:#40212d;border-color:#a83a51;}
  main#content .editor-save-footer{padding:21px;}
  main#content .editor-save-footer .button{max-width:460px;margin-inline:auto;}
  main#content .editor-save-footer .small-copy{max-width:70ch;margin-inline:auto;}
  /* Ajustes: formularios con una medida legible, sin botones kilométricos. */
  main#content:has(.settings-accordion){max-width:1020px;}
  main#content .profile-card{max-width:100%;padding:21px 25px;border-radius:20px;min-width:0;}
  main#content .profile-card > div:last-child{min-width:0;}
  main#content .settings-accordion{max-width:100%;border-radius:19px;margin-top:14px;}
  main#content .settings-accordion>summary{
    min-height:78px;
    grid-template-columns:42px minmax(0,1fr);
    column-gap:15px;
    padding:16px 23px;
    align-content:center;
    padding-right:56px;
  }
  main#content .settings-accordion>summary>span{width:39px;height:39px;border-radius:12px;}
  main#content .settings-accordion>summary b{font-size:14px;}
  main#content .settings-accordion>summary small{font-size:11px;}
  main#content .settings-accordion>summary::after{right:24px;top:calc(50% - 15px);}
  main#content .settings-accordion>summary:hover{background:#ffffff06;}
  main#content .settings-accordion>summary:focus-visible{outline:2px solid #fa4c64;outline-offset:-3px;border-radius:15px;}
  main#content .settings-accordion .accordion-content{padding:23px 25px 25px;min-width:0;}
  main#content #seibProfileForm, main#content .settings-accordion .accordion-content>.field {max-width:720px;}
  main#content .settings-accordion .field{min-width:0;}
  main#content .settings-accordion .field input{max-width:100%;width:100%;}
  main#content .settings-accordion .form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  main#content .settings-accordion .accordion-content .button.full{width:min(100%,350px);}
  main#content #seibProfileForm .button.full{margin-top:6px;}
  main#content .settings-accordion .auto-backups{max-width:100%;border-radius:17px;padding:18px 20px;overflow-wrap:anywhere;}
  main#content .settings-accordion .backup-entry{gap:18px;}
  main#content .settings-accordion .backup-entry > *{min-width:0;}
  main#content .settings-accordion .backup-entry .button{width:auto;flex-shrink:0;}
  main#content .settings-accordion .flex.wrap{gap:10px;}
  main#content .settings-accordion .accordion-content p{max-width:82ch;line-height:1.55;}
  .modal-backdrop{
    padding:clamp(24px,4vh,52px) clamp(24px,4vw,72px);
    overflow-x:hidden;
    overflow-y:auto;
  }
  .modal{
    width:min(640px,100%);
    max-width:100%;
    max-height:min(88dvh,900px);
    padding:26px 30px 29px;
    border-radius:23px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .modal:has(.catalog-list){width:min(860px,100%);}
  .modal:has(.guide-tech),.modal:has(.technique-panel){width:min(740px,100%);}
  .modal:has(#deleteConfirmText){width:min(560px,100%);}
  .modal .modal-footer{gap:12px;justify-content:flex-end;}
  .modal .modal-footer .button{min-width:120px;}
  .modal .catalog-search-wrap{margin-top:10px;}
  .modal .catalog-row{gap:22px;padding:15px 0;min-width:0;}
  .modal .catalog-row-main{min-width:0;overflow-wrap:anywhere;}
  .modal .catalog-row-main b{font-size:14px;}
  .modal .catalog-row-actions{flex-shrink:0;gap:9px;}
  .modal .catalog-row-actions .button{min-width:102px;min-height:39px;}
  .modal .field input,.modal .field select,.modal .field textarea{max-width:100%;}
  .modal .form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .modal .frame-pair{max-width:650px;margin-inline:auto;}
  .modal .guide-links{grid-template-columns:repeat(2,minmax(0,1fr));}
  .modal .guide-links .button{max-width:100%;}
  .modal .guide-tech{max-width:100%;}
  .modal h2{font-size:clamp(22px,2.3vw,28px);}
  .modal .close:hover{background:#632b37;}
  .rest-bar{
    left:calc(50% - min((100vw - 164px)/2,500px) + 82px);
    right:auto;
    width:min(760px,calc(100vw - 210px));
    max-width:760px;
    bottom:20px;
    margin:0;
    padding:15px 20px;
  }
  body.rest-active #content{padding-bottom:165px!important;}
  .toast{max-width:min(440px,calc(100vw - 48px));}
}

/* Pantallas cortas de notebook: no sacar las ventanas fuera de la pantalla. */
@media (min-width:960px) and (pointer:fine) and (max-height:700px){
  .modal-backdrop{padding:14px 28px;align-items:center;}
  .modal{max-height:calc(100dvh - 28px);padding-block:19px;}
  .bottom-nav{padding-top:94px!important;gap:5px;}
  .bottom-nav .nav-item{min-height:49px;}
}

@media (min-width:960px) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .bottom-nav .nav-item,.editor-controls button{transition:none!important;}
}