/* ==========================================================
   Clinica - Responsive Profesional Total
   Version: 2026-06-15
   Objetivo: dashboard, modulos iframe, formularios, tablas, modales,
   portafolio y webs internas totalmente adaptables.
   ========================================================== */

:root{
  --rp-bg:#f4f8fb;
  --rp-surface:#ffffff;
  --rp-surface-soft:#f8fbff;
  --rp-ink:#0b1220;
  --rp-muted:#64748b;
  --rp-line:rgba(15,23,42,.10);
  --rp-brand:#0ea5a4;
  --rp-brand-2:#2563eb;
  --rp-danger:#dc2626;
  --rp-radius:20px;
  --rp-radius-lg:28px;
  --rp-shadow:0 18px 48px rgba(15,23,42,.10);
  --rp-shadow-soft:0 10px 26px rgba(15,23,42,.075);
}

html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img,
svg,
video,
canvas,
iframe{
  max-width:100%;
}

img{
  height:auto;
}

a,
button,
input,
select,
textarea{
  touch-action:manipulation;
}

button,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
.button,
a.button{
  min-width:0;
  white-space:normal;
}

input,
select,
textarea{
  max-width:100%!important;
}

textarea{
  resize:vertical;
}

/* Contenedores generales */
.wrap,
.container,
.contenedor,
.content,
.main-content,
.page,
.page-content,
section,
.panel,
.card,
.box,
.form-container,
.table-container{
  max-width:100%;
}

/* Scroll horizontal seguro solo cuando realmente hace falta */
.cs-table-scroll,
.clinic-table-scroll,
.table-wrap,
.table-responsive{
  width:100%;
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:visible;
  -webkit-overflow-scrolling:touch;
}

/* Tablas desktop prolijas */
table{
  max-width:100%;
}

table th,
table td{
  overflow-wrap:anywhere;
}

/* ==========================================================
   DASHBOARD: header + sidebar + KPIs
   ========================================================== */

body.cs-dashboard-page{
  min-width:0!important;
}

body.cs-dashboard-page header{
  max-width:calc(100% - 32px);
}

body.cs-dashboard-page .brand-left,
body.cs-dashboard-page .brand-title,
body.cs-dashboard-page .top-actions,
body.cs-dashboard-page .main,
body.cs-dashboard-page .panel,
body.cs-dashboard-page .kpi,
body.cs-dashboard-page .meta{
  min-width:0!important;
}

body.cs-dashboard-page .brand-title .t1,
body.cs-dashboard-page .brand-title .t2{
  overflow-wrap:anywhere;
  word-break:normal;
}

body.cs-dashboard-page .top-actions{
  flex-wrap:nowrap!important;
}

body.cs-dashboard-page .top-actions .btn{
  writing-mode:horizontal-tb!important;
  text-orientation:mixed!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  min-width:max-content;
}

body.cs-dashboard-page .top-actions .btn.icon{
  width:46px!important;
  min-width:46px!important;
  flex:0 0 46px!important;
}

body.cs-dashboard-page .kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))!important;
  gap:14px!important;
}

body.cs-dashboard-page .kpi{
  grid-column:auto!important;
  width:100%!important;
}

body.cs-dashboard-page .iframe-wrap{
  width:100%!important;
  min-height:560px;
}

.cs-sidebar-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:55;
  background:rgba(2,6,23,.54);
  backdrop-filter:blur(4px);
}

@media (max-width:900px){
  body.cs-dashboard-page header{
    margin:10px!important;
    max-width:calc(100% - 20px)!important;
    padding:14px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    border-radius:26px!important;
  }

  body.cs-dashboard-page .brand-left{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
  }

  body.cs-dashboard-page .brand-left img{
    width:58px!important;
    height:58px!important;
    max-width:58px!important;
    object-fit:contain!important;
    flex:0 0 58px!important;
  }

  body.cs-dashboard-page .brand-title .t1{
    font-size:17px!important;
    line-height:1.12!important;
  }

  body.cs-dashboard-page .brand-title .t2{
    font-size:13px!important;
    line-height:1.3!important;
  }

  body.cs-dashboard-page .top-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 48px 48px!important;
    gap:8px!important;
    align-items:stretch!important;
    overflow:visible!important;
  }

  body.cs-dashboard-page .top-actions .btn{
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    padding:9px 10px!important;
    border-radius:16px!important;
    justify-content:center!important;
    font-size:13px!important;
    line-height:1!important;
  }

  body.cs-dashboard-page .top-actions .btn.icon{
    width:48px!important;
    min-width:48px!important;
    padding:0!important;
  }

  body.cs-dashboard-page .app{
    padding:10px!important;
    gap:0!important;
  }

  body.cs-dashboard-page .sidebar{
    position:fixed!important;
    left:10px!important;
    top:116px!important;
    bottom:10px!important;
    width:min(320px,calc(100vw - 20px))!important;
    height:auto!important;
    max-height:calc(100dvh - 126px)!important;
    transform:translateX(calc(-100% - 24px))!important;
    z-index:70!important;
    border-radius:24px!important;
    transition:transform .22s ease!important;
  }

  body.cs-dashboard-page .sidebar.open{
    transform:translateX(0)!important;
  }

  body.cs-dashboard-page.cs-sidebar-open .cs-sidebar-backdrop{
    display:block;
  }

  body.cs-dashboard-page .main{
    width:100%!important;
  }

  body.cs-dashboard-page .panel{
    padding:12px!important;
    border-radius:24px!important;
  }

  body.cs-dashboard-page .dash-row{
    grid-template-columns:1fr!important;
  }

  body.cs-dashboard-page .iframe-wrap{
    height:calc(100dvh - 198px)!important;
    min-height:520px!important;
    border-radius:22px!important;
  }
}

@media (max-width:520px){
  body.cs-dashboard-page header{
    margin:8px!important;
    max-width:calc(100% - 16px)!important;
    padding:12px!important;
    gap:12px!important;
  }

  body.cs-dashboard-page .brand-left img{
    width:54px!important;
    height:54px!important;
    max-width:54px!important;
    border-radius:16px!important;
  }

  body.cs-dashboard-page .brand-title .t1{
    font-size:16px!important;
  }

  body.cs-dashboard-page .brand-title .t2{
    font-size:12px!important;
  }

  body.cs-dashboard-page .top-actions{
    grid-template-columns:1fr 1fr 44px 44px!important;
    gap:7px!important;
  }

  body.cs-dashboard-page .top-actions .btn{
    height:44px!important;
    min-height:44px!important;
    border-radius:14px!important;
    padding:8px!important;
    font-size:12px!important;
    gap:6px!important;
  }

  body.cs-dashboard-page .top-actions .btn.icon{
    width:44px!important;
    min-width:44px!important;
  }

  body.cs-dashboard-page .top-actions .btn i{
    margin:0!important;
    flex:0 0 auto!important;
  }

  body.cs-dashboard-page .kpi{
    min-height:0!important;
    padding:14px!important;
    border-radius:20px!important;
  }

  body.cs-dashboard-page .kpi .meta .v{
    font-size:20px!important;
  }

  body.cs-dashboard-page .card{
    border-radius:20px!important;
  }

  body.cs-dashboard-page .iframe-wrap{
    height:calc(100dvh - 188px)!important;
    min-height:470px!important;
  }
}

@media (max-width:390px){
  body.cs-dashboard-page .top-actions{
    grid-template-columns:1fr 1fr 42px 42px!important;
  }

  body.cs-dashboard-page .top-actions a.btn:not(.icon){
    font-size:0!important;
  }

  body.cs-dashboard-page .top-actions a.btn:not(.icon) i{
    font-size:14px!important;
  }

  body.cs-dashboard-page .top-actions a.btn.primary::after{
    content:"Password";
    font-size:12px!important;
  }

  body.cs-dashboard-page .top-actions a.btn[href*="logout"]::after{
    content:"Salir";
    font-size:12px!important;
  }
}

/* ==========================================================
   TABLAS EN MOBILE -> TARJETAS PROFESIONALES
   ========================================================== */

@media (max-width:760px){
  table.cs-stack-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    overflow:visible!important;
  }

  table.cs-stack-table thead,
  table.cs-stack-table colgroup{
    display:none!important;
  }

  table.cs-stack-table tbody{
    display:grid!important;
    width:100%!important;
    gap:12px!important;
  }

  table.cs-stack-table tr{
    display:block!important;
    width:100%!important;
    border:1px solid var(--rp-line)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:var(--rp-shadow-soft)!important;
    overflow:hidden!important;
    padding:7px!important;
  }

  table.cs-stack-table td{
    display:grid!important;
    grid-template-columns:minmax(102px,38%) minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    padding:10px!important;
    border:0!important;
    border-bottom:1px solid rgba(15,23,42,.07)!important;
    text-align:left!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    background:transparent!important;
  }

  table.cs-stack-table td:last-child{
    border-bottom:0!important;
  }

  table.cs-stack-table td::before{
    content:attr(data-label);
    display:block;
    min-width:0;
    color:#64748b;
    font-size:11px;
    line-height:1.2;
    font-weight:950;
    letter-spacing:.055em;
    text-transform:uppercase;
  }

  table.cs-stack-table td[data-label=""]::before{
    content:"Dato";
  }

  table.cs-stack-table td .btn,
  table.cs-stack-table td button,
  table.cs-stack-table td a.btn,
  table.cs-stack-table td input[type="submit"],
  table.cs-stack-table td input[type="button"]{
    width:auto;
    max-width:100%;
    margin:2px 4px 2px 0;
  }

  .dataTables_wrapper,
  .dataTables_scroll,
  .dataTables_scrollBody{
    width:100%!important;
    overflow-x:auto!important;
  }
}

@media (max-width:420px){
  table.cs-stack-table td{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }

  table.cs-stack-table td::before{
    margin-bottom:2px;
  }
}

/* ==========================================================
   FORMULARIOS, FILTROS, BOTONES Y MODALES
   ========================================================== */

.topbar,
.searchbar,
.actions,
.filters,
.filtros,
.filter-bar,
.form-actions,
.btn-group{
  max-width:100%;
}

@media (max-width:760px){
  .wrap,
  .container,
  .contenedor,
  .content,
  .main-content{
    width:100%!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .topbar,
  .searchbar,
  .actions,
  .filters,
  .filtros,
  .filter-bar,
  .form-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }

  .topbar > *,
  .searchbar > *,
  .actions > *,
  .filters > *,
  .filtros > *,
  .filter-bar > *,
  .form-actions > *{
    min-width:0!important;
    width:100%;
  }

  .actions .btn,
  .form-actions .btn,
  .searchbar .btn,
  .topbar .btn,
  .actions button,
  .form-actions button,
  .searchbar button,
  .topbar button,
  .actions input[type="submit"],
  .form-actions input[type="submit"]{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
  }

  form{
    width:100%;
    max-width:100%;
  }

  .row{
    margin-left:0!important;
    margin-right:0!important;
  }

  [class*="col-"]{
    max-width:100%;
  }

  input,
  select,
  textarea,
  .form-control,
  .form-select{
    width:100%!important;
    min-width:0!important;
  }

  .modal-dialog,
  .modal-content,
  .modal-contenido,
  .modal-box{
    max-width:calc(100vw - 20px)!important;
  }

  .modal-dialog,
  .modal-content,
  .modal-contenido,
  .modal-box{
    width:calc(100vw - 20px)!important;
    margin:10px auto!important;
    border-radius:22px!important;
  }

  .modal-body,
  .modal-header,
  .modal-footer{
    padding:14px!important;
  }

  .modal-footer,
  .modal-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }

  .modal-footer .btn,
  .modal-actions .btn,
  .modal-actions a,
  .modal-actions button{
    width:100%!important;
  }

  iframe,
  .modal-iframe,
  .modal-frame{
    min-height:420px;
  }
}

/* Bootstrap y Tailwind: evitar columnas duras en pantallas chicas */
@media (max-width:640px){
  [class*="grid-cols-"],
  .grid-tech,
  .grid-cards,
  .cards-grid,
  .feature-grid,
  .smart-grid,
  .services-grid,
  .especialidades-grid,
  .benefits-grid,
  .hero-cards,
  .demo-row,
  .stats-grid,
  .kpi-grid{
    grid-template-columns:1fr!important;
  }

  .d-flex,
  .flex{
    max-width:100%;
  }
}

/* ==========================================================
   LOGIN
   ========================================================== */

@media (max-width:1180px){
  .login-page{
    padding:18px!important;
  }

  .login-shell{
    min-height:auto!important;
    grid-template-columns:1fr!important;
  }

  .login-hero{
    min-height:auto!important;
  }
}

@media (max-width:720px){
  .login-page{
    padding:10px!important;
    align-items:flex-start!important;
  }

  .login-shell{
    width:100%!important;
    border-radius:26px!important;
  }

  .login-hero{
    padding:26px!important;
    border-radius:0!important;
  }

  .brand{
    align-items:center!important;
    gap:12px!important;
  }

  .brand-logo{
    width:64px!important;
    height:64px!important;
    border-radius:18px!important;
  }

  .brand h3{
    font-size:18px!important;
  }

  .brand p{
    font-size:13px!important;
  }

  .hero-content h1,
  .login-hero h1{
    font-size:clamp(34px,11vw,48px)!important;
    line-height:1!important;
    letter-spacing:-.055em!important;
  }

  .hero-content p,
  .login-hero p{
    font-size:16px!important;
    line-height:1.55!important;
  }

  .hero-cards,
  .demo-row{
    grid-template-columns:1fr!important;
  }

  .login-panel-wrap,
  .login-panel{
    width:100%!important;
    max-width:100%!important;
    padding:22px!important;
  }

  .field{
    width:100%!important;
  }
}

/* ==========================================================
   PORTAFOLIO
   ========================================================== */

.header .cs-nav-toggle{
  display:none;
}

@media (max-width:780px){
  .header .header-inner{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:center!important;
    gap:12px!important;
  }

  .header .brand-link{
    min-width:0!important;
  }

  .header .brand,
  .header .brand-texto{
    min-width:0!important;
  }

  .header .brand-texto{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:22px!important;
  }

  .header .cs-nav-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    border-radius:15px!important;
    border:1px solid rgba(15,23,42,.12)!important;
    background:#fff!important;
    color:#0b1220!important;
    font-weight:900!important;
    box-shadow:var(--rp-shadow-soft)!important;
  }

  .header .nav{
    grid-column:1 / -1!important;
    width:100%!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
    padding:8px 0 0!important;
  }

  .header.cs-nav-open .nav{
    display:flex!important;
  }

  .header .nav a,
  .header .nav button,
  .header .btn-principal,
  .header .btn-secundario{
    width:100%!important;
    min-width:0!important;
    justify-content:center!important;
    white-space:normal!important;
  }

  .hero-main h1{
    font-size:clamp(34px,10vw,48px)!important;
    line-height:1.02!important;
    letter-spacing:-.05em!important;
  }

  .hero-panel,
  .panel,
  .feature-panel,
  .smart-panel,
  .cta-panel{
    border-radius:24px!important;
  }

  .hero-main,
  .panel-header,
  .cards-wrap,
  .feature-header,
  .feature-grid,
  .smart-grid,
  .cta-main,
  .cta-side{
    padding:22px!important;
  }
}

/* ==========================================================
   WEBS INTERNAS / LANDINGS
   ========================================================== */

body > nav .cs-web-nav-toggle{
  display:none;
}

@media (max-width:820px){
  body > nav{
    padding:14px 16px!important;
    gap:12px!important;
    flex-wrap:wrap!important;
  }

  body > nav .logo{
    min-width:0!important;
    max-width:calc(100% - 60px)!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:clamp(1.15rem,5vw,1.55rem)!important;
  }

  body > nav .cs-web-nav-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    margin-left:auto!important;
    border-radius:14px!important;
    border:1px solid rgba(15,23,42,.12)!important;
    background:#fff!important;
    color:#0b1220!important;
    font-size:20px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.10)!important;
  }

  body > nav .nav-links{
    display:none!important;
    flex:0 0 100%!important;
    width:100%!important;
    margin:0!important;
    padding:10px 0 0!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }

  body > nav.cs-nav-open .nav-links{
    display:flex!important;
  }

  body > nav .nav-links a{
    display:flex!important;
    width:100%!important;
    min-height:44px!important;
    margin:0!important;
    padding:11px 13px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
    background:rgba(255,255,255,.86)!important;
    border:1px solid rgba(15,23,42,.10)!important;
    color:inherit;
    text-align:center!important;
    white-space:normal!important;
  }

  .hero{
    min-height:auto!important;
    height:auto!important;
    padding-top:7rem!important;
    padding-bottom:3.5rem!important;
  }

  .hero-content{
    width:100%!important;
    max-width:100%!important;
    padding-left:1rem!important;
    padding-right:1rem!important;
  }

  .hero h1,
  h1{
    max-width:100%!important;
    font-size:clamp(2rem,10vw,3.2rem)!important;
    line-height:1.05!important;
    letter-spacing:-.05em;
    overflow-wrap:normal;
    word-break:normal;
  }

  .hero p{
    font-size:1rem!important;
    line-height:1.6!important;
  }

  .section-header h2,
  h2{
    font-size:clamp(1.8rem,8vw,2.5rem)!important;
    line-height:1.08!important;
  }

  .grid-tech,
  .grid,
  .cards,
  .services,
  .features,
  .especialidades,
  .tratamientos,
  .proceso,
  .stats,
  .benefits{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:520px){
  .hero{
    padding-top:6.5rem!important;
  }

  section,
  .estudios,
  .servicios,
  .especialidades,
  .tratamientos,
  .features,
  .benefits,
  .cta{
    padding-left:1rem!important;
    padding-right:1rem!important;
  }

  .btn-cta,
  .btn-nav,
  .btn-reserva,
  .btn-resultados,
  .btn-portal,
  .btn-turno,
  .btn-contacto,
  .btn-urgencias,
  .btn-principal,
  .btn-secundario,
  .btn-demo,
  .btn-module{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:normal!important;
  }
}

/* ==========================================================
   Afinado para pantallas muy chicas
   ========================================================== */

@media (max-width:360px){
  body{
    font-size:14px!important;
  }

  .wrap,
  .container,
  .contenedor,
  .content,
  .main-content{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  .panel,
  .card,
  .box,
  .form-container,
  .table-container{
    border-radius:18px!important;
    padding:12px!important;
  }

  button,
  .btn,
  a.btn{
    font-size:13px!important;
  }
}