/*
 * CS Integrador · v1.1.86
 * Responsive global: PC / tablet / móvil
 * Prioridad: acciones y botones contenidos dentro de tablas/listados.
 */

:root{
  --cs-responsive-gap:.625rem;
  --cs-mobile-card-radius:14px;
  --cs-mobile-card-border:#dce5ec;
  --cs-mobile-label:#607186;
}

html,body{max-width:100%}
body{overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}

:where(main,section,article,aside,nav,header,footer,form,fieldset,.container,.panel,.card,.dashboard-content,.dashboard-section,.stage-panel,.continuity-client-shell)>*{
  min-width:0;
}

:where(img,svg,video,canvas,iframe){max-width:100%;height:auto}
:where(input,select,textarea,button){min-width:0;max-width:100%}

:where(
  button,.button,.btn,a.button,a.btn,
  input[type="submit"],input[type="button"],input[type="reset"]
){
  max-width:100%;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  text-align:center;
}

:where(
  .actions,.action-group,.button-group,.form-actions,.card-actions,.table-actions,
  .request-action-stack,.project-action-stack-v1183-fix3,
  .document-actions,.payment-actions,.toolbar-actions,.modal-actions,
  .stage-action-stack,.stage-payment-actions,.stage-document-actions,.stage-quote-decision,
  .continuity-actions,.continuity-client-actions,.new-request-compact-actions,
  .dashboard-project-actions-v1182,.admin-request-action-parity,
  .admin-client-project-actions-v1185,.license-actions
){
  min-width:0;
  max-width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:var(--cs-responsive-gap);
}

/* Cualquier tabla real recibe un shell seguro en escritorio/tablet. */
.responsive-table-shell-v1186{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.responsive-table-shell-v1186>table{
  max-width:none;
}

/* Texto largo nunca puede empujar botones fuera de su celda. */
:where(
  td,th,.request-row-title,.request-row-description,.request-row-ref,
  .admin-reference,.admin-stage-reference,.admin-client-project-title-v1185,
  .file-name,.document-name,.document-title,.license-ref,.license-cell,
  .payment-reference,.request-reference
){
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Tablet: se permite wrap de las acciones sin cambiar el lenguaje de escritorio. */
@media(max-width:980px){
  :where(
    .actions,.action-group,.button-group,.form-actions,.card-actions,.table-actions,
    .request-action-stack,.project-action-stack-v1183-fix3,
    .document-actions,.payment-actions,.toolbar-actions,.modal-actions,
    .stage-action-stack,.stage-payment-actions,.stage-document-actions,.stage-quote-decision,
    .continuity-actions,.continuity-client-actions,.admin-client-project-actions-v1185,.license-actions
  )>:where(button,.button,.btn,a.button,a.btn,input[type="submit"],input[type="button"]){
    flex:1 1 10rem;
  }
}

/* =====================================================================
   MÓVIL
   - No desplazamiento horizontal como patrón principal.
   - Tablas reales => tarjetas.
   - Listados grid => una columna.
   - Botones de acciones => ancho total.
   ===================================================================== */
@media(max-width:760px){

  :where(
    .actions,.action-group,.button-group,.form-actions,.card-actions,.table-actions,
    .request-action-stack,.project-action-stack-v1183-fix3,
    .document-actions,.payment-actions,.toolbar-actions,.modal-actions,
    .stage-action-stack,.stage-payment-actions,.stage-document-actions,.stage-quote-decision,
    .continuity-actions,.continuity-client-actions,.new-request-compact-actions,
    .dashboard-project-actions-v1182,.admin-request-action-parity,
    .admin-client-project-actions-v1185,.license-actions
  ){
    width:100%;
    align-items:stretch;
    justify-content:stretch;
    flex-direction:column;
  }

  :where(
    .actions,.action-group,.button-group,.form-actions,.card-actions,.table-actions,
    .request-action-stack,.project-action-stack-v1183-fix3,
    .document-actions,.payment-actions,.toolbar-actions,.modal-actions,
    .stage-action-stack,.stage-payment-actions,.stage-document-actions,.stage-quote-decision,
    .continuity-actions,.continuity-client-actions,.new-request-compact-actions,
    .dashboard-project-actions-v1182,.admin-request-action-parity,
    .admin-client-project-actions-v1185,.license-actions
  )>:where(button,.button,.btn,a.button,a.btn,input[type="submit"],input[type="button"],form){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    flex:1 1 auto!important;
  }

  :where(
    td,.responsive-actions-cell-v1186,
    .request-table-actions,.license-actions,
    .admin-client-project-actions-v1185
  ) :where(button,.button,.btn,a.button,a.btn,input[type="submit"],input[type="button"]){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    white-space:normal!important;
  }

  :where(td,.responsive-actions-cell-v1186) form{
    width:100%;
    max-width:100%;
    margin:.35rem 0 0;
  }

  /* ---------------------------------------------------------------
     TABLAS HTML: tarjeta semántica por fila.
     El runtime añade data-label usando los TH existentes.
     --------------------------------------------------------------- */
  .responsive-table-shell-v1186{
    overflow:visible!important;
    max-height:none!important;
    border:0!important;
  }

  table.responsive-data-table-v1186{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    border-collapse:separate!important;
    border-spacing:0!important;
  }

  table.responsive-data-table-v1186 thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  table.responsive-data-table-v1186 tbody{
    display:grid!important;
    width:100%!important;
    min-width:0!important;
    gap:12px!important;
  }

  table.responsive-data-table-v1186 tbody>tr{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid var(--cs-mobile-card-border)!important;
    border-radius:var(--cs-mobile-card-radius)!important;
    background:#fff!important;
    box-shadow:0 5px 16px rgba(17,53,78,.04)!important;
  }

  table.responsive-data-table-v1186 tbody>tr[hidden]{
    display:none!important;
  }

  table.responsive-data-table-v1186 tbody>tr>td{
    display:grid!important;
    grid-template-columns:minmax(96px,.42fr) minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px 12px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:11px 13px!important;
    border:0!important;
    border-bottom:1px solid #edf2f6!important;
    white-space:normal!important;
    text-align:left!important;
  }

  table.responsive-data-table-v1186 tbody>tr>td:last-child{
    border-bottom:0!important;
  }

  table.responsive-data-table-v1186 tbody>tr>td::before{
    content:attr(data-label);
    min-width:0;
    color:var(--cs-mobile-label);
    font-size:.69rem;
    font-weight:800;
    letter-spacing:.055em;
    line-height:1.35;
    text-transform:uppercase;
    overflow-wrap:anywhere;
  }

  table.responsive-data-table-v1186 tbody>tr>td[data-label=""],
  table.responsive-data-table-v1186 tbody>tr>td[colspan]{
    grid-template-columns:1fr!important;
  }

  table.responsive-data-table-v1186 tbody>tr>td[data-label=""]::before,
  table.responsive-data-table-v1186 tbody>tr>td[colspan]::before{
    display:none!important;
  }

  table.responsive-data-table-v1186 tbody>tr>td.responsive-actions-cell-v1186{
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  table.responsive-data-table-v1186 tbody>tr>td.responsive-actions-cell-v1186::before{
    display:block!important;
    margin-bottom:1px;
  }

  /* ---------------------------------------------------------------
     MI ESPACIO: neutraliza reglas antiguas de 810/920/980px.
     --------------------------------------------------------------- */
  :where(
    .dashboard-table-shell-active,.project-table-shell-v1183,
    .dashboard-table-shell,.archived-table-shell
  ){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
  }

  :where(
    .dashboard-table-shell-active .dashboard-table-head,
    .project-table-shell-v1183 .project-table-head-v1183,
    .dashboard-table-head
  ){
    display:none!important;
  }

  :where(
    .dashboard-table-shell-active .dashboard-scroll-list,
    .project-table-shell-v1183 .project-scroll-list-v1183,
    .dashboard-scroll-list,.dashboard-scroll-list-archived
  ){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
  }

  :where(
    .dashboard-table-shell-active .request-table-row,
    .project-table-shell-v1183 .project-table-row-v1183,
    .dashboard-table-shell .request-table-row,
    .request-table-row
  ){
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:10px!important;
    padding:15px!important;
    margin:0!important;
  }

  :where(
    .dashboard-table-shell-active .request-table-cell .cell-label,
    .project-table-shell-v1183 .request-table-cell .cell-label,
    .request-table-cell .cell-label
  ){
    display:block!important;
  }

  :where(
    .dashboard-table-shell-active .request-table-actions,
    .project-table-shell-v1183 .request-table-actions,
    .request-table-actions
  ){
    justify-self:stretch!important;
    width:100%!important;
  }

  :where(
    .dashboard-table-shell-active .request-action-stack,
    .project-table-shell-v1183 .request-action-stack,
    .request-action-stack,
    .project-action-stack-v1183-fix3
  ){
    width:100%!important;
    align-items:stretch!important;
  }

  :where(
    .dashboard-table-shell-active .request-open-btn,
    .dashboard-table-shell-active .request-action-stack .button,
    .project-table-shell-v1183 .request-open-btn,
    .project-table-shell-v1183 .request-action-stack .button,
    .project-action-stack-v1183-fix3 .button
  ){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  /* Etapas desplegadas de proyectos (usuario / retirados). */
  .project-stages-panel-v1183-fix3{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    overflow:visible!important;
  }

  .project-stage-record-v1183-fix3{
    min-width:0!important;
    width:100%!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  /* ---------------------------------------------------------------
     ADMIN v1.1.85: Cliente + Proyecto.
     --------------------------------------------------------------- */
  .cs-admin-table-scroll-v1176-fix3{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
  }

  .cs-admin-table-scroll-v1176-fix3>.cs-admin-project-table-v1176-fix3,
  table.admin-request-table,
  table.admin-request-table-v1185,
  .admin-requests-table{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .admin-client-project-detail-shell-v1185{
    width:auto!important;
    max-width:100%!important;
    margin:0!important;
    padding:11px!important;
    overflow:hidden!important;
  }

  .admin-client-project-stage-list-v1185{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .admin-client-project-stage-v1185{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:9px!important;
    padding:12px!important;
  }

  .admin-client-project-stage-v1185>.button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  .admin-client-project-stage-index-v1185{
    margin-bottom:2px;
  }

  /* ---------------------------------------------------------------
     LICENCIAS: neutraliza filas de 1060/1250px.
     --------------------------------------------------------------- */
  .license-table-shell{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:visible!important;
  }

  .license-table-head{display:none!important}

  .license-scroll-list{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    display:grid!important;
    gap:12px!important;
  }

  .license-table-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:9px!important;
    padding:14px!important;
    border:1px solid var(--cs-mobile-card-border)!important;
    border-radius:var(--cs-mobile-card-radius)!important;
  }

  .license-cell-label{
    display:block!important;
  }

  .license-actions{
    width:100%!important;
    align-items:stretch!important;
  }

  .license-actions .button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  /* Grids/paneles de formularios y cabeceras. */
  :where(
    .field-grid,.form-grid,.admin-form-grid,.request-form-grid,.quote-form-grid,
    .filter-grid,.admin-filter-grid,.analytics-filter-grid,.stage-form-grid,
    .stage-upload-grid,.continuity-field-grid,.continuity-choice-grid
  ){
    grid-template-columns:1fr!important;
  }

  :where(
    .dashboard-head-row,.dashboard-section-heading,.admin-page-head,.analytics-page-head,
    .stage-panel-head,.stage-project-head,.continuity-request-heading
  ){
    min-width:0!important;
  }
}

@media(max-width:480px){
  table.responsive-data-table-v1186 tbody>tr>td{
    grid-template-columns:1fr!important;
    gap:4px!important;
    padding:10px 12px!important;
  }
  table.responsive-data-table-v1186 tbody>tr>td::before{
    margin-bottom:2px;
  }
  :where(.request-table-row,.project-table-row-v1183,.license-table-row){
    padding:12px!important;
  }
}
