:root {
    --verde-900: #183a2d;
    --verde-800: #214a39;
    --verde-700: #2c6049;
    --verde-100: #eaf2ed;

    --oliva: #71823c;

    --gris-950: #18211d;
    --gris-800: #39433f;
    --gris-600: #68726e;
    --gris-400: #aeb7b3;
    --gris-250: #d8dedb;
    --gris-150: #e8ecea;
    --gris-100: #f3f5f4;
    --gris-50: #f8faf9;

    --blanco: #ffffff;
    --rojo: #b64040;

    --radio-sm: 8px;
    --radio-md: 14px;
    --radio-lg: 22px;

    --sombra:
      0 18px 60px rgba(24, 58, 45, 0.10);
  }


  * {
    box-sizing: border-box;
  }


  html,
  body {
    margin: 0;
    min-height: 100%;
    font-family:
      Inter,
      ui-sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;
    color: var(--gris-950);
    background: var(--gris-50);
  }


  button,
  input {
    font: inherit;
  }


  button {
    cursor: pointer;
  }


  .oculto {
    display: none !important;
  }


  .vista {
    min-height: 100vh;
  }


  .eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--verde-700);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }


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

  .vista-login {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px;
    background:
      radial-gradient(
        circle at 20% 20%,
        rgba(113, 130, 60, 0.15),
        transparent 34%
      ),
      linear-gradient(
        135deg,
        #eef4f0 0%,
        #f8faf9 55%,
        #edf2ef 100%
      );
  }


  .login-layout {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: 1fr 460px;
    align-items: center;
    gap: 90px;
  }


  .login-brand {
    display: flex;
    align-items: center;
    gap: 24px;
  }


  .login-brand h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.06em;
    color: var(--verde-900);
  }


  .login-brand p {
    margin: 16px 0 0;
    color: var(--gris-600);
    font-size: 19px;
  }


  .brand-badge {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: var(--blanco);
    background: var(--verde-900);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.08em;
    box-shadow: var(--sombra);
  }


  .brand-badge-small {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    font-size: 16px;
  }


  .login-card {
    padding: 38px;
    border: 1px solid rgba(24, 58, 45, 0.08);
    border-radius: var(--radio-lg);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--sombra);
    backdrop-filter: blur(12px);
  }


  .login-card-header {
    margin-bottom: 30px;
  }


  .login-card h2 {
    margin: 0;
    font-size: 32px;
    letter-spacing: -0.04em;
  }


  .login-card p {
    margin: 10px 0 0;
    color: var(--gris-600);
    line-height: 1.5;
  }


  .campo {
    margin-bottom: 20px;
  }


  .campo label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 750;
  }


  .campo input {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid var(--gris-250);
    border-radius: var(--radio-sm);
    outline: none;
    background: var(--blanco);
    transition:
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }


  .campo input:focus {
    border-color: var(--verde-700);
    box-shadow: 0 0 0 4px rgba(44, 96, 73, 0.10);
  }


  .mensaje-error {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: var(--radio-sm);
    color: var(--rojo);
    background: #fceeee;
    font-size: 13px;
    font-weight: 650;
  }


  /* ========================================================
     BOTONES
  ======================================================== */

  .btn {
    border: 0;
    border-radius: var(--radio-sm);
    padding: 12px 16px;
    font-weight: 750;
    transition:
      transform 0.15s ease,
      opacity 0.15s ease,
      background 0.15s ease;
  }


  .btn:hover {
    transform: translateY(-1px);
  }


  .btn:disabled {
    cursor: default;
    opacity: 0.6;
    transform: none;
  }


  .btn-primary {
    color: var(--blanco);
    background: var(--verde-900);
  }


  .btn-primary:hover {
    background: var(--verde-800);
  }


  .btn-block {
    width: 100%;
  }


  .btn-ghost {
    color: var(--verde-900);
    background: var(--verde-100);
  }


  .btn-small {
    padding: 9px 12px;
    font-size: 13px;
  }


  .btn-sidebar {
    width: 100%;
    color: var(--blanco);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
  }


  /* ========================================================
     SELECTOR
  ======================================================== */

  .vista-selector {
    background: var(--gris-50);
  }


  .selector-header {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 34px;
    border-bottom: 1px solid var(--gris-150);
    background: var(--blanco);
  }


  .brand-inline,
  .usuario-menu {
    display: flex;
    align-items: center;
    gap: 14px;
  }


  .brand-inline > div:last-child,
  .usuario-menu > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }


  .brand-inline span,
  .usuario-menu span {
    color: var(--gris-600);
    font-size: 12px;
  }


  .usuario-menu {
    text-align: right;
  }


  .selector-content {
    width: min(1120px, calc(100% - 40px));
    margin: 0 auto;
    padding: 70px 0 90px;
  }


  .selector-title {
    max-width: 650px;
    margin-bottom: 38px;
  }


  .selector-title h1 {
    margin: 0;
    font-size: 42px;
    letter-spacing: -0.05em;
  }


  .selector-title p {
    margin: 12px 0 0;
    color: var(--gris-600);
    font-size: 17px;
  }


  .puestos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }


  .access-card {
    width: 100%;
    min-height: 178px;
    display: grid;
    grid-template-columns: 58px 1fr 30px;
    align-items: center;
    gap: 18px;
    padding: 25px;
    text-align: left;
    border: 1px solid var(--gris-150);
    border-radius: var(--radio-md);
    background: var(--blanco);
    box-shadow: 0 10px 30px rgba(24, 58, 45, 0.05);
    transition:
      transform 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease;
  }


  .access-card:hover {
    transform: translateY(-3px);
    border-color: rgba(44, 96, 73, 0.35);
    box-shadow: 0 18px 38px rgba(24, 58, 45, 0.10);
  }


  .access-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--verde-900);
    background: var(--verde-100);
    font-size: 23px;
  }


  .access-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }


  .access-code {
    margin-bottom: 5px;
    color: var(--verde-700);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
  }


  .access-content strong {
    font-size: 21px;
  }


  .access-content p {
    margin: 7px 0 0;
    color: var(--gris-600);
    line-height: 1.45;
  }


  .access-arrow {
    font-size: 24px;
    color: var(--verde-700);
  }


  .area-privada-wrapper {
    margin-top: 46px;
  }


  .separador {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    color: var(--gris-600);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }


  .separador::before,
  .separador::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--gris-150);
  }


  .access-card-private {
    min-height: 145px;
    border-color: rgba(24, 58, 45, 0.18);
    background: linear-gradient(
      135deg,
      var(--verde-900),
      var(--verde-800)
    );
  }


  .access-card-private .access-code,
  .access-card-private strong,
  .access-card-private p,
  .access-card-private .access-arrow {
    color: var(--blanco);
  }


  .access-card-private .access-icon {
    color: var(--blanco);
    background: rgba(255, 255, 255, 0.13);
  }


  /* ========================================================
     APLICACIÓN
  ======================================================== */

  .app-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    background: var(--gris-50);
  }


  .sidebar {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    color: var(--blanco);
    background: var(--verde-900);
  }


  .sidebar-private {
    background: #202824;
  }


  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 8px 27px;
  }


  .sidebar-brand > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }


  .sidebar-brand span {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
  }


  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }


  .nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border: 0;
    border-radius: 10px;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
    background: transparent;
  }


  .nav-item:hover,
  .nav-item.activo {
    color: var(--blanco);
    background: rgba(255, 255, 255, 0.11);
  }


  .nav-icon {
    width: 22px;
    text-align: center;
    font-size: 18px;
  }


  .sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
  }


  .app-main {
    min-width: 0;
  }


  .topbar {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 30px;
    border-bottom: 1px solid var(--gris-150);
    background: var(--blanco);
  }


  .topbar h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -0.03em;
  }


  .topbar-status,
  .topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }


  .topbar-user {
    margin-left: 18px;
  }


  .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3da66b;
    box-shadow: 0 0 0 4px rgba(61, 166, 107, 0.12);
  }


  .workspace {
    padding: 28px;
  }


  .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
  }


  .page-header h1 {
    margin: 0;
    font-size: 31px;
    letter-spacing: -0.04em;
  }


  .page-header p {
    margin: 8px 0 0;
    color: var(--gris-600);
  }


  .placeholder-card {
    min-height: 420px;
    display: grid;
    place-items: center;
    padding: 35px;
    border: 1px solid var(--gris-150);
    border-radius: var(--radio-md);
    text-align: center;
    background: var(--blanco);
  }


  .placeholder-card h3 {
    margin: 0 0 8px;
    font-size: 23px;
  }


  .placeholder-card p {
    max-width: 520px;
    margin: 0;
    color: var(--gris-600);
    line-height: 1.6;
  }


  .nuevo-albaran-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
  }


  .panel {
    padding: 24px;
    border: 1px solid var(--gris-150);
    border-radius: var(--radio-md);
    background: var(--blanco);
  }


  .panel h3 {
    margin: 0;
    font-size: 19px;
  }


  .panel p {
    color: var(--gris-600);
    line-height: 1.5;
  }


  /* ========================================================
     OVERLAY
  ======================================================== */

  .overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: var(--verde-900);
    background: rgba(248, 250, 249, 0.86);
    backdrop-filter: blur(5px);
  }


  .spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(24, 58, 45, 0.13);
    border-top-color: var(--verde-900);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
  }


  @keyframes girar {
    to {
      transform: rotate(360deg);
    }
  }


  /* ========================================================
     RESPONSIVE
  ======================================================== */

  @media (max-width: 900px) {
    .login-layout {
      grid-template-columns: 1fr;
      gap: 45px;
    }

    .login-brand {
      justify-content: center;
      text-align: left;
    }

    .puestos-grid {
      grid-template-columns: 1fr;
    }

    .app-layout {
      grid-template-columns: 82px 1fr;
    }

    .sidebar {
      padding-left: 10px;
      padding-right: 10px;
    }

    .sidebar-brand > div:last-child,
    .sidebar-logo-card,
    .nav-item span:last-child,
    .sidebar-footer {
      display: none;
    }

    .sidebar-brand {
      justify-content: center;
      padding-left: 0;
      padding-right: 0;
    }

    .nav-item {
      justify-content: center;
    }

    .nuevo-albaran-grid {
      grid-template-columns: 1fr;
    }
  }


  @media (max-width: 620px) {
    .vista-login {
      padding: 20px;
    }

    .login-brand {
      flex-direction: column;
      text-align: center;
    }

    .login-card {
      padding: 25px;
    }

    .selector-header {
      padding: 12px 18px;
    }

    .usuario-menu > div {
      display: none;
    }

    .selector-content {
      width: min(100% - 28px, 1120px);
      padding-top: 45px;
    }

    .selector-title h1 {
      font-size: 34px;
    }

    .app-layout {
      display: block;
    }

    .sidebar {
      min-height: auto;
      height: auto;
      flex-direction: row;
      overflow-x: auto;
    }

    .sidebar-brand,
    .sidebar-logo-card,
    .sidebar-footer {
      display: none;
    }

    .sidebar-nav {
      flex-direction: row;
    }

    .nav-item {
      min-width: 55px;
    }

    .topbar {
      padding: 13px 16px;
    }

    .topbar-status > span:not(.status-dot) {
      display: none;
    }

    .workspace {
      padding: 18px;
    }
  }


  /* ========================================================
     LOGOTIPOS Y CABECERAS NUEVAS
  ======================================================== */

  .login-logo-container {
    width: 180px;
    height: 180px;
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .login-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
  }

  .selector-logo {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 13px;
    background: #ffffff;
  }

  .selector-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    padding: 2px;
  }

  .sidebar-logo-card {
    width: calc(100% - 12px);
    min-height: 122px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 6px 16px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    background: #ffffff;
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(24, 58, 45, 0.04);
  }

  .sidebar-logo-card img {
    width: 76px;
    height: 92px;
    flex: 0 0 76px;
    display: block;
    object-fit: contain;
    border-radius: 8px;
  }

  .sidebar-context {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
    padding: 0;
    color: var(--verde-950);
  }

  .sidebar-logo-card .sidebar-context {
    min-height: 0;
    padding: 0;
    flex: 1 1 0;
    gap: 4px;
    justify-content: center;
  }

  .sidebar-logo-card .sidebar-context strong {
    display: block;
    color: var(--verde-900) !important;
    margin: 0 0 2px;
    padding: 0 0 6px;
    border-bottom: 2px solid var(--verde-900);
    font-size: 32px;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .sidebar-logo-card .sidebar-puesto-legacy {
    display: none !important;
  }

  .sidebar-logo-card .sidebar-context > span {
    color: #52635c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.12;
    white-space: nowrap;
  }

  .sidebar-logo-card #sidebar-puesto-tipo {
    color: var(--verde-700);
    font-size: 15px;
    font-weight: 800;
    text-transform: capitalize;
  }

  .sidebar-context-label {
    color: rgba(255, 255, 255, 0.52);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .sidebar-context strong {
    color: #ffffff;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .sidebar-context > span:last-child {
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
  }


  /* ========================================================
     AJUSTE COMPACTO DE LA APLICACIÓN
  ======================================================== */

  html,
  body {
    height: 100%;
  }

  body {
    overflow: hidden;
  }

  #app {
    height: 100vh;
    min-height: 0;
  }

  .vista.oculto,
  section.vista.oculto,
  .app-layout.oculto {
    display: none !important;
  }

  .app-layout {
    height: 100vh;
    min-height: 0;
    grid-template-columns: 220px 1fr;
    overflow: hidden;
  }

  .sidebar {
    height: 100vh;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 12px;
  }

  .sidebar-nav {
    gap: 4px;
  }

  .nav-item {
    padding: 10px 11px;
  }

  .app-main {
    height: 100vh;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .topbar {
    min-height: 58px;
    height: 58px;
    flex: 0 0 58px;
    padding: 8px 20px;
  }

  .topbar .eyebrow {
    margin-bottom: 2px;
  }

  .topbar h2 {
    font-size: 19px;
  }

  .workspace {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px;
  }


  /* ========================================================
     ICONOS DE ACEITUNA
  ======================================================== */

  .olive-access-icon {
    padding: 8px;
  }

  .olive-svg {
    width: 36px;
    height: 36px;
    overflow: visible;
  }

  .olive-stem {
    fill: none;
    stroke: #4a6a3f;
    stroke-width: 3;
    stroke-linecap: round;
  }

  .olive-leaf {
    fill: #90aa63;
  }

  .olive-fruit {
    fill: #385d45;
  }

  .olive-highlight {
    fill: rgba(255, 255, 255, 0.28);
  }

  .olive-svg-eco .olive-fruit {
    fill: #71823c;
  }

  .olive-svg-eco .olive-leaf {
    fill: #a9bf78;
  }


  /* ========================================================
     NUEVO ALBARÁN
  ======================================================== */

  .albaran-page {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .albaran-page .page-header {
    align-items: center;
    margin-bottom: 10px;
  }

  .albaran-page .page-header h1 {
    font-size: 27px;
  }

  .albaran-page .page-header p {
    margin-top: 4px;
    font-size: 12px;
  }

  .albaran-actions {
    display: flex;
    gap: 9px;
  }

  .albaran-actions .btn {
    padding: 9px 13px;
  }

  .nuevo-albaran-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    gap: 11px;
  }

  .albaran-column {
    display: grid;
    grid-template-columns:
      minmax(0, 1.15fr)
      minmax(360px, 0.85fr);
    align-items: start;
    gap: 11px;
  }

  .albaran-column > .albaran-section:nth-of-type(3),
  .albaran-column > .calculation-card {
    grid-column: 1 / -1;
  }

  .panel,
  .albaran-section,
  .farmer-panel {
    border: 1px solid var(--gris-150);
    border-radius: 13px;
    background: var(--blanco);
    box-shadow: 0 5px 18px rgba(24, 58, 45, 0.035);
  }

  .albaran-section {
    padding: 12px 14px 13px;
  }

  .section-header,
  .farmer-panel-header,
  .calculation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 9px;
  }

  .section-header > div,
  .calculation-header > div {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .section-header h3,
  .farmer-panel-header h3,
  .calculation-header h3 {
    margin: 0;
    font-size: 15px;
    letter-spacing: -0.025em;
  }

  .section-number {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    border-radius: 7px;
    color: var(--verde-900);
    background: var(--verde-100);
    font-size: 8px;
    font-weight: 900;
  }

  .section-number-light {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
  }

  .btn-text {
    padding: 5px;
    border: 0;
    color: var(--verde-700);
    background: transparent;
    font-size: 11px;
    font-weight: 800;
  }

  .btn-text:disabled {
    cursor: not-allowed;
    color: var(--gris-400);
  }

.search-box {
  position: relative;
}

  .search-box > span {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    color: var(--gris-600);
    font-size: 18px;
  }

  .search-box input {
    width: 100%;
    min-height: 39px;
    padding: 8px 12px 8px 40px;
    border: 1px solid var(--gris-250);
    border-radius: 9px;
    outline: none;
    background: var(--gris-50);
    font-size: 12px;
  }

  .search-box input:focus {
    border-color: var(--verde-700);
    background: var(--blanco);
    box-shadow: 0 0 0 4px rgba(44, 96, 73, 0.08);
  }
  
.albaran-section {
  position: relative;
}

.search-results {
  position: static;
  width: 100%;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 8px;
  border: 1px solid var(--gris-150);
  border-radius: 11px;
  background: var(--blanco);
  box-shadow: 0 12px 30px rgba(24, 58, 45, 0.10);
  z-index: 100;
}

  .search-result-message {
    padding: 14px;
    color: var(--gris-600);
    font-size: 12px;
  }

  .provider-result-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;

  padding: 13px 15px;

  border: 0;
  border-bottom: 1px solid var(--gris-150);

  text-align: left;
  color: var(--gris-950);
  background: var(--blanco);

  cursor: pointer;

  transition:
    background 0.15s ease,
    padding-left 0.15s ease;
}

.provider-result-item:last-child {
  border-bottom: 0;
}

.provider-result-item:hover,
.provider-result-item:focus {
  padding-left: 19px;
  outline: none;
  background: var(--verde-100);
}

.provider-result-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.provider-result-main strong {
  overflow: hidden;
  color: var(--gris-950);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-result-main small {
  color: var(--gris-600);
  font-size: 12px;
}

.provider-result-meta {
  color: var(--verde-700);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.search-result:last-child{
    border-bottom:none;
}

.search-result:hover{
    background:#f5faf7;
}


  .entity-placeholder {
    min-height: 47px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    margin-top: 7px;
    padding: 8px 11px;
    border: 1px dashed var(--gris-150);
    border-radius: 9px;
    background: var(--gris-50);
  }

  .entity-placeholder strong {
    font-size: 12px;
  }

  .entity-placeholder span {
    color: var(--gris-600);
    font-size: 12px;
  }

  .form-grid {
    display: grid;
    gap: 9px;
  }

  .form-grid-parcela {
    grid-template-columns:
    2.3fr
    .65fr
    .75fr;
  }

  .form-field-full {
    grid-column: 1 / -1;
  }

  .form-grid-pesada {
    grid-template-columns:
      minmax(135px, 0.8fr)
      minmax(135px, 0.8fr)
      minmax(130px, 0.8fr)
      minmax(175px, 1.05fr);
    align-items: start;
  }

  .form-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .form-field > span {
    color: var(--gris-800);
    font-size: 9px;
    font-weight: 800;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid var(--gris-250);
    border-radius: 8px;
    outline: none;
    background: var(--blanco);
    font-size: 11px;
  }

  .form-field input:focus,
  .form-field select:focus,
  .form-field textarea:focus {
    border-color: var(--verde-700);
    box-shadow: 0 0 0 4px rgba(44, 96, 73, 0.08);
  }

  .form-field input:disabled,
  .form-field select:disabled,
  .form-field input[readonly] {
    color: var(--gris-600);
    background: var(--gris-100);
  }

  .form-field-kilos input {
    min-height: 43px;
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -0.03em;
  }

  .form-field-kilos input::-webkit-outer-spin-button,
.form-field-kilos input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.form-field-kilos input{
    appearance:textfield;
    -moz-appearance:textfield;
}

  .input-suffix {
    position: relative;
  }

  .input-suffix input {
    padding-right: 42px;
  }

  .input-suffix b {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    color: var(--gris-600);
    font-size: 11px;
  }

  .btn-upload {
    min-height: 38px;
    padding: 8px 11px;
    border: 0;
    border-radius: 8px;
    color: #ffffff;
    background: var(--verde-900);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
  }

  .btn-upload:hover {
    background: var(--verde-800);
  }

  .btn-upload:disabled {
    cursor: not-allowed;
    color: var(--gris-600);
    background: var(--gris-150);
  }

  .form-field small {
    min-height: 12px;
    overflow: hidden;
    color: var(--gris-600);
    font-size: 8px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .form-field textarea {
    min-height: 38px;
    max-height: 44px;
    resize: none;
  }

  .calculation-card {
    padding: 12px 14px 13px;
    border-radius: 13px;
    color: #ffffff;
    background:
      linear-gradient(
        135deg,
        var(--verde-900),
        var(--verde-800)
      );
    box-shadow: 0 18px 38px rgba(24, 58, 45, 0.14);
  }

  .calculation-header > span {
    padding: 6px 9px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.10);
    font-size: 9px;
    font-weight: 800;
  }

  .calculation-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
  }

  .calculation-grid > div {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.08);
  }

  .calculation-grid span {
    color: rgba(255, 255, 255, 0.66);
    font-size: 8px;
    font-weight: 750;
  }

  .calculation-grid strong {
    font-size: 15px;
  }

  .calculation-total {
    background: #ffffff !important;
  }

  .calculation-total span {
    color: var(--gris-600);
  }

  .calculation-total strong {
    color: var(--verde-900);
    font-size: 19px;
  }

  .farmer-panel {
    position: sticky;
    top: 0;
    padding: 13px;
  }

  .farmer-panel-header button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: var(--gris-400);
    background: var(--gris-100);
  }

  .farmer-empty {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 10px;
    text-align: center;
  }

  .farmer-empty strong {
    font-size: 12px;
  }

  .farmer-empty p {
    margin: 0;
    color: var(--gris-600);
    font-size: 10px;
    line-height: 1.45;
  }

  .recent-deliveries {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gris-150);
  }

  .recent-deliveries h3 {
    margin: 0;
    font-size: 15px;
  }

  .recent-deliveries p {
    margin: 18px 0 5px;
    color: var(--gris-600);
    text-align: center;
    font-size: 10px;
  }


  /* ========================================================
     RESPONSIVE ALBARÁN
  ======================================================== */

  @media (max-width: 1180px) {
    .nuevo-albaran-grid {
      grid-template-columns: 1fr;
    }

    .farmer-panel {
      position: static;
    }
  }

  @media (max-width: 980px) {
    .app-layout {
      grid-template-columns: 74px 1fr;
    }

    .sidebar-context,
    .sidebar-logo-card,
    .nav-item span:last-child,
    .sidebar-footer {
      display: none;
    }

    .nav-item {
      justify-content: center;
    }

    .albaran-column {
      grid-template-columns: 1fr;
    }

    .albaran-column > .albaran-section:nth-of-type(3),
    .albaran-column > .calculation-card {
      grid-column: auto;
    }

    .form-grid-pesada {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calculation-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calculation-total {
      grid-column: span 2;
    }
  }

  @media (max-width: 700px) {
    body {
      overflow: auto;
    }

    #app,
    .app-layout,
    .app-main {
      height: auto;
      min-height: 100vh;
      overflow: visible;
    }

    .app-layout {
      display: block;
    }

    .sidebar {
      height: auto;
      min-height: auto;
      flex-direction: row;
      overflow-x: auto;
    }

    .sidebar-nav {
      flex-direction: row;
    }

    .workspace {
      overflow: visible;
      padding: 12px;
    }

    .albaran-page .page-header {
      align-items: stretch;
      flex-direction: column;
    }

    .albaran-actions {
      width: 100%;
    }

    .albaran-actions .btn {
      flex: 1;
    }

    .form-grid-pesada,
    .form-grid-parcela {
      grid-template-columns: 1fr;
    }

    .form-field-full,
    .calculation-total {
      grid-column: auto;
    }

    .calculation-grid {
      grid-template-columns: 1fr;
    }
  }



  /* ========================================================
     PASO 3 — ESCALA VISUAL MÁS GRANDE
     Sobrescribe únicamente tamaños y espaciados.
  ======================================================== */

  .app-layout {
    grid-template-columns: 245px 1fr;
  }

  .sidebar {
    padding: 22px 14px;
  }

  .sidebar-context {
    min-height: 82px;
    padding: 7px 10px 20px;
  }

  .sidebar-context-label {
    font-size: 10px;
  }

  .sidebar-context strong {
    font-size: 24px;
  }

  .sidebar-context > span:last-child {
    font-size: 12px;
  }

  .nav-item {
    gap: 13px;
    min-height: 48px;
    padding: 12px 13px;
    font-size: 14px;
  }

  .nav-icon {
    width: 24px;
    font-size: 18px;
  }

  .topbar {
    min-height: 72px;
    height: 72px;
    flex: 0 0 72px;
    padding: 12px 26px;
  }

  .topbar h2 {
    font-size: 23px;
  }

  .topbar .eyebrow {
    font-size: 10px;
  }

  .workspace {
    padding: 18px 22px 22px;
  }

  .albaran-page .page-header {
    margin-bottom: 18px;
  }

  .albaran-page .page-header h1 {
    font-size: 36px;
  }

  .albaran-page .page-header p {
    margin-top: 7px;
    font-size: 15px;
  }

  .albaran-actions {
    gap: 12px;
  }

  .albaran-actions .btn {
    min-height: 48px;
    padding: 12px 18px;
    font-size: 14px;
  }

  .nuevo-albaran-grid {
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
  }

  .albaran-column {
    grid-template-columns:
      minmax(0, 1.05fr)
      minmax(410px, 0.95fr);
    gap: 16px;
  }

  .albaran-section {
    padding: 18px 20px 20px;
  }

  .section-header,
  .farmer-panel-header,
  .calculation-header {
    margin-bottom: 15px;
  }

  .section-header h3,
  .farmer-panel-header h3,
  .calculation-header h3 {
    font-size: 18px;
  }

  .section-number {
    width: 31px;
    height: 31px;
    flex-basis: 31px;
    border-radius: 9px;
    font-size: 12px;
  }

  .btn-text {
    font-size: 13px;
  }

  .search-box input {
    min-height: 48px;
    padding: 11px 14px 11px 44px;
    font-size: 14px;
  }

  .search-box > span {
    left: 15px;
    font-size: 20px;
  }

  .entity-placeholder {
    min-height: 66px;
    margin-top: 10px;
    padding: 12px 14px;
  }

  .entity-placeholder strong {
    font-size: 14px;
  }

  .entity-placeholder span {
    font-size: 12px;
  }

  .form-grid {
    gap: 13px;
  }

  .form-grid-pesada {
    grid-template-columns:
      minmax(150px, 0.8fr)
      minmax(165px, 0.9fr)
      minmax(160px, 0.9fr)
      minmax(230px, 1.2fr);
  }

  .form-field {
    gap: 7px;
  }

  .form-field > span {
    font-size: 11px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    min-height: 47px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 13px;
  }

  .form-field-kilos input {
    min-height: 50px;
    font-size: 22px;
  }

  .input-suffix b {
    right: 13px;
    font-size: 13px;
  }

  .btn-upload {
    min-height: 47px;
    padding: 11px 15px;
    border-radius: 9px;
    font-size: 12px;
  }

  .form-field small {
    min-height: 15px;
    margin-top: 1px;
    font-size: 10px;
  }

  .form-field textarea {
    min-height: 54px;
    max-height: 66px;
  }

  .calculation-card {
    padding: 16px 18px 18px;
  }

  .calculation-header > span {
    padding: 7px 11px;
    font-size: 10px;
  }

  .calculation-grid {
    gap: 10px;
  }

  .calculation-grid > div {
    min-height: 76px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .calculation-grid span {
    font-size: 10px;
  }

  .calculation-grid strong {
    font-size: 19px;
  }

  .calculation-total strong {
    font-size: 26px;
  }

  .farmer-panel {
    padding: 18px;
  }

  .farmer-panel-header button {
    width: 38px;
    height: 38px;
  }

  .farmer-empty {
    min-height: 220px;
    gap: 11px;
    padding: 18px;
  }

  .farmer-empty strong {
    font-size: 15px;
  }

  .farmer-empty p {
    font-size: 12px;
  }

  .recent-deliveries {
    margin-top: 18px;
    padding-top: 18px;
  }

  .recent-deliveries h3 {
    font-size: 18px;
  }

  .recent-deliveries p {
    margin-top: 24px;
    font-size: 12px;
  }

  @media (max-width: 1450px) {
    .app-layout {
      grid-template-columns: 225px 1fr;
    }

    .workspace {
      padding: 15px 18px 18px;
    }

    .albaran-page .page-header h1 {
      font-size: 32px;
    }

    .nuevo-albaran-grid {
      grid-template-columns: minmax(0, 1fr) 290px;
    }

    .albaran-column {
      grid-template-columns:
        minmax(0, 1.05fr)
        minmax(380px, 0.95fr);
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
      min-height: 44px;
    }
  }

  @media (max-width: 1180px) {
    .nuevo-albaran-grid {
      grid-template-columns: 1fr;
    }

    .farmer-panel {
      position: static;
    }
  }

/* ========================================================
   DATOS DEL AGRICULTOR
======================================================== */

.farmer-panel {
  overflow: hidden;
}

.farmer-panel .farmer-empty {
  min-height: 0;
  display: block;
  padding: 12px 0 0;
  text-align: initial;
}

.farmer-panel .farmer-avatar {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto 12px;

  border-radius: 17px;

  color: var(--verde-700);
  background: var(--verde-100);

  font-size: 24px;
  font-weight: 750;
}

.farmer-panel .farmer-name {
  display: block;
  margin-bottom: 4px;

  text-align: center;

  color: var(--gris-950);
  font-size: 15px;
  font-weight: 800;
}

.farmer-panel .farmer-type {
  width: auto;
  height: auto;
  display: block;

  margin: 0 0 16px;

  color: var(--verde-700);
  background: transparent;

  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.farmer-panel .farmer-data {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;

  border-top: 1px solid var(--gris-150);
}

.farmer-panel .farmer-row {
  width: 100%;
  min-width: 0;

  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: start;
  gap: 10px;

  padding: 9px 0;

  border-bottom: 1px solid var(--gris-150);
}

.farmer-panel .farmer-row span {
  min-width: 0;

  color: var(--gris-600);
  font-size: 10px;
  line-height: 1.35;
}

.farmer-panel .farmer-row strong {
  min-width: 0;

  overflow-wrap: anywhere;
  word-break: normal;

  color: var(--gris-950);

  text-align: right;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.farmer-panel .recent-deliveries {
  position: relative;
  z-index: 1;

  margin-top: 18px;
  padding-top: 18px;

  border-top: 1px solid var(--gris-150);
  background: var(--blanco);
}

/* ========================================================
   MODALES WEB
======================================================== */

.modal-web {
  position: fixed;
  inset: 0;
  z-index: 9000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(24, 33, 29, 0.48);
  backdrop-filter: blur(5px);
}

.modal-web-card {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid var(--gris-150);
  border-radius: 18px;

  background: var(--blanco);

  box-shadow:
    0 30px 80px rgba(24, 33, 29, 0.24);
}

.modal-web-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  padding: 22px 24px 18px;

  border-bottom: 1px solid var(--gris-150);
}

.modal-web-header h2 {
  margin: 0;

  font-size: 25px;
  letter-spacing: -0.035em;
}

.modal-web-header p {
  margin: 7px 0 0;

  color: var(--gris-600);
  font-size: 13px;
}

.modal-close {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex: 0 0 38px;

  border: 0;
  border-radius: 10px;

  color: var(--gris-600);
  background: var(--gris-100);

  font-size: 24px;
  line-height: 1;
}

.modal-close:hover {
  color: var(--verde-900);
  background: var(--verde-100);
}

.modal-web-body {
  overflow-y: auto;

  padding: 20px 24px;
}

.modal-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.modal-field-full {
  grid-column: 1 / -1;
}

.modal-error {
  margin-top: 16px;
  padding: 11px 13px;

  border-radius: 9px;

  color: var(--rojo);
  background: #fceeee;

  font-size: 12px;
  font-weight: 700;
}

.modal-web-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;

  padding: 16px 24px;

  border-top: 1px solid var(--gris-150);
  background: var(--gris-50);
}

@media (max-width: 700px) {
  .modal-web {
    padding: 10px;
  }

  .modal-web-card {
    max-height: calc(100vh - 20px);
  }

  .modal-form-grid {
    grid-template-columns: 1fr;
  }

  .modal-field-full {
    grid-column: auto;
  }
}

.validation-hint {
  min-height: 17px;
  display: block;
  margin-top: 5px;

  color: var(--gris-600);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
}

.validation-ok {
  color: #258053;
}

.validation-error {
  color: var(--rojo);
}

.form-field input.input-error {
  border-color: var(--rojo);
  box-shadow:
    0 0 0 4px rgba(182, 64, 64, 0.08);
}

.web-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 12000;

  max-width: 360px;

  padding: 13px 17px;

  border-radius: 11px;

  color: #ffffff;
  background: var(--verde-900);

  box-shadow:
    0 18px 45px rgba(24, 58, 45, 0.24);

  font-size: 13px;
  font-weight: 750;

  opacity: 0;
  pointer-events: none;

  transform: translateY(15px);

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.web-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.confirm-modal{

width:430px;
max-width:92vw;

background:#fff;

border-radius:18px;

padding:34px;

box-shadow:0 30px 70px rgba(0,0,0,.18);

display:flex;
flex-direction:column;
align-items:center;

animation:modalPop .18s;
}

.confirm-icon{

width:72px;
height:72px;

border-radius:50%;

background:#e9f4ee;

display:flex;
align-items:center;
justify-content:center;

font-size:34px;

font-weight:700;

color:#1f4d3b;

margin-bottom:18px;
}

.confirm-modal h3{

margin:0;

font-size:24px;

font-weight:700;

text-align:center;
}

.confirm-modal p{

margin:14px 0 28px;

text-align:center;

color:#5b6770;

line-height:1.5;
}

.confirm-actions{

display:flex;

gap:14px;

width:100%;
}

.confirm-actions button{

flex:1;
}

/* ========================================================
   FONDO DEL MODAL DE CONFIRMACIÓN
======================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 15000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  background: rgba(20, 31, 26, 0.58);
  backdrop-filter: blur(5px);
}

.modal-backdrop.hidden {
  display: none !important;
}

.confirm-modal {
  position: relative;
  z-index: 15001;
}

.modal-parcela-card {
  width: min(650px, 100%);
}

.parcela-modal-grid {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);
}

@media (max-width: 700px) {
  .parcela-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   AJUSTE PORTÁTILES 14" — NUEVO ALBARÁN
======================================================== */

/* Solo debe desplazarse la zona principal, no el menú lateral */
.sidebar {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* Evita pequeños desbordamientos internos del menú */
.sidebar-nav {
  min-height: 0;
  overflow: hidden;
}

/* Quitamos información repetida en la cabecera del albarán */
.albaran-page > .page-header .eyebrow,
.albaran-page > .page-header p {
  display: none;
}

/* Cabecera más compacta */
.albaran-page > .page-header {
  margin-bottom: 12px;
}

.albaran-page > .page-header h1 {
  margin: 0;
  font-size: 32px;
}

/* Impide que cualquier columna fuerce el ancho de la cuadrícula */
.nuevo-albaran-grid,
.albaran-column,
.albaran-section,
.form-grid,
.form-grid-pesada,
.form-field {
  min-width: 0;
}

/* Los controles nunca pueden salirse de su columna */
.form-field input,
.form-field select,
.form-field textarea,
.form-field button,
.btn-upload {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Las observaciones se adaptan al espacio disponible */
.form-field textarea {
  resize: vertical;
  overflow-wrap: anywhere;
}

/* El nombre del archivo no debe ensanchar la cuadrícula */
#nombre-archivo-rendimiento {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ajuste específico para portátiles y pantallas medianas */
@media (max-width: 1500px) {

  .app-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .sidebar {
    padding: 16px 10px;
  }

  .sidebar-logo-card {
    margin: 0 4px 14px;
    min-height: 112px;
    padding: 8px;
  }

  .sidebar-logo-card img {
    width: 68px;
    height: 84px;
    flex-basis: 68px;
  }

  .nav-item {
    min-height: 43px;
    padding: 9px 10px;
    font-size: 13px;
  }

  .workspace {
    padding: 14px 16px 18px;
  }

  .nuevo-albaran-grid {
    grid-template-columns:
      minmax(0, 1fr)
      285px;
    gap: 14px;
  }

  .form-grid-pesada {
    grid-template-columns:
      minmax(0, 0.82fr)
      minmax(0, 0.92fr)
      minmax(0, 0.92fr)
      minmax(0, 1.25fr);
    gap: 12px;
  }

  .btn-upload {
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
  }
}

.last-deliveries-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.last-delivery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 7px;
  align-items: stretch;
}

.last-delivery-main {
  width: 100%;
  min-width: 0;
  border: 1px solid #dbe3df;
  border-radius: 11px;
  background: #ffffff;
  padding: 9px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

.last-delivery-main:hover {
  border-color: #89a79a;
  background: #f7faf8;
}

.last-delivery-main span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.last-delivery-main strong {
  font-size: 13px;
  color: #183a2d;
}

.last-delivery-main small {
  overflow: hidden;
  color: #6b7a73;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-delivery-main b {
  flex: 0 0 auto;
  font-size: 12px;
  color: #183a2d;
}

.last-delivery-print {
  border: 1px solid #dbe3df;
  border-radius: 11px;
  background: #ffffff;
  cursor: pointer;
  font-size: 15px;
}

.last-delivery-print:hover {
  background: #edf4f0;
}