/* La edición del stock debe ser accesible desde un teléfono.
   En escritorio se conserva la tabla de nueve columnas. */
#stockTable .ng-mobile-edit-label{display:none}
@media (max-width:900px){
  #stock{min-width:0!important;max-width:100%!important}
  #stock>.panel{min-width:0!important;max-width:100%!important;padding:12px!important}
  #stock .panel-head{margin:-12px -12px 12px!important;padding:14px!important}
  #stock .toolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
  #stock .toolbar input,#stock .toolbar select{min-width:0;max-width:none!important;width:100%}
  #stock .toolbar #searchStock{grid-column:1/-1}
  #stockTable{overflow:visible!important;width:100%!important;max-width:100%!important}
  #stockTable .stock-compact-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}
  #stockTable .stock-compact-table thead{display:none!important}
  #stockTable .stock-compact-table tbody{display:block!important;width:100%!important}
  #stockTable .stock-compact-table tr.stock-main-row{
    display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px 10px;background:white!important;border:1px solid #d7e0eb;
    border-radius:12px;padding:12px;margin:0 0 10px;
    box-shadow:0 2px 6px rgba(15,23,42,.04);
  }
  #stockTable .stock-compact-table tr.stock-main-row td:nth-child(n){
    display:block!important;width:auto!important;min-width:0!important;
    border:0!important;padding:0!important;text-align:left!important;
    font-size:12px!important;white-space:normal!important;
  }
  #stockTable .stock-main-row td:nth-child(1){grid-column:1}
  #stockTable .stock-main-row td:nth-child(2){grid-column:1/-1;grid-row:2}
  #stockTable .stock-main-row td:nth-child(3){grid-column:2;grid-row:1;justify-self:end}
  #stockTable .stock-main-row td:nth-child(4){grid-column:1;grid-row:3}
  #stockTable .stock-main-row td:nth-child(5){grid-column:2;grid-row:3}
  #stockTable .stock-main-row td:nth-child(6){grid-column:1;grid-row:4}
  #stockTable .stock-main-row td:nth-child(7){grid-column:2;grid-row:4}
  #stockTable .stock-main-row td:nth-child(8){grid-column:1/-1;grid-row:5}
  #stockTable .stock-main-row td:nth-child(9){grid-column:1/-1;grid-row:6;border-top:1px solid #e2e8f0!important;padding-top:10px!important}
  #stockTable .stock-main-row td:nth-child(4):before{content:"KM";display:block}
  #stockTable .stock-main-row td:nth-child(5):before{content:"ITV";display:block}
  #stockTable .stock-main-row td:nth-child(6):before{content:"SEGURO";display:block}
  #stockTable .stock-main-row td:nth-child(7):before{content:"ESTADO";display:block}
  #stockTable .stock-main-row td:nth-child(8):before{content:"COSTE REAL";display:block}
  #stockTable .stock-main-row td:nth-child(4):before,
  #stockTable .stock-main-row td:nth-child(5):before,
  #stockTable .stock-main-row td:nth-child(6):before,
  #stockTable .stock-main-row td:nth-child(7):before,
  #stockTable .stock-main-row td:nth-child(8):before{
    font-size:10px;font-weight:800;letter-spacing:.04em;color:#64748b;margin-bottom:5px;
  }
  #stockTable .gg-stock-name{font-size:16px!important;white-space:normal!important;overflow:visible!important}
  #stockTable .gg-stock-sub{white-space:normal!important;overflow:visible!important}
  #stockTable .stock-main-row td:nth-child(5) .itv-red,
  #stockTable .stock-main-row td:nth-child(5) .itv-yellow,
  #stockTable .stock-main-row td:nth-child(5) .itv-green{max-width:100%;font-size:11px;white-space:normal}
  #stockTable .stock-main-row .gg-stock-status{font-size:10px!important}
  #stockTable .stock-main-row .gg-stock-price{font-size:14px}
  #stockTable .stock-main-row .gg-stock-actions{display:flex!important;gap:8px!important;justify-content:stretch!important;flex-wrap:nowrap!important}
  #stockTable .stock-main-row .gg-stock-iconbtn{
    display:inline-flex!important;align-items:center;justify-content:center;
    min-height:42px!important;min-width:42px!important;padding:8px 12px!important;
    font-size:15px!important;flex:1!important;
  }
  #stockTable .stock-main-row .gg-stock-iconbtn[title="Editar"]{
    flex:2!important;background:#e0f2fe!important;color:#075985!important;
    font-weight:800;border:1px solid #7dd3fc;
  }
  #stockTable .ng-mobile-edit-label{display:inline!important;font-size:13px}
  #stockTable .stock-compact-table tr.stock-detail-row{display:block!important;margin:-7px 0 12px}
  #stockTable .stock-compact-table tr.stock-detail-row.hidden{display:none!important}
  #stockTable .stock-compact-table tr.stock-detail-row>td{
    display:block!important;width:100%!important;box-sizing:border-box!important;
    padding:12px!important;border:1px solid #e2e8f0!important;border-radius:10px;
  }
  #stockTable .gg-stock-expanded{grid-template-columns:1fr!important}
}



/* Adaptación visual para teléfonos y tablets pequeñas.
   Solo estilos: conserva datos, permisos, funciones y documentos. */
@media (max-width:900px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  *,*::before,*::after{box-sizing:border-box}
  .app{grid-template-columns:64px minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important}
  .header-full{width:64px!important;min-width:0!important;height:76px!important;min-height:76px!important;padding:7px 3px!important}
  .logo-container{width:100%!important;min-width:0!important}
  .logo-container .logo-img,.header-full .logo-img{max-width:56px!important;max-height:60px!important;width:100%!important;height:auto!important}
  .top-nav{width:64px!important;min-width:0!important;top:76px!important;left:0!important;height:calc(100dvh - 76px)!important;padding:6px 4px 12px!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
  .top-nav>button,.top-nav>.dropdown,.top-nav>.dropdown>.dropdown-toggle{min-width:0!important;width:100%!important;max-width:100%!important}
  .top-nav>button,.top-nav>.dropdown>.dropdown-toggle{padding:10px 3px!important;min-height:48px!important}
  .top-nav .icon{width:20px!important;height:20px!important}
  .main{width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;padding:10px 9px 24px!important;overflow:visible!important}
  .main>.page,.main .page{max-width:100%!important;min-width:0!important;width:100%!important;padding:0!important;margin:0!important}
  .main .panel,.main .dash-block,.main .dash-hero,.main .workshop-card,
  .main .note-card,.main .appointment-card,.main .master-box{min-width:0!important;max-width:100%!important}
  .main .panel{padding:12px!important;border-radius:12px!important;margin-bottom:12px!important}
  .main .panel-head{margin:-12px -12px 12px!important;padding:12px!important;border-radius:12px 12px 0 0!important;display:flex!important;flex-wrap:wrap!important;gap:9px!important;align-items:flex-start!important}
  .main .panel-head>div{min-width:0!important;flex:1 1 180px!important}
  .main .panel-head h2{font-size:19px!important;line-height:1.2!important;overflow-wrap:anywhere}
  .main .panel-head .muted{font-size:12px!important;line-height:1.45!important;overflow-wrap:break-word}
  .main .panel-head>.btn,.main .panel-head>button{max-width:100%!important;white-space:normal!important;min-height:38px!important;font-size:12px!important;line-height:1.25!important;padding:9px 11px!important}
  .main .toolbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px!important;padding:9px!important;max-width:100%!important;min-width:0!important}
  .main .toolbar>input,.main .toolbar>select,.main .toolbar>button{min-width:0!important;max-width:100%!important}
  .main input:not([type="checkbox"]):not([type="radio"]),.main select,.main textarea{max-width:100%;min-width:0}
  .main .dashboard-grid,.main .dashboard-kpis,.main .dash-business-grid,.main .month-grid-v149,
  .main .sale-close-summary,.main .contact-kpis,.main .master-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;min-width:0!important;
  }
  /* Corrige la cuadrícula de cuatro columnas forzada mediante style inline en Garantías. */
  #postventaSummary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .main .dash-card,.main .kpi-card,.main .month-card-v149,.main .sale-close-card{
    min-width:0!important;width:auto!important;padding:10px!important;overflow-wrap:anywhere;
  }
  .main .dash-num,.main .kpi-value{font-size:clamp(17px,5vw,24px)!important;line-height:1.15!important;overflow-wrap:anywhere;word-break:normal}
  .main .dash-label,.main .kpi-label{font-size:10px!important;line-height:1.35!important;overflow-wrap:anywhere;white-space:normal!important}
  #postventaSummary .dash-card{min-height:88px!important}
  #postventaSummary .dash-num{font-size:clamp(16px,5vw,23px)!important}
  #postventaSummary .dash-label{font-size:10px!important}
  #postventaPanel .toolbar #searchWarranty{width:100%!important;flex:1 1 100%!important}
  .main .workshop-appointments,.main .appointment-card{max-width:100%!important;min-width:0!important}
  .main .appointment-card{grid-template-columns:minmax(0,1fr)!important;gap:8px!important;padding:11px!important}
  .main .appointment-actions{justify-content:flex-start!important;flex-wrap:wrap!important}
  .main .appointment-actions .btn{white-space:normal!important;max-width:100%!important}
  .main .notes-grid,.main .master-grid,.main .ops-grid,.main .finance-grid,
  .main .dashboard-main-grid,.main .dashboard-bottom-grid{grid-template-columns:minmax(0,1fr)!important}
  .main .top{display:flex!important;flex-wrap:wrap!important;gap:9px!important}
  .main .top h1{font-size:19px!important}
  .main .global-search-box{min-width:0!important;max-width:100%!important;flex:1 1 100%!important}
  .main .user-bar{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important}
  .main .user-bar .btn{white-space:normal!important}
  .main .table-wrap{max-width:100%!important;min-width:0!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .main .table-wrap table{max-width:none}
  .main .form-grid,.main .ws-check-grid{min-width:0}
  .main .master-hero{max-width:100%!important}
  .main .master-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .main .btn{max-width:100%}
  .modal .modal-box{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;min-width:0!important;max-height:90dvh!important;overflow-y:auto!important;overflow-x:hidden!important;padding:13px!important}
  .modal .modal-box input,.modal .modal-box select,.modal .modal-box textarea{max-width:100%;min-width:0}
  .modal .modal-box .form-grid{grid-template-columns:minmax(0,1fr)!important}
  #ngMultiBar{max-width:100%!important;min-width:0!important;flex-wrap:wrap!important;gap:6px!important}
  #ngMultiBar .ng-company-segments{max-width:100%!important;min-width:0!important}
  #ngMultiBar .ng-company-segment{min-width:0!important;padding:8px 10px!important;font-size:11px!important}
  #stockTable .stock-compact-table tr.stock-main-row{max-width:100%!important}
  #stockTable .stock-main-row td:nth-child(9){display:block!important}
}
@media (max-width:390px){
  .app{grid-template-columns:54px minmax(0,1fr)!important}
  .header-full,.top-nav{width:54px!important}
  .top-nav{padding:5px 2px 10px!important}
  .main{padding:8px 6px 20px!important}
  .main .panel{padding:10px!important}
  .main .panel-head{margin:-10px -10px 10px!important;padding:10px!important}
  .main .dash-card,.main .kpi-card{padding:8px!important}
  .main .dash-label,.main .kpi-label{font-size:9px!important}
}



#expensesTable .ng-whatsapp-expense{background:#e7f9ed!important;color:#136c3b!important;border:1px solid #a8e3bd!important;font-weight:750!important}
#expensesTable .ng-whatsapp-expense:hover{background:#d0f4dd!important}
@media(max-width:900px){#expensesTable td:last-child{min-width:160px}#expensesTable .ng-whatsapp-expense{min-height:38px;white-space:nowrap}}