/*
 Minaya AgroFresh · Acabado visual final READY LIVE
 Solo presentación. No modifica lógica, datos ni permisos.
 Objetivos: paleta uniforme, espacios consistentes, texto sin solaparse,
 tablas/formularios legibles y comportamiento responsivo estable.
*/

:root{
  --maf-brand-900:#064826;
  --maf-brand-800:#075b2a;
  --maf-brand-700:#0b6b36;
  --maf-brand-600:#16834d;
  --maf-brand-100:#e9f5ee;
  --maf-brand-50:#f5faf7;
  --maf-page:#f4f7f5;
  --maf-surface:#ffffff;
  --maf-surface-soft:#f8faf9;
  --maf-text:#183126;
  --maf-text-soft:#496057;
  --maf-muted:#6a7f73;
  --maf-border:#dce6e0;
  --maf-border-strong:#c9d8cf;
  --maf-danger:#b42318;
  --maf-danger-soft:#fff1f0;
  --maf-warning:#9a6700;
  --maf-warning-soft:#fff7e6;
  --maf-info:#175cd3;
  --maf-info-soft:#eff6ff;
  --maf-radius-sm:10px;
  --maf-radius-md:14px;
  --maf-radius-lg:18px;
  --maf-shadow-sm:0 2px 10px rgba(8,68,32,.055);
  --maf-shadow-md:0 10px 28px rgba(8,68,32,.075);
  --maf-focus:0 0 0 3px rgba(22,131,77,.16);
  --maf-space-1:4px;
  --maf-space-2:8px;
  --maf-space-3:12px;
  --maf-space-4:16px;
  --maf-space-5:20px;
  --maf-space-6:24px;
  --maf-space-7:32px;

  /* Compatibilidad con estilos anteriores */
  --green:var(--maf-brand-800);
  --green2:var(--maf-brand-700);
  --green3:var(--maf-brand-600);
  --primary:var(--maf-brand-700);
  --accent:var(--maf-brand-600);
  --bg:var(--maf-page);
  --background:var(--maf-page);
  --card:var(--maf-surface);
  --surface:var(--maf-surface);
  --surface-soft:var(--maf-surface-soft);
  --soft:var(--maf-brand-50);
  --text:var(--maf-text);
  --muted:var(--maf-muted);
  --line:var(--maf-border);
  --border:var(--maf-border);
  --danger:var(--maf-danger);
  --warning:var(--maf-warning);
  --radius:var(--maf-radius-lg);
}

/* Base tipográfica y prevención de solapamientos */
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--maf-page);
}
body{
  background:var(--maf-page)!important;
  color:var(--maf-text)!important;
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:15px;
  line-height:1.5!important;
  letter-spacing:0;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{box-sizing:border-box}

/* Cualquier contenedor flex/grid puede encoger sin empujar texto encima de otro */
#app,#app main,#content,
.card,.panel,.widget,.dashboard-card,.role-dashboard-card,.operation-card,
.form-card,.table-card,[class*="-card"],[class*="-panel"],[class*="-grid"],
.header-left,.header-actions,.page-header,.section-header,.module-header{
  min-width:0;
}

p,span,small,strong,b,em,label,legend,dt,dd,th,td,a,button,
.card,.panel,.widget,[class*="-card"],[class*="-panel"]{
  overflow-wrap:anywhere;
  word-break:normal;
}

h1,h2,h3,h4,h5,h6{
  color:var(--maf-text)!important;
  font-family:inherit!important;
  line-height:1.22!important;
  letter-spacing:-.015em;
  overflow-wrap:anywhere;
  margin-top:0;
}
h1{font-size:clamp(1.7rem,2.4vw,2.15rem)}
h2{font-size:clamp(1.35rem,2vw,1.7rem)}
h3{font-size:clamp(1.08rem,1.45vw,1.25rem)}
h4{font-size:1rem}
p{line-height:1.55;margin-top:0}
small{line-height:1.4}

/* Estructura principal */
#app main{background:var(--maf-page)!important}
#content{
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  padding:24px!important;
}
#app>aside,#sidebar{
  background:linear-gradient(180deg,var(--maf-brand-900),var(--maf-brand-800))!important;
}
#sidebar .brand{
  min-height:76px;
  gap:12px;
  padding:16px!important;
}
#sidebar .brand img{flex:0 0 auto;max-width:48px;height:auto}
#sidebar .brand strong{line-height:1.2;overflow-wrap:normal;word-break:normal}
#sidebar .brand small{line-height:1.3;opacity:.82}
#sidebar nav{padding-inline:10px}
#sidebar .nav-btn,#sidebar .nav-item,#sidebar a{
  min-height:44px;
  gap:10px;
  border-radius:10px!important;
  line-height:1.25!important;
}
#sidebar .nav-btn span,#sidebar .nav-item span,#sidebar a span{min-width:0}

/* Encabezado superior */
#app main>header{
  min-height:78px;
  padding:14px 24px!important;
  gap:18px!important;
  background:rgba(255,255,255,.98)!important;
  border-bottom:1px solid var(--maf-border)!important;
  box-shadow:0 1px 0 rgba(8,68,32,.025);
}
.header-left{display:flex;align-items:center;gap:12px}
.header-left>div{min-width:0}
.header-left h2{margin:0 0 2px!important;line-height:1.2!important}
.header-left p{margin:0!important;color:var(--maf-muted)!important;line-height:1.35!important}
.header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px!important;
  min-width:0;
}
.date-box{line-height:1.3;white-space:normal!important}

/* Banners de versión/fase */
.version-banner,.phase-banner{
  background:var(--maf-brand-50)!important;
  color:var(--maf-brand-800)!important;
  border-color:#d5e8dc!important;
  line-height:1.35!important;
  letter-spacing:.025em!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}

/* Tarjetas y paneles: una sola familia visual */
.card,.panel,.widget,.dashboard-card,.role-dashboard-card,.operation-card,
.form-card,.table-card,.stat-card,.kpi-card,.summary-card,.metric-card,
[class$="-card"],[class$="-panel"]{
  border-color:var(--maf-border)!important;
  border-radius:var(--maf-radius-lg)!important;
}
.card,.panel,.widget,.dashboard-card,.role-dashboard-card,.operation-card,
.form-card,.table-card,.stat-card,.kpi-card,.summary-card,.metric-card{
  background:var(--maf-surface)!important;
  box-shadow:var(--maf-shadow-sm)!important;
}
.card:hover,.dashboard-card:hover,.role-dashboard-card:hover,.operation-card:hover{
  border-color:var(--maf-border-strong)!important;
}
.page-header,.dashboard-welcome,.role-dashboard-hero,[class*="hero"]{
  border-radius:var(--maf-radius-lg)!important;
}

/* Grids: espacios uniformes y sin columnas imposibles */
.dashboard-grid,.role-dashboard-grid,.stats-grid,.kpi-grid,.charts-grid,
.operation-grid,.quick-grid,.card-grid,.form-grid,.grid{
  gap:16px!important;
}
.dashboard-grid>*,.role-dashboard-grid>*,.stats-grid>*,.kpi-grid>*,
.charts-grid>*,.operation-grid>*,.quick-grid>*,.card-grid>*,.form-grid>*{
  min-width:0;
}

/* Botones */
button,.btn,input[type="button"],input[type="submit"]{
  max-width:100%;
  line-height:1.2!important;
}
.btn,button.btn{
  min-height:42px;
  padding:10px 15px!important;
  gap:8px!important;
  border-radius:10px!important;
  font-weight:700!important;
  white-space:normal!important;
  text-align:center;
  align-items:center;
  justify-content:center;
}
.btn.primary,button.primary,.btn-success{
  background:var(--maf-brand-700)!important;
  border-color:var(--maf-brand-700)!important;
  color:#fff!important;
}
.btn.primary:hover,button.primary:hover,.btn-success:hover{
  background:var(--maf-brand-800)!important;
  border-color:var(--maf-brand-800)!important;
}
.btn.secondary,button.secondary{
  background:#fff!important;
  border-color:var(--maf-border-strong)!important;
  color:var(--maf-brand-800)!important;
}
.btn.danger,button.danger,.btn-danger{
  background:var(--maf-danger)!important;
  border-color:var(--maf-danger)!important;
  color:#fff!important;
}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid transparent!important;
  box-shadow:var(--maf-focus)!important;
}
button:disabled,.btn:disabled{opacity:.55!important;cursor:not-allowed!important;transform:none!important}

/* Formularios */
form{min-width:0}
label{
  color:var(--maf-text-soft)!important;
  font-weight:650;
  line-height:1.35!important;
  min-width:0;
}
input,select,textarea{
  width:100%;
  max-width:100%;
  min-width:0;
  color:var(--maf-text)!important;
  background:#fff!important;
  border:1px solid var(--maf-border-strong)!important;
  border-radius:10px!important;
  line-height:1.35!important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select{
  min-height:42px;
  padding:9px 12px!important;
}
textarea{min-height:104px;padding:10px 12px!important;resize:vertical}
input::placeholder,textarea::placeholder{color:#899990!important;opacity:1}
input:focus,select:focus,textarea:focus{
  border-color:var(--maf-brand-600)!important;
  box-shadow:var(--maf-focus)!important;
  outline:none!important;
}
input[type="checkbox"],input[type="radio"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  padding:0!important;
  accent-color:var(--maf-brand-700);
}
.form-actions,.modal-form-actions,.confirm-actions,.dialog-actions,.wizard-actions,
.page-header .actions,.toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px!important;
}

/* Tablas profesionales */
.table-wrap,.professional-table-wrap,[class*="table-wrap"]{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  border-color:var(--maf-border)!important;
  border-radius:var(--maf-radius-md)!important;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
table{
  width:100%;
  max-width:100%;
  border-collapse:separate;
  border-spacing:0;
  color:var(--maf-text);
}
th{
  background:var(--maf-brand-50)!important;
  color:var(--maf-text-soft)!important;
  font-size:.78rem!important;
  font-weight:800!important;
  line-height:1.3!important;
  letter-spacing:.025em;
  vertical-align:middle!important;
  white-space:normal!important;
}
th,td{
  padding:11px 12px!important;
  border-color:#e7eeea!important;
  vertical-align:middle!important;
  line-height:1.4!important;
  min-width:0;
}
td{background:#fff}
tbody tr:hover td{background:#fbfdfc!important}
td .btn,td button.btn,.table-actions .btn,.actions-cell .btn{
  min-height:36px;
  padding:7px 10px!important;
  font-size:.82rem!important;
}
.table-actions,.actions-cell{gap:7px!important;flex-wrap:wrap!important}
.professional-table-toolbar,.table-toolbar,.pt-controls{
  gap:10px!important;
  padding:12px!important;
  background:var(--maf-surface-soft)!important;
  border-color:var(--maf-border)!important;
}

/* Badges/chips: legibles y compactos */
.badge,.chip,.tag,.status,[class*="badge"],[class*="chip"]{
  max-width:100%;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}

/* Alertas y mensajes semánticos */
.alert,.notice,.message,.empty-state{
  border-radius:var(--maf-radius-md)!important;
  line-height:1.5!important;
}
.alert.success,.success-message{background:var(--maf-brand-50)!important;color:var(--maf-brand-900)!important}
.alert.warning,.warning-message{background:var(--maf-warning-soft)!important;color:#684500!important}
.alert.danger,.alert.error,.error-message{background:var(--maf-danger-soft)!important;color:#8a1c13!important}

/* Buscador y notificaciones */
.global-search{min-width:0}
.global-search input{border-color:var(--maf-border)!important;border-radius:12px!important}
.global-search-results,.notification-panel{
  border-color:var(--maf-border)!important;
  box-shadow:0 18px 45px rgba(8,68,32,.14)!important;
}
.notification-bell,.icon-btn{
  flex:0 0 auto;
  border-color:var(--maf-border)!important;
  border-radius:11px!important;
}

/* Modales: texto y acciones nunca se pisan */
.modal{overflow:auto!important}
.modal-card,.confirm-card,.dialog,.confirmation-dialog{
  width:min(760px,calc(100vw - 32px));
  max-width:100%;
  max-height:90vh;
  max-height:90dvh;
  overflow:auto;
  border-radius:20px!important;
  padding:24px!important;
  background:#fff!important;
  box-shadow:0 24px 64px rgba(9,44,26,.2)!important;
}
.modal-card h3,.confirm-card h3{padding-right:34px;line-height:1.25!important}
.modal-subtitle,.confirm-card p{line-height:1.5!important}
.close{
  min-width:38px!important;
  min-height:38px!important;
  line-height:1!important;
  display:grid!important;
  place-items:center!important;
}

/* Login: limpio y equilibrado */
.login-wrap{min-height:100vh;min-height:100dvh}
.login-card{
  width:min(460px,calc(100vw - 32px));
  max-width:100%;
  border-radius:22px!important;
  box-shadow:0 18px 55px rgba(6,72,38,.13)!important;
}
.login-card h2{margin-bottom:6px!important}
.login-card>p{color:var(--maf-muted)!important}
.login-card form{display:grid;gap:14px}
.login-card label{display:grid;gap:7px}
.login-card small{display:block;color:var(--maf-muted)!important;line-height:1.45!important}
.login-logo{max-width:min(230px,75%);height:auto}
.hero-content{max-width:700px}
.hero-content h1{color:#fff!important;line-height:1.14!important}
.hero-content p{line-height:1.55!important}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 18px!important}

/* Scrollbars discretas */
*{scrollbar-width:thin;scrollbar-color:#b9cbbf transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#b9cbbf;border:3px solid transparent;background-clip:padding-box;border-radius:999px}
*::-webkit-scrollbar-track{background:transparent}

/* Pantallas intermedias */
@media (max-width:1200px){
  #content{padding:20px!important}
  .header-actions{max-width:65%}
  .dashboard-grid,.role-dashboard-grid,.stats-grid,.kpi-grid,.operation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Tablet */
@media (max-width:1024px){
  #content{padding:18px!important}
  #app main>header{padding:13px 18px!important}
  .header-actions{max-width:none;width:100%}
  .card,.panel,.widget,.dashboard-card,.role-dashboard-card,.operation-card,.form-card,.table-card{
    padding:18px!important;
  }
}

/* Móvil */
@media (max-width:720px){
  body{font-size:15px}
  #content{padding:12px!important}
  #app main>header{min-height:64px;padding:10px 12px!important;gap:8px!important}
  .header-left h2{font-size:1.08rem!important;line-height:1.2!important;max-width:58vw}
  .header-actions{width:auto;max-width:42%;margin-left:auto;gap:7px!important}
  .dashboard-grid,.role-dashboard-grid,.stats-grid,.kpi-grid,.charts-grid,
  .operation-grid,.quick-grid,.card-grid,.form-grid,.grid{
    grid-template-columns:1fr!important;
    gap:12px!important;
  }
  .card,.panel,.widget,.dashboard-card,.role-dashboard-card,.operation-card,.form-card,.table-card,.stat-card,.kpi-card{
    padding:15px!important;
    border-radius:15px!important;
  }
  .page-header,.dashboard-welcome,.role-dashboard-hero{
    padding:16px!important;
    gap:12px!important;
  }
  .btn,button.btn{min-height:46px;padding:10px 13px!important}
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select{
    min-height:48px;
    font-size:16px!important;
  }
  textarea{font-size:16px!important}
  .form-actions,.modal-form-actions,.confirm-actions,.dialog-actions,.wizard-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
  }
  .form-actions>.btn,.modal-form-actions>.btn,.confirm-actions>.btn,.dialog-actions>.btn,.wizard-actions>.btn{
    width:100%!important;
  }
  .modal-card,.confirm-card,.dialog,.confirmation-dialog{
    width:100%!important;
    max-width:100%!important;
    padding:18px!important;
    border-radius:20px 20px 0 0!important;
  }
  .modal-card h3,.confirm-card h3{padding-right:38px}
  .professional-table-toolbar,.table-toolbar,.pt-controls{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  /* Mantiene la conversión a tarjetas de Fase 18 y mejora separación */
  table tbody{gap:12px!important}
  table tr{padding:13px!important}
  table td{line-height:1.4!important;min-width:0!important}
  table td>*{min-width:0;max-width:100%}
  .mobile-bottom-nav button{line-height:1.15!important;overflow:hidden}
  .mobile-bottom-nav button span{flex:0 0 auto}
  .phase-banner,.version-banner{font-size:.72rem!important;padding:7px 10px!important}
  .login-wrap{display:grid!important;grid-template-columns:1fr!important}
  .login-hero{min-height:250px}
  .login-panel{padding:18px!important}
  .login-card{width:100%;padding:22px!important}
}

/* Teléfonos muy estrechos */
@media (max-width:420px){
  #content{padding:10px!important}
  .header-left h2{max-width:52vw}
  .card,.panel,.widget,.dashboard-card,.role-dashboard-card,.operation-card,.form-card,.table-card{
    padding:14px!important;
  }
  h1{font-size:1.55rem!important}
  h2{font-size:1.25rem!important}
  h3{font-size:1.05rem!important}
  td{grid-template-columns:minmax(92px,38%) minmax(0,1fr)!important;gap:8px!important}
  .login-panel{padding:12px!important}
}

/* Impresión limpia */
@media print{
  body{background:#fff!important;color:#111!important}
  #sidebar,#app main>header,.mobile-bottom-nav,.version-banner,.phase-banner,.no-print{display:none!important}
  #app main{margin:0!important;width:100%!important}
  #content{max-width:none!important;padding:0!important}
  .card,.panel,.table-card{box-shadow:none!important;break-inside:avoid}
}


/* Ajuste final de marca y limpieza visual */
.version-banner,.phase-banner{display:none!important;}
#sidebar .brand{align-items:center!important;}
#sidebar .brand img{max-width:64px!important;max-height:64px!important;width:64px!important;height:64px!important;object-fit:contain!important;background:#fff!important;border-radius:16px!important;padding:6px!important;box-shadow:0 8px 20px rgba(0,0,0,.14)!important;}
#sidebar .brand strong{font-size:1.08rem!important;letter-spacing:-.01em;}
#sidebar .brand small{display:block!important;color:#d9f1e3!important;font-weight:600!important;}
.company-hero{align-items:center!important;}
.company-logo-wrap{width:190px!important;height:118px!important;padding:12px 14px!important;border-radius:20px!important;box-shadow:0 10px 30px rgba(0,0,0,.14)!important;background:rgba(255,255,255,.97)!important;}
.company-logo-wrap img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 4px 10px rgba(7,91,42,.10));}
.login-logo{width:min(180px,60%)!important;height:auto!important;object-fit:contain!important;}
@media(max-width:760px){.company-logo-wrap{width:100%!important;height:100px!important;}}