.layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* Base: el padding no suma ancho extra */
*, *::before, *::after { box-sizing: border-box; }

.layout__sidebar {
  flex: 0 0 auto;
}

/* Evita que un hijo de layout__main empuje el ancho del documento */
.layout__main > .content{
  min-width: 0;
}

.layout__main {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;

  background: #f4f4f4;
}

html, body { width: 100%; margin: 0; }

.layout { width: 100%; }

main.layout__main{
  flex: 1 1 0 !important;   /* basis 0 => ocupa todo el espacio libre */
  min-width: 0 !important;
  width: auto !important;   /* evita que width:100% juegue como basis */
  max-width: none !important;
}

/* FIX DEFINITIVO: main debe ocupar todo el espacio restante */
.layout > main.layout__main{
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.content{
  padding: 28px 28px 28px 28px;
}

:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

html, body{
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,h2,h3{
  letter-spacing: -0.02em;
}

/* =========================================
   LAYOUT RESPONSIVE FOUNDATION
========================================= */

.content {
  width: 100%;
  min-width: 0;
}

@media (max-width: 768px) {
  .content {
    padding: 14px 14px 28px;
  }

  .container {
    width: 100%;
    max-width: none;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .content {
    padding: 24px;
  }
}

@media (min-width: 1440px) {
  .content {
    padding: 34px;
  }
}

/* =========================================
   TABLET / NOTEBOOK LAYOUT
========================================= */

@media (min-width: 769px) and (max-width: 1180px) {

  .layout {
    display: flex;
  }

  .layout__main {
    min-width: 0;
  }

  .content {
    padding: 22px;
  }

  .container {
    max-width: none;
  }
}

/* =========================================
   LARGE DESKTOP BREATHING
========================================= */

@media (min-width: 1440px) {

  .content {
    padding: 36px;
  }

  .container {
    max-width: 1320px;
  }
}