/* Extras del panel interno (usa portal.css como base) */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.sec-head h1{margin:0}
.wrap-narrow{max-width:640px}

.ok{background:#e8f6ec;color:#1c7a3d;border:1px solid #bfe5cb;border-radius:10px;padding:12px 14px;margin-bottom:18px;font-size:.92rem}
.err{background:#fdeaea;color:var(--red-dark);border:1px solid #f3c9c6;border-radius:10px;padding:11px 14px;margin-bottom:16px;font-size:.9rem}

.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:600}
.tag.on{background:#e8f6ec;color:#1c7a3d}
.tag.off{background:#eee;color:#888}

.btn-off{opacity:.45;pointer-events:none}

/* Formularios */
.form-card{padding:24px}
.field select,.field input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.95rem;background:#fff;font-family:inherit;color:var(--dark)}
.field select:focus,.field input:focus{outline:none;border-color:var(--coral)}
.field .help{display:block;margin-top:6px;font-size:.78rem;color:var(--muted);font-weight:400}
.field-estado select{border-color:var(--coral);font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-top:8px}
@media(max-width:560px){.grid2{grid-template-columns:1fr}}

.check{display:flex;align-items:center;gap:9px;font-size:.9rem;color:#444;margin:2px 0 20px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--red)}

/* Tarjetas de envío en el panel */
.op-admin .op-top{align-items:center}
.op-actions{display:inline-flex;gap:14px;flex-wrap:wrap;align-items:center}
.sec-head h1{font-size:1.25rem}

/* Selector rápido de estado en la lista */
.quick-form{margin:0}
.quick-select{border:1px solid var(--line);border-radius:20px;padding:5px 26px 5px 12px;font-size:.78rem;font-weight:600;cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center}
.quick-select:focus{outline:none;border-color:var(--coral)}


/* ================= Panel de operaciones (v6) ================= */
.content{padding:34px 38px 90px;max-width:1280px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
.sec-head h1{font-size:1.75rem;letter-spacing:-.02em;margin:0}
.sec-sub{margin:4px 0 0;color:var(--muted);font-size:.88rem}
.btn{padding:8px 15px;font-size:.84rem;font-weight:500;border-radius:9px}

/* toolbar */
.atoolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.asearch{position:relative;flex:1 1 300px;min-width:240px}
.asearch svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.asearch input{width:100%;padding:14px 16px 14px 46px;border:1px solid var(--line);border-radius:12px;font-size:.94rem;background:#fff;color:var(--ink);outline:none;font-family:inherit}
.asearch input:focus{border-color:var(--red)}
.adates{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.adates .fld{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);white-space:nowrap}
.adates input[type=date]{padding:12px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);font-size:.88rem;font-family:inherit;outline:none}
.adates input[type=date]:focus{border-color:var(--red)}
.fclear{background:transparent;border:1px solid var(--line);color:var(--muted);border-radius:11px;padding:12px 16px;font-size:.82rem;cursor:pointer;font-family:inherit;white-space:nowrap}
.fclear:hover{color:var(--red);border-color:var(--red)}

.fold-bar{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.foldlink{background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;font-family:inherit;padding:2px}
.foldlink:hover{color:var(--red)}
.fold-bar .sep{color:#cfd4db;font-size:.8rem}

/* carpeta por cliente */
.folder{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:14px;overflow:hidden;box-shadow:0 2px 10px rgba(24,26,32,.04)}
.folder-head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;
  padding:18px 22px;transition:background .15s}
.folder-head:hover{background:var(--line-2)}
.fh-left{display:flex;align-items:center;gap:12px;min-width:0}
.fh-caret{display:flex;color:var(--muted);transition:transform .22s}
.fh-caret svg{width:15px;height:15px}
.folder.open .fh-caret{transform:rotate(90deg);color:var(--red)}
.fh-ico{display:flex;color:var(--red)}
.fh-ico svg{width:21px;height:21px}
.fh-name{font-size:1.02rem;font-weight:600;color:var(--dark);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-right{display:flex;align-items:center;gap:10px;flex:none}
.fh-count{font-size:.82rem;color:var(--muted)}
.fh-count b{color:var(--ink);font-weight:600}
.fh-act{font-size:.72rem;font-weight:600;color:var(--blue);background:var(--blue-bg);padding:4px 10px;border-radius:20px;white-space:nowrap}

.folder-body{display:none;border-top:1px solid var(--line)}
.folder.open .folder-body{display:block}

/* tabla de operaciones dentro de la carpeta */
.optable-a{width:100%}
.ot-head,.ot-row{display:grid;grid-template-columns:1.1fr 1fr .85fr .85fr 1.15fr .75fr;gap:12px;align-items:center;padding:13px 22px}
.ot-head{background:var(--line-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.ot-row{border-top:1px solid var(--line);font-size:.9rem;transition:background .15s}
.ot-row:hover{background:#fbfcfd}
.ot-ref{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--dark)}
.ot-ref .ico{display:flex;color:var(--muted);flex:none}
.ot-ref .ico svg{width:17px;height:17px}
.ot-mut{color:var(--muted)}
.ot-ruta i{font-style:normal;color:#c3c8d0;margin:0 3px}
.ot-acc{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}
.ot-acc .link{font-size:.82rem}
.ot-estado .quick-form{margin:0}
.ot-estado .quick-select{width:100%;max-width:190px}

/* caret + detalle comex desplegable */
.ot-caret{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;margin:0;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:5px;flex:none;transition:transform .18s,background .15s,color .15s}
.ot-caret svg{width:14px;height:14px}
.ot-caret:hover{background:var(--line-2);color:var(--dark)}
.ot-row.is-open .ot-caret{transform:rotate(90deg);color:var(--dark)}
.ot-detail{border-top:1px dashed var(--line);background:#fbfcfd;padding:14px 22px 18px 22px}
.ot-detail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 20px}
.ot-dcell{display:flex;flex-direction:column;gap:2px;min-width:0}
.ot-dlab{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
.ot-dval{font-size:.9rem;color:var(--dark);word-break:break-word}
.ot-detail-empty{font-size:.86rem;color:var(--muted)}

/* importar operaciones */
.sec-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn-light{background:#fff;border:1px solid var(--line);color:var(--dark)}
.btn-light:hover{background:var(--line-2)}
.imp-steps{margin:2px 0 20px;padding-left:20px;color:var(--muted);font-size:.9rem;line-height:1.75}
.imp-steps b{color:var(--dark);font-weight:600}
.imp-summary{margin:0 0 14px;font-size:.95rem}
.imp-bad{color:#b4522f}
.imp-tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.imp-tbl{width:100%;border-collapse:collapse;font-size:.86rem}
.imp-tbl th{text-align:left;background:var(--line-2);color:var(--muted);font-weight:600;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;white-space:nowrap}
.imp-tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.imp-r-bad td{background:#fdf5f2;color:#8a4a34}
.imp-r-ok td:last-child{color:#2c7a4b;white-space:nowrap}

/* clientes */
.cli-tbl{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(24,26,32,.04)}
.cli-tbl .ot-head,.cli-tbl .ot-row{grid-template-columns:1.3fr 1.5fr 1fr .8fr .8fr .7fr}
.cli-tbl .ot-row:first-of-type{border-top:none}

@media(max-width:1100px){
  .ot-head{display:none}
  .ot-row{grid-template-columns:1fr;gap:4px;padding:13px 16px;font-size:.85rem}
  .ot-ref{gap:7px;font-size:.92rem}
  .ot-mut{font-size:.8rem}
  .ot-mut::before{content:attr(data-l) ": ";color:#aeb4bd;font-weight:400}
  .ot-acc{justify-content:flex-start;margin-top:6px}
  .ot-acc .link{font-size:.82rem}
  .ot-estado{margin-top:3px}
  .ot-estado .quick-select{max-width:100%;width:auto;padding:6px 28px 6px 12px;font-size:.76rem}
  .cli-tbl .ot-head{display:none}
  .cli-tbl .ot-row{grid-template-columns:1fr}
  .ot-detail{padding:14px 16px}
  .ot-detail-grid{grid-template-columns:1fr 1fr}

  /* Operaciones (cliente): tarjeta ordenada — ref + Editar arriba, fechas en una fila, estado abajo */
  .opwrap .ot-row{
    grid-template-columns:1fr auto;
    grid-template-areas:"ref acc" "suref suref" "fecha eta" "estado estado";
    gap:4px 12px;padding:14px 16px 13px;align-items:center
  }
  .opwrap .ot-ref{grid-area:ref;font-size:.98rem}
  .opwrap .ot-acc{grid-area:acc;justify-self:end;align-self:center;margin:0}
  .opwrap .ot-mut[data-l="Su ref."]{grid-area:suref;margin-top:3px}
  .opwrap .ot-mut[data-l="Fecha"]{grid-area:fecha}
  .opwrap .ot-mut[data-l="ETA"]{grid-area:eta;justify-self:end;text-align:right}
  .opwrap .ot-estado{grid-area:estado;margin-top:8px}
}
@media(max-width:700px){
  .content{padding:22px 14px 80px}
  .sec-head{flex-direction:column;align-items:stretch}
  .atoolbar{display:block}
  .asearch{flex:1 1 100%;width:100%;margin-bottom:12px}
  .adates{display:grid;grid-template-columns:minmax(0,130px) minmax(0,130px) 1fr;gap:8px;width:100%;align-items:end}
  .adates .fld{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;font-size:.72rem}
  .adates input[type=date]{width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;min-height:34px;height:34px;padding:5px 9px;font-size:.8rem;border-radius:9px;text-align:left}
  .fclear{justify-self:start;border:none;background:transparent;color:var(--red);padding:0 0 9px 4px;font-size:.82rem;font-weight:500;border-radius:0;width:auto;height:auto}
  .folder-head{padding:15px 16px}
  .fh-right{flex-direction:column;align-items:flex-end;gap:3px}
}

/* pestañas dentro de una operación (Datos · Ruta · Legajo) */
.opnav{display:inline-flex;gap:4px;background:var(--line-2);padding:4px;border-radius:12px;margin:14px 0 22px}
.opnav a{padding:9px 20px;border-radius:9px;font-size:.87rem;font-weight:500;color:var(--muted);text-decoration:none;transition:.15s;white-space:nowrap}
.opnav a:hover{color:var(--dark)}
.opnav a.on{background:#fff;color:var(--dark);font-weight:600;box-shadow:0 1px 3px rgba(24,26,32,.09)}
@media(max-width:600px){.opnav{display:flex;width:100%}.opnav a{flex:1;text-align:center;padding:9px 8px}}


/* ---- Formulario de operación: mas ancho y aireado (v7) ---- */
.wrap-form{max-width:1240px}
.wrap-form h1{font-size:1.7rem;letter-spacing:-.02em;margin-bottom:2px}
.wrap-form .subtitle{font-size:.92rem;margin-bottom:2px}
.form-card{padding:32px 34px}
.form-card .field{margin-bottom:20px}
.form-card .field label,.form-card label{font-size:.84rem;font-weight:600;color:var(--ink);display:block;margin-bottom:7px}
.field select,.field input{padding:13px 15px;font-size:.95rem;border-radius:11px}
.grid2{grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}.form-card{padding:22px 18px}}


/* grilla de campos de la operación: 3 columnas, lista para sumar campos (v8) */
/* misma grilla para Datos, Ruta y Legajo: columnas de ancho acotado,
   asi los campos NO se estiran cuando hay pocos y el formato no cambia entre pestañas */
.fgrid,
.form-card .grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,360px));gap:0 24px}
.fgrid .field,
.form-card .grid2 .field{margin-bottom:20px}
.fgrid .field.wide{grid-column:span 2}
.fgrid .field.full{grid-column:1 / -1}
.form-card{padding:34px 36px}
.form-card > .field{max-width:360px}       /* Cliente / Estado / Archivo: mismo ancho que el resto */
@media(max-width:680px){
  .fgrid,.form-card .grid2{grid-template-columns:1fr}
  .form-card > .field{max-width:none}
}


/* ===== Ancho UNICO para Datos, Ruta y Legajo (v10) =====
   Se fija con alta especificidad para que ninguna regla de portal.css lo pise. */
.wrap.wrap-form{max-width:1240px !important;width:100% !important;margin:0 auto !important;padding:28px 32px 80px !important}
.wrap.wrap-form > .card,
.wrap.wrap-form > form.card{width:100% !important;max-width:none !important;box-sizing:border-box}


/* ===== Panel: lista de clientes (tarjetas) y vista por cliente (v16) ===== */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cl-card{display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;text-decoration:none;box-shadow:0 2px 10px rgba(24,26,32,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
.cl-card:hover{border-color:var(--red);box-shadow:0 8px 20px rgba(24,26,32,.09);transform:translateY(-1px)}
.cl-ico{display:flex;color:var(--red);flex:none}
.cl-ico svg{width:26px;height:26px}
.cl-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cl-name{font-size:1.04rem;font-weight:600;color:var(--dark);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-meta{font-size:.82rem;color:var(--muted);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cl-meta b{color:var(--ink);font-weight:600}
.cl-act{font-size:.7rem;font-weight:600;color:var(--blue);background:var(--blue-bg);padding:3px 9px;border-radius:20px;white-space:nowrap}
.cl-arrow{display:flex;color:#c3c8d0;flex:none;transition:transform .15s,color .15s}
.cl-arrow svg{width:18px;height:18px}
.cl-card:hover .cl-arrow{color:var(--red);transform:translateX(2px)}

.backlink{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;color:var(--muted);text-decoration:none;margin-bottom:14px;font-weight:500}
.backlink:hover{color:var(--red)}
.backlink svg{width:16px;height:16px}

.opwrap{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(24,26,32,.04)}
.opwrap .ot-row:first-of-type{border-top:none}