/* ══════════════════════════════════════════════════════════════════════════
   DIFAST — Sistema de diseño (adaptado de la maqueta "DIFAST Web Corporativa
   y Portal"). Fuentes auto-alojadas en css/fonts.css (ver App.razor).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --difast-red:#F32B00;
  --difast-red-dark:#C22200;
  --difast-black:#1A1A1A;
  --difast-charcoal:#3B3F45;
  --difast-grey:#C9C9C9;
  --difast-grey-light:#F4F4F4;
  --difast-white:#FFFFFF;
  --success:#16A34A;
  --warning:#D97706;
  --danger:#DC2626;
  --info:#2563EB;
  --client:#7C3AED;
  --font-head:'Montserrat',Arial,sans-serif;
  --font-body:'Inter',Arial,sans-serif;
  --border:1px solid var(--difast-grey);
  --radius:2px;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--difast-black);background:var(--difast-grey-light)}
img{max-width:100%;display:block}
a{color:var(--difast-red-dark);text-decoration:none}
a:hover{color:var(--difast-black);text-decoration:underline}
:focus-visible{outline:3px solid var(--difast-red-dark);outline-offset:2px}
[tabindex="-1"]:focus-visible{outline:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Tipografía ---------- */
h1,h2,h3,h4,.h-style{font-family:var(--font-head);font-weight:800;text-transform:uppercase;line-height:1.2;letter-spacing:.02em;overflow-wrap:break-word}
.t-red .rl{color:var(--difast-red)}
.kicker{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--difast-red-dark)}
.lead{font-size:18px;color:#3B3F45;max-width:64ch}

/* Barra decorativa negra con segmento rojo */
.brandbar{display:flex;height:6px;width:120px;margin:14px 0 20px}
.brandbar::before{content:"";flex:1;background:var(--difast-black)}
.brandbar::after{content:"";width:36px;background:var(--difast-red)}
.brandbar--center{margin-left:auto;margin-right:auto}

/* Bullets triangulares */
.tri-list{list-style:none}
.tri-list li{position:relative;padding-left:24px;margin-bottom:10px}
.tri-list li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:12px;background:var(--difast-red);clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;padding:0 22px;min-height:46px;border:2px solid transparent;border-radius:var(--radius);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--difast-red);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--difast-red-dark);color:#fff}
.btn-secondary{background:var(--difast-charcoal);color:#fff}
.btn-secondary:hover:not(:disabled){background:var(--difast-black);color:#fff}
.btn-outline{background:transparent;color:var(--difast-black);border-color:var(--difast-black)}
.btn-outline:hover:not(:disabled){background:var(--difast-black);color:#fff}
.btn-outline-red{background:transparent;color:var(--difast-red-dark);border-color:var(--difast-red-dark)}
.btn-outline-red:hover:not(:disabled){background:var(--difast-red-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--difast-black);border-color:transparent}
.btn-ghost:hover:not(:disabled){background:#e7e7e7}
.btn-sm{min-height:38px;padding:0 14px;font-size:14px}
.btn-lg{min-height:52px;padding:0 30px;font-size:16px}
.btn-block,.btn-full{width:100%}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover:not(:disabled){background:#12813B;color:#fff}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger)}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Botón icono (editar/eliminar por fila) */
.btn-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:var(--border);border-radius:var(--radius);cursor:pointer;color:#5A5F66;font-size:18px;line-height:1;flex-shrink:0}
.btn-icon:hover{border-color:var(--danger);color:var(--danger)}
.btn-icon-edit:hover{border-color:var(--difast-red-dark);color:var(--difast-red-dark)}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap}
.badge-success{background:#DCFCE7;color:#14532D}
.badge-warning{background:#FEF3C7;color:#92400E}
.badge-danger{background:#FEE2E2;color:#991B1B}
.badge-info{background:#DBEAFE;color:#1E3A8A}
.badge-client{background:#EDE9FE;color:#5B21B6}
.badge-neutral{background:#E5E5E5;color:#3B3F45}
.badge-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ---------- Tarjetas ---------- */
.card{background:var(--difast-white);border:var(--border);border-radius:var(--radius)}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 22px;border-bottom:var(--border)}
.card-title{font-size:16px;letter-spacing:.04em}
/* Controles a la derecha de la cabecera (buscador + botón), que se apilan si no caben */
.card-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.card-body{padding:22px}
.card-footer{padding:16px 22px;border-top:var(--border)}

/* ---------- Formularios ---------- */
.field,.form-group{margin-bottom:18px}
.field label,.form-group label,label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--difast-black);text-transform:none;letter-spacing:0}
.field .hint,.form-hint{font-size:13px;color:#5A5F66;margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=tel],input[type=search],select,textarea,
.form-input,.form-select,.form-textarea{width:100%;font-family:var(--font-body);font-size:15px;color:var(--difast-black);background:#fff;border:var(--border);border-radius:var(--radius);padding:11px 12px;min-height:46px}
textarea,.form-textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus,.form-input:focus,.form-select:focus,.form-textarea:focus{outline:3px solid rgba(194,34,0,.45);outline-offset:0;border-color:var(--difast-red-dark)}
input[aria-invalid=true],.field-error input,.invalid{border-color:var(--danger)}
.error-msg,.validation-message,.inline-error{color:var(--danger);font-size:13px;margin-top:5px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.check,.checkbox-label{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #E5E5E5}
.check:last-child,.checkbox-label:last-child{border-bottom:0}
.check input,.checkbox-label input{width:20px;height:20px;margin-top:2px;accent-color:var(--difast-red-dark);flex:none}
.check label,.checkbox-label{font-size:15px;margin-bottom:0}
.check .hint{display:block;font-size:13px;color:#5A5F66}
input[readonly],input[readonly]:focus{background:var(--difast-grey-light);color:#5A5F66;border-color:var(--difast-grey);box-shadow:none;cursor:default;outline:none}

/* ---------- Alertas / toasts / estados ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius);font-size:14.5px;border:1px solid;margin-bottom:18px}
.alert-success{background:#F0FDF4;border-color:#BBF7D0;color:#14532D}
.alert-error{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
.alert-info{background:#EFF6FF;border-color:#BFDBFE;color:#1E3A8A}
.alert-warning{background:#FFFBEB;border-color:#FDE68A;color:#92400E}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,16px);background:var(--difast-black);color:#fff;padding:13px 22px;border-radius:var(--radius);font-size:14.5px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:200;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.toast-success{background:var(--success)}
.empty-state{text-align:center;padding:72px 24px;color:#5A5F66}
.empty-state .tri{width:34px;height:38px;margin:0 auto 24px;background:var(--difast-grey);clip-path:polygon(0 0,100% 50%,0 100%)}
.empty-state h3{font-size:15px;color:var(--difast-black);margin-bottom:10px}
.empty-state p{font-size:15px;margin-bottom:0;line-height:1.6}
.empty-state .btn{margin-top:28px}
.loading-spinner{display:flex;align-items:center;justify-content:center;gap:10px;padding:48px;color:#5A5F66;font-size:14px}
.loading-spinner::before{content:'';width:20px;height:20px;border:2px solid var(--difast-grey);border-top-color:var(--difast-red-dark);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Tablas ---------- */
.table-scroll,.table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data,table{width:100%;border-collapse:collapse;font-size:14.5px}
table.data{min-width:560px}
table.data th,thead th{font-family:var(--font-body);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:#5A5F66;text-align:left;padding:12px 14px;border-bottom:2px solid var(--difast-grey);white-space:nowrap;background:#FAFAFA}
table.data td,td{padding:13px 14px;border-bottom:1px solid #E5E5E5;vertical-align:middle}
table.data tbody tr:hover,tbody tr:hover{background:#FAFAFA}
table.data .num,td.num{text-align:right;font-variant-numeric:tabular-nums}
table.data th.num,th.num{text-align:right}
.row-link{font-weight:600}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:10px;color:var(--difast-black);text-decoration:none;flex:none}
.logo:hover{text-decoration:none;color:var(--difast-black)}
.logo svg{width:36px;height:36px;flex:none}
.logo polygon{stroke:var(--logo-gap,#fff);stroke-width:2.5;stroke-linejoin:round}
.logo .p{fill:var(--logo-fill,#1A1A1A)}
.logo .r{fill:var(--difast-red)}
.logo .wordmark{font-family:var(--font-head);font-weight:800;font-size:22px;letter-spacing:.06em}
.logo .wordmark sup{font-size:9px;font-weight:600}
.sidebar-brand .logo,.portal-topbar .logo,.footer-brand .logo,.section-dark .logo{--logo-fill:#fff;--logo-gap:#3B3F45}

/* ---------- Cabecera pública ---------- */
.site-header{background:#fff;border-bottom:var(--border);position:sticky;top:0;z-index:100;transform:translateZ(0)}
.site-header .container{display:flex;align-items:center;gap:28px;min-height:76px}
.main-nav{display:flex;gap:4px;margin-left:auto}
.main-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-weight:500;font-size:15px;color:var(--difast-black);border-bottom:3px solid transparent}
.main-nav a:hover{text-decoration:none;color:var(--difast-red-dark)}
.main-nav a[aria-current=page]{border-bottom-color:var(--difast-red);font-weight:600}
.header-actions{display:flex;align-items:center;gap:16px}
.lang-switch{display:flex;border:var(--border);border-radius:var(--radius);overflow:hidden}
.lang-switch button{font-family:var(--font-body);font-size:13px;font-weight:600;background:#fff;color:#5A5F66;border:0;padding:0 10px;min-height:34px;min-width:38px;cursor:pointer}
.lang-switch button+button{border-left:var(--border)}
.lang-switch button:hover{background:var(--difast-grey-light);color:var(--difast-black)}
.lang-switch button[aria-pressed=true]{background:var(--difast-black);color:#fff}
.lang-switch-dark{border-color:#6A6F76}
.lang-switch-dark button{background:transparent;color:#C9C9C9}
.lang-switch-dark button+button{border-left-color:#6A6F76}
.lang-switch-dark button:hover{background:#2E3136;color:#fff}
.lang-switch-dark button[aria-pressed=true]{background:#fff;color:var(--difast-black)}
.nav-toggle{display:none;background:none;border:var(--border);border-radius:var(--radius);width:46px;height:46px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--difast-black)}
.portal-topbar .nav-toggle span{background:#fff}

/* ---------- Hero y secciones públicas ---------- */
.hero{background:var(--difast-black);color:#fff;position:relative;overflow:hidden}
.hero .container{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.hero h1{font-size:clamp(26px,4.2vw,52px);color:#fff}
.hero h1 .rl{color:var(--difast-red)}
.hero .kicker,.page-hero .kicker,.section-dark .kicker,.cta-band .kicker{color:#FF8A6B}
.hero p{color:#D8D8D8;font-size:18px;margin:18px 0 30px;max-width:52ch}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-media{position:relative;min-height:340px}
.hero-media .cover-img{position:absolute;inset:0}
.cover-img{width:100%;height:100%;object-fit:cover}
.section{padding:72px 0}
.section-white{background:#fff}
.section-dark{background:var(--difast-charcoal);color:#fff}
.section-dark .lead{color:#D8D8D8}
.section-head{max-width:720px;margin-bottom:44px}
.section-head h2{font-size:clamp(24px,3vw,34px)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.feature,.feature-card{background:#fff;border:var(--border);padding:28px}
.section-white .feature{background:var(--difast-grey-light)}
.feature .tri{width:16px;height:18px;background:var(--difast-red);clip-path:polygon(0 0,100% 50%,0 100%);margin-bottom:18px}
.feature h3,.feature-title{font-size:15px;letter-spacing:.05em;margin-bottom:10px;font-family:var(--font-head);font-weight:800;text-transform:uppercase}
.feature p,.feature-text{font-size:14.5px;color:#3B3F45}
.media-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.media-split .media{min-height:320px;position:relative}
.media-split .media .cover-img{position:absolute;inset:0}
.media-frame{position:relative}
.media-frame::before{content:"";position:absolute;left:-14px;top:-14px;width:120px;height:120px;background:linear-gradient(var(--difast-black),var(--difast-black)) 0 0/100% 6px no-repeat,linear-gradient(var(--difast-black),var(--difast-black)) 0 0/6px 100% no-repeat}
.media-frame::after{content:"";position:absolute;right:-14px;bottom:-14px;width:120px;height:120px;background:linear-gradient(var(--difast-red),var(--difast-red)) 100% 100%/100% 6px no-repeat,linear-gradient(var(--difast-red),var(--difast-red)) 100% 100%/6px 100% no-repeat}
.num-item{border-top:6px solid var(--difast-black);padding-top:20px;position:relative}
.num-item::before{content:"";position:absolute;top:-6px;left:0;width:44px;height:6px;background:var(--difast-red)}
.num-item .num{font-family:var(--font-head);font-weight:800;font-size:44px;color:var(--difast-grey);line-height:1}
.num-item h3{font-size:16px;margin:12px 0 10px}
.num-item p{font-size:14.5px;color:#3B3F45}
.stat{text-align:center}
.stat .val{font-family:var(--font-head);font-weight:800;font-size:42px;color:var(--difast-red)}
.section-dark .stat .val{color:var(--difast-red)}
.stat .lbl{font-size:14px;color:inherit;opacity:.85}
.cta-band{background:var(--difast-black);color:#fff;padding:56px 0}
.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(22px,2.6vw,30px)}
.page-hero{background:var(--difast-black);color:#fff;padding:56px 0}
.page-hero h1{color:#fff;font-size:clamp(26px,3.4vw,42px)}
.page-hero .lead{color:#D8D8D8;margin-top:14px}
.breadcrumb{font-size:13px;margin-bottom:18px;color:#B5B5B5}
.breadcrumb a{color:#D8D8D8}

/* ---------- Footer ---------- */
.site-footer,.public-footer{background:var(--difast-charcoal);color:#CFCFCF;font-size:14.5px;margin-top:auto}
.site-footer a,.public-footer a{color:#E8E8E8}
.site-footer a:hover,.public-footer a:hover{color:#fff}
.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px;padding-top:56px;padding-bottom:40px}
.footer-main h4{color:#fff;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.footer-main ul{list-style:none}
.footer-main li{margin-bottom:10px}
.footer-brand .logo{color:#fff}
.footer-brand p{margin-top:14px;max-width:36ch}
.footer-legal{border-top:1px solid #4A4E55;padding-top:20px;padding-bottom:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#A8A8A8}
.footer-legal ul{list-style:none;display:flex;gap:22px;flex-wrap:wrap}
address{font-style:normal;line-height:1.8}

/* ---------- Auth (login / recuperar / restablecer) ---------- */
.auth-page{min-height:100vh;display:flex;flex-direction:column;background:var(--difast-grey-light)}
.auth-topbar{background:#fff;border-bottom:var(--border)}
.auth-topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px}
.auth-card{width:100%;max-width:440px;background:#fff;border:var(--border);border-top:6px solid var(--difast-black);position:relative;padding:38px 38px 34px}
.auth-card::before{content:"";position:absolute;top:-6px;left:0;width:56px;height:6px;background:var(--difast-red)}
.auth-card h1{font-size:20px;margin-bottom:6px}
.auth-card .sub{font-size:14.5px;color:#5A5F66;margin-bottom:26px}
.auth-links{margin-top:20px;font-size:14px;text-align:center}
.auth-footer{text-align:center;padding:20px;font-size:13px;color:#5A5F66}

/* ---------- Portal ---------- */
.portal{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--difast-charcoal);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidebar-brand{padding:22px 20px;border-bottom:1px solid #4A4E55}
.sidebar-brand .logo{color:#fff}
.sidebar-client{font-size:13px;color:#B9BDC3;margin-top:12px}
.sidebar-client strong{display:block;color:#fff;font-size:14.5px;font-weight:600}
.side-nav{flex:1;padding:14px 0;overflow-y:auto}
.side-nav a{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 20px;color:#D3D6DA;font-size:15px;font-weight:500;border-left:4px solid transparent}
.side-nav a:hover{text-decoration:none;background:#33363B;color:#fff}
.side-nav a[aria-current=page],.side-nav a.active{background:#2E3136;color:#fff;border-left-color:var(--difast-red);font-weight:600}
.side-nav svg{width:19px;height:19px;flex:none}
.sidebar-foot{padding:18px 20px;border-top:1px solid #4A4E55;display:grid;gap:12px}
.btn-logout{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:44px;background:transparent;border:1px solid #6A6F76;border-radius:var(--radius);color:#E8E8E8;font-family:var(--font-body);font-size:14.5px;font-weight:600;cursor:pointer}
.btn-logout:hover{background:#2E3136;border-color:#9AA0A7;color:#fff;text-decoration:none}
.portal-main{padding:32px 36px 64px;min-width:0}
.portal-topbar{display:none}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.page-head h1{font-size:24px}
.page-head .sub{font-size:14.5px;color:#5A5F66;margin-top:6px;text-transform:none;font-family:var(--font-body);font-weight:400;letter-spacing:0}
.portal-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
.stack{display:grid;gap:26px}
.mini-form{background:var(--difast-grey-light);border:var(--border);padding:18px;margin-bottom:20px}
.mini-form .form-row{grid-template-columns:180px 1fr auto;align-items:end}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters button{font-family:var(--font-body);font-size:14px;font-weight:600;min-height:40px;padding:0 16px;background:#fff;border:var(--border);border-radius:999px;color:#3B3F45;cursor:pointer}
.filters button:hover{border-color:var(--difast-charcoal)}
.filters button[aria-pressed=true]{background:var(--difast-black);border-color:var(--difast-black);color:#fff}
.pending-item{padding:16px 0;border-bottom:1px solid #E5E5E5}
.pending-item:first-child{padding-top:0}
.pending-item:last-child{border-bottom:0;padding-bottom:0}
.pending-item .meta{font-size:13px;color:#5A5F66;margin:4px 0 10px}
.order-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #E5E5E5;font-size:14.5px;flex-wrap:wrap}
.order-line:last-child{border-bottom:0}
.order-line .who{display:flex;flex-direction:column}
.order-line .who .date{font-size:12.5px;color:#5A5F66}
.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:var(--border);background:#fff}
.detail-grid>div{padding:16px 20px;border-right:var(--border)}
.detail-grid>div:last-child{border-right:0}
.detail-grid .lbl{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#5A5F66;margin-bottom:5px}
.detail-grid .val{font-size:15.5px;font-weight:600}
.diff-old{color:#991B1B;text-decoration:line-through;font-size:13px}
.diff-new{color:#14532D;font-weight:700}
.line-item{display:grid;grid-template-columns:110px minmax(160px,1fr) 130px 110px 44px;gap:12px;align-items:end;padding:14px 0;border-bottom:1px solid #E5E5E5}
.line-item .field{margin:0}
.actions-bar{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.dl-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;min-height:44px;padding:0 4px}

/* ---------- Legales ---------- */
.legal-page .container{max-width:820px}
.legal-page h2{font-size:18px;margin:32px 0 12px}
.legal-page p{margin-bottom:14px;color:#3B3F45}

/* ---------- Contacto (mapa) ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:32px;align-items:start}
.contact-map{width:100%;height:340px;border:var(--border);overflow:hidden}
.contact-map iframe{width:100%;height:100%;border:0;display:block}

/* ════════════════════════════════════════════════════════════════════════
   EXTENSIONES — patrones de la app real sin equivalente exacto en la maqueta
   (combobox de producto, editor de línea de pedido, desglose de palés,
   panel de stock, estado vacío de líneas, UI de errores de Blazor).
   Reutilizan la misma paleta/tipografía/--radius que el resto del sistema.
   ════════════════════════════════════════════════════════════════════════ */

/* Combobox de artículo con búsqueda (NewOrderPage) */
.combobox{position:relative}
.combobox::after{content:"";position:absolute;top:50%;right:14px;width:9px;height:9px;margin-top:-7px;border-right:2px solid #5A5F66;border-bottom:2px solid #5A5F66;transform:rotate(45deg);pointer-events:none}
.combobox input{padding-right:34px}
.combobox-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;max-height:260px;overflow-y:auto;background:#fff;border:var(--border);border-radius:var(--radius);box-shadow:0 6px 18px rgba(26,26,26,.14);padding:4px}
.combobox-option{padding:10px 12px;border-radius:var(--radius);font-size:14.5px;color:var(--difast-black);cursor:pointer}
.combobox-option:hover{background:var(--difast-grey-light)}
.combobox-option.selected{background:var(--difast-black);color:#fff}
.combobox-empty{padding:10px 12px;font-size:14px;color:#5A5F66}

/* Selector de tipo de pedido (pills) y estado bloqueado tras añadir líneas */
.order-type-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.order-type-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 22px;border-radius:999px;font-family:var(--font-body);font-size:14.5px;font-weight:600;cursor:pointer;border:var(--border);background:#fff;color:#3B3F45;transition:background .15s,color .15s,border-color .15s}
.order-type-btn:hover{border-color:var(--difast-charcoal)}
.order-type-btn.active{border-color:var(--difast-black);background:var(--difast-black);color:#fff}
.order-type-display{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.type-locked-note{font-size:13px;color:#5A5F66}

/* Panel de edición de línea de pedido */
.line-editor{margin:16px 0;border:var(--border);border-top:3px solid var(--difast-red-dark);border-radius:var(--radius);background:var(--difast-grey-light);overflow:visible}
.line-editor-header{background:var(--difast-charcoal);color:#fff;padding:10px 18px;font-family:var(--font-head);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.line-editor-body{padding:20px 20px 4px}
.line-editor-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:14px 20px 18px}

/* Aviso de stock disponible en el editor de línea (Salida) */
.stock-info{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius);margin-bottom:16px;font-size:14px;flex-wrap:wrap}
.stock-info-ok{background:#F0FDF4;border:1px solid #BBF7D0;color:#14532D}
.stock-info-zero{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.stock-info-label{font-weight:600}
.stock-error{margin-top:8px;padding:10px 14px;background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--radius);font-size:13.5px;color:var(--danger)}

/* Estado vacío de líneas de pedido */
.empty-lines{padding:40px 24px;text-align:center;color:#5A5F66;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:16px}

/* Fila resaltada mientras se edita, acciones de fila, nombre/ref. de artículo en tabla de líneas */
tr.row-editing{background:var(--difast-grey-light)}
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.line-product-name{font-weight:600}
.line-product-ref{font-size:12px;color:#5A5F66;margin-top:2px}
.text-muted{color:#5A5F66}

/* Buscador de una tabla (stock, pedidos, facturas). Alto igual al del botón pequeño de al lado
   (.btn-sm = 38px) para que los dos controles queden alineados, y lupa dentro del campo.
   Se cuelga de .search-box y no de una clase suelta: la regla base input[type=search] pesa más
   que una clase, y sin el elemento en el selector el padding de la lupa no se llega a aplicar. */
.search-box{position:relative;display:inline-flex;align-items:center}
.search-box>svg{position:absolute;left:11px;width:16px;height:16px;color:#8A8F96;pointer-events:none}
.search-box>input[type=search]{width:auto;min-width:240px;height:38px;min-height:38px;padding:0 12px 0 34px;font-size:14px;background:#FAFAFA;border:1px solid #D4D4D4}
.search-box>input[type=search]::placeholder{color:#8A8F96}
.search-box>input[type=search]:hover{background:#fff;border-color:#B5B5B5}
.search-box>input[type=search]:focus{background:#fff}
.search-box>input[type=search]::-webkit-search-cancel-button{cursor:pointer}

/* Barra de una lista: filtros a la izquierda, buscador pegado a la derecha. */
.list-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.list-toolbar>.search-box{margin-left:auto}
/* Desplegables de filtro de la barra (mes / año): mismo alto y acabado que el buscador. */
.list-toolbar select.toolbar-select{width:auto;min-width:150px;height:38px;min-height:38px;padding:0 10px;font-size:14px;background:#FAFAFA;border:1px solid #D4D4D4}
.list-toolbar select.toolbar-select:hover{background:#fff;border-color:#B5B5B5}
.list-toolbar .filters{margin-bottom:0}

/* Tabla de stock del dashboard: un punto más pequeña que el resto para que el desplegable de lote
   quepa entero (la etiqueta lleva lote + caducidad con el año completo). */
table.data.stock-table{font-size:13.5px}
table.data.stock-table th{font-size:11.5px;padding:10px 12px}
table.data.stock-table td{padding:10px 12px}
/* Cuando la fila está filtrada por un lote, las tres cifras son las DE ESE LOTE y no las del
   artículo: se marcan para que no se lean como el total. */
.stock-table tr.lot-filtered td.num{background:#FFF6F3}

/* Filtro de lote de la tabla de stock y lote de una línea de pedido. El min-width empuja el ancho
   de la columna: con menos, el navegador corta la etiqueta a mitad de la fecha. */
.lot-filter{min-width:210px;max-width:100%;padding:5px 8px;font-size:12.5px;min-height:32px}
.lot-meta{font-size:11.5px;color:#5A5F66;margin-top:3px}
.lot-expired{color:var(--danger);font-weight:600}
.line-lote{font-size:11.5px;color:#5A5F66;margin-top:2px}

/* Desglose de palés en el detalle de pedido (multireferencia / entero+pico) */
.pallet-breakdown{display:flex;flex-direction:column;gap:3px;line-height:1.4}
.pallet-summary{font-weight:600;color:var(--difast-black);font-size:14px}
.pallet-summary-units{font-weight:500;color:#5A5F66}
.pallet-part{font-size:13px;margin-left:2px;padding-left:10px;border-left:2px solid var(--difast-grey);color:#5A5F66}
.pallet-part-count{color:var(--difast-black);font-weight:500}
.pallet-part-units{color:#5A5F66;margin-left:2px}
/* Aviso de arrastre: el palé multiref salió entero y se llevó referencias no pedidas */
.pallet-dragged{margin-top:5px;font-size:12px;line-height:1.35;color:#92400E;background:#FEF3C7;border-left:2px solid var(--warning);border-radius:3px;padding:4px 7px}

/* Banner de modificación pendiente (PendingClient) — extiende el patrón #changesCard de la maqueta */
.modification-banner{background:#F5F3FF;border:1px solid #DDD6FE;border-radius:var(--radius);padding:18px 22px;margin-bottom:20px}
.modification-banner p{margin:0;font-size:14.5px;color:#5B21B6}
.modification-banner .btn-group{margin-top:14px}
.change-diff{display:flex;align-items:stretch;gap:12px;margin-top:14px;flex-wrap:wrap}
.change-row{display:flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:var(--radius);background:#fff;border:1px solid #E5E0F5;min-width:160px}
.change-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8B7DB8}
.change-value{font-size:15px;font-weight:700}
.change-old .change-value{color:#9CA3AF;text-decoration:line-through}
.change-new{border-color:var(--success);background:#F0FDF4}
.change-new .change-value{color:#15803D}
.change-arrow{align-self:center;font-size:18px;font-weight:700;color:#8B7DB8}

/* Blazor error UI / error boundary (chrome del framework, no de marca) */
#blazor-error-ui{display:none;position:fixed;bottom:0;left:0;right:0;padding:12px 24px;background:var(--difast-black);color:#fff;font-size:13.5px;z-index:9999;text-align:center}
#blazor-error-ui .reload{color:#FF8A6B;text-decoration:underline;margin:0 8px}
#blazor-error-ui .dismiss{cursor:pointer;float:right;opacity:.8}
.blazor-error-boundary{background:var(--difast-black);padding:14px 18px;color:#fff;border-radius:var(--radius)}
.blazor-error-boundary::after{content:"Ha ocurrido un error en el componente."}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .footer-main{grid-template-columns:1fr 1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal-grid{grid-template-columns:minmax(0,1fr)}
  .portal{grid-template-columns:232px minmax(0,1fr)}
  .portal-main{padding:26px 24px 56px}
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid>div:nth-child(2n){border-right:0}
  .detail-grid>div:nth-child(-n+2){border-bottom:var(--border)}
}
@media (max-width:860px){
  /* Todo en una sola fila: el ancho justo cabe en un movil de 360px */
  .site-header .container{flex-wrap:nowrap;gap:12px}
  .site-header .logo{gap:8px}
  .site-header .logo svg{width:32px;height:32px}
  .site-header .logo .wordmark{font-size:18px}
  .header-actions{gap:8px;margin-left:auto}
  .header-actions .lang-switch button{min-width:32px;padding:0 7px}
  .nav-toggle{width:42px;height:42px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:var(--border);flex-direction:column;padding:10px 0;margin:0}
  .main-nav.open{display:flex}
  .main-nav a{min-height:48px;padding:0 24px;border-bottom:0;border-left:4px solid transparent}
  .main-nav a[aria-current=page]{border-left-color:var(--difast-red);background:var(--difast-grey-light)}
  .nav-toggle{display:flex;margin-left:auto}
  .header-actions .btn{display:none}
  .hero .container{grid-template-columns:minmax(0,1fr);padding-top:52px;padding-bottom:52px}
  .hero-media{min-height:260px}
  .grid-2,.grid-3,.media-split,.contact-grid{grid-template-columns:1fr}
  .media-split{gap:36px}
  .section{padding:52px 0}
  .form-row{grid-template-columns:1fr}
  /* Portal móvil */
  .portal{display:block}
  .portal-topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--difast-charcoal);color:#fff;padding:0 18px;min-height:62px;position:sticky;top:0;z-index:120}
  .portal-topbar .logo{color:#fff}
  .portal-topbar .logo .wordmark{font-size:18px}
  .portal-topbar .nav-toggle{display:flex;border-color:#6A6F76;margin-left:0}
  .sidebar{position:fixed;inset:0 auto 0 0;width:280px;max-width:85vw;height:100vh;z-index:150;transform:translateX(-100%);transition:transform .22s ease}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .portal-main{padding:22px 18px 56px}
  .page-head h1{font-size:21px}
  .mini-form .form-row{grid-template-columns:1fr}
  .line-item{grid-template-columns:1fr 1fr;gap:12px}
  .line-item .li-article{grid-column:1/-1}
  .footer-main{grid-template-columns:1fr;padding-top:44px;padding-bottom:32px}
  .cta-band .container{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){
  .grid-4{grid-template-columns:1fr}
  .card-tools{width:100%}
  .search-box{width:100%}
  .search-box>input[type=search]{width:100%;min-width:0}
  .hero-ctas .btn{width:100%}
  .actions-bar .btn{width:100%}
  .auth-card{padding:28px 22px}
}
@media (max-width:345px){
  /* Moviles muy estrechos: se deja solo el hexagono, que ya identifica la marca */
  .site-header .logo .wordmark{display:none}
}