/**
 *  CLE — Botón de Desistimiento (Ley UE 19/06/2026)
 *
 *  Hoja de estilos FRONT — rediseño "Feed" (estructura nueva, paleta verde CLE).
 *  Diseño plano, sin cajas con bordes pesados ni cabeceras grises: raíles de color
 *  a la izquierda, chips tipo píldora y filas apiladas tipo feed.
 *
 *  Se conservan todos los nombres de clase/ID que usa el JS y las plantillas;
 *  cambia la estructura visual, no la funcionalidad.
 *
 *  @author    CLE
 *  @copyright Copyright © 2026 CLE
 *  @license   AFL 3.0
 */

:root {
  --cle-primary: #6F9B3B;
  --cle-primary-600: #5f8732;
  --cle-primary-700: #4f7029;
  --cle-accent: #8FC15B;
  --cle-light: #C0E59C;
  --cle-tint: #f6faee;
  --cle-tint-2: #edf4dd;
  --cle-line: #e7eed9;
  --cle-line-soft: #f0f4e8;
  --cle-ink: #2c3720;
  --cle-text: #46503a;
  --cle-muted: #828c70;
  --cle-white: #ffffff;
  --cle-warn-bg: #f8f0d8;
  --cle-warn-tx: #856414;
  --cle-warn-rail: #d9a93a;
  --cle-danger-bg: #f5e6e2;
  --cle-danger-tx: #a4443c;
  --cle-danger-rail: #c46a61;
  --cle-r: 14px;
  --cle-r-sm: 10px;
  --cle-pill: 999px;
}

/* ============================================================
   FEED WRAPPER — un único lienzo plano, sin marco pesado
   ============================================================ */
.cle_leydesestimiento-buttons {
  width: 100%;
  margin: 28px 0;
  box-sizing: border-box;
  font-family: inherit;
  color: var(--cle-text);
}
.cle_leydesestimiento-buttons *,
#cle_leydesestimiento-modal * { box-sizing: border-box; }

/* ============================================================
   PANEL HEADER — título sobrio con regla de acento (sin icono caja)
   ============================================================ */
.twr-panel {
  background: var(--cle-white);
  border: 1px solid var(--cle-line);
  border-radius: var(--cle-r);
  padding: 22px 24px;
  box-shadow: 0 1px 0 rgba(44, 55, 32, .03);
}
.twr-panel + .twr-panel { margin-top: 16px; }

.twr-panel-head { margin-bottom: 18px; }
.twr-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--cle-primary-700);
}
.twr-panel-eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--cle-primary);
  border-radius: 2px;
}
.twr-panel-title {
  margin: 8px 0 4px;
  font-size: 21px;
  font-weight: 700;
  color: var(--cle-ink);
  line-height: 1.25;
}
.twr-panel-sub { margin: 0; font-size: 14px; color: var(--cle-muted); line-height: 1.5; }

/* ============================================================
   ACTION CHIPS — píldoras grandes en lugar de botones en caja
   (clases JS intactas: twr-action-btn, twr-*-btn, cle_..-btn-*)
   ============================================================ */
.twr-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.twr-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid var(--cle-line);
  border-radius: var(--cle-pill);
  background: var(--cle-white);
  color: var(--cle-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.1;
  transition: transform .12s ease, border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.twr-action-btn .twr-btn-icon { display: inline-flex; align-items: center; color: var(--cle-primary); transition: color .15s; }
.twr-action-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(111, 155, 59, .16); }

.twr-return-btn,
.twr-withdrawal-btn { border-color: var(--cle-light); }
.twr-return-btn:hover,
.twr-withdrawal-btn:hover { background: var(--cle-primary); border-color: var(--cle-primary); color: #fff; }
.twr-return-btn:hover .twr-btn-icon,
.twr-withdrawal-btn:hover .twr-btn-icon { color: #fff; }

.twr-complaint-btn { border-color: #ecdcae; }
.twr-complaint-btn .twr-btn-icon { color: var(--cle-warn-tx); }
.twr-complaint-btn:hover { background: var(--cle-warn-tx); border-color: var(--cle-warn-tx); color: #fff; }
.twr-complaint-btn:hover .twr-btn-icon { color: #fff; }

.twr-cancel-btn { border-color: #e8ccc6; }
.twr-cancel-btn .twr-btn-icon { color: var(--cle-danger-tx); }
.twr-cancel-btn:hover { background: var(--cle-danger-tx); border-color: var(--cle-danger-tx); color: #fff; }
.twr-cancel-btn:hover .twr-btn-icon { color: #fff; }

/* ============================================================
   NO OPTIONS — aviso plano con raíl
   ============================================================ */
.twr-no-options-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--cle-tint);
  border: 1px solid var(--cle-line);
  border-left: 4px solid var(--cle-muted);
  border-radius: var(--cle-r-sm);
  padding: 18px 20px;
}
.twr-no-options-icon { flex-shrink: 0; color: var(--cle-muted); margin-top: 2px; }
.twr-no-options-text h4 { margin: 0 0 3px; font-size: 15px; font-weight: 700; color: var(--cle-ink); }
.twr-no-options-text p { margin: 0; font-size: 13px; color: var(--cle-muted); }

/* ============================================================
   REQUESTS FEED — filas apiladas con raíl de color (sin tabla)
   ============================================================ */
.twr-feed { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
.twr-feed-empty { color: var(--cle-muted); font-size: 14px; padding: 8px 2px; }

.twr-feed-item {
  border: 1px solid var(--cle-line);
  border-left: 4px solid var(--cle-line);
  border-radius: 0 var(--cle-r-sm) var(--cle-r-sm) 0;
  background: var(--cle-white);
  overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.twr-feed-item:hover { box-shadow: 0 4px 14px rgba(44, 55, 32, .07); }
.twr-feed-item.is-return,
.twr-feed-item.is-withdrawal { border-left-color: var(--cle-primary); }
.twr-feed-item.is-complaint { border-left-color: var(--cle-warn-rail); }
.twr-feed-item.is-cancel { border-left-color: var(--cle-danger-rail); }

.twr-feed-main {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  flex-wrap: wrap;
}
.twr-feed-id { font-weight: 700; color: var(--cle-ink); font-size: 14px; min-width: 56px; }
.twr-feed-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.twr-feed-date { color: var(--cle-muted); font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }

/* badges (mismas clases, ahora píldoras suaves) */
.twr-type-badge,
.twr-status-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--cle-pill);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.4;
}
.twr-type-badge { text-transform: uppercase; letter-spacing: .5px; }
.twr-type-return,
.twr-type-withdrawal { background: var(--cle-light); color: var(--cle-primary-700); }
.twr-type-complaint { background: var(--cle-warn-bg); color: var(--cle-warn-tx); }
.twr-type-cancel { background: var(--cle-danger-bg); color: var(--cle-danger-tx); }
.twr-status-wait { background: var(--cle-warn-bg); color: var(--cle-warn-tx) !important; }
.twr-status-confirmed { background: var(--cle-light); color: var(--cle-primary-700) !important; }
.twr-status-rejected { background: var(--cle-danger-bg); color: var(--cle-danger-tx) !important; }
.twr-status-custom { background: var(--cle-tint-2); color: var(--cle-ink) !important; }

/* toggle detalle */
.twr-toggle-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--cle-line);
  border-radius: var(--cle-pill);
  color: var(--cle-primary-700);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.twr-toggle-details:hover { background: var(--cle-tint); border-color: var(--cle-light); }
.twr-icon-arrow { transition: transform .2s; }

/* detalle desplegable (div, no table-row) */
.twr-feed-detail { border-top: 1px solid var(--cle-line-soft); background: var(--cle-tint); padding: 18px 18px 4px; }
.twr-details-title {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--cle-muted);
}
.twr-no-details {
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--cle-white);
  border: 1px solid var(--cle-line);
  border-radius: var(--cle-r-sm);
  color: var(--cle-muted);
  font-style: italic;
  font-size: 13px;
}
.twr-products-summary { margin-bottom: 16px; }
.twr-products-summary .table { width: 100%; margin: 0; background: var(--cle-white); border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); overflow: hidden; border-collapse: collapse; }
.twr-products-summary .table th { background: var(--cle-tint); color: var(--cle-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--cle-line); }
.twr-products-summary .table td { padding: 9px 12px; font-size: 13px; border-bottom: 1px solid var(--cle-line-soft); color: var(--cle-text); }

/* dirección de devolución (pie del feed) */
.twr-return-address-footer { padding: 14px 0 16px; }
.twr-return-address-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--cle-tint);
  border: 1px solid var(--cle-line);
  border-radius: var(--cle-r-sm);
}
.twr-address-info-icon { flex-shrink: 0; color: var(--cle-primary); margin-top: 2px; }
.twr-address-info-content { font-size: 13px; line-height: 1.6; color: var(--cle-text); }
.twr-address-info-content strong { display: block; color: var(--cle-ink); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }

/* ============================================================
   CONVERSATION (mensajes) — burbujas
   ============================================================ */
.twr-messages-container { margin-top: 4px; }
.twr-messages-title { margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--cle-muted); }
.twr-messages-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-height: 380px; overflow-y: auto; padding-right: 6px; }
.twr-message { max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.twr-message-customer { align-self: flex-end; background: var(--cle-primary); color: #fff; border-bottom-right-radius: 4px; }
.twr-message-employee { align-self: flex-start; background: var(--cle-white); border: 1px solid var(--cle-line); color: var(--cle-ink); border-bottom-left-radius: 4px; }
.twr-message-header { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 11px; opacity: .85; }
.twr-message-author { font-weight: 600; }
.twr-message-content { word-break: break-word; }
.twr-no-messages { margin: 0; font-size: 13px; color: var(--cle-muted); font-style: italic; text-align: center; padding: 8px 0; }

.twr-message-form { margin-top: 12px; }
.twr-message-input-wrapper { display: flex; gap: 10px; }
.twr-message-input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 14px;
  border: 1px solid var(--cle-line);
  border-radius: var(--cle-r-sm);
  font-size: 14px;
  resize: vertical;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.twr-message-input:focus { outline: none; border-color: var(--cle-primary); box-shadow: 0 0 0 3px rgba(111, 155, 59, .15); }
.twr-message-submit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 20px;
  background: var(--cle-primary);
  color: #fff;
  border: none;
  border-radius: var(--cle-r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.twr-message-submit:hover { background: var(--cle-primary-600); }

/* ============================================================
   MODAL — limpio, cabecera clara con tinte (no barra oscura)
   ============================================================ */
#cle_leydesestimiento-modal .modal-content { border: none; border-radius: var(--cle-r); overflow: hidden; box-shadow: 0 20px 60px rgba(44, 55, 32, .25); }
.twr-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: var(--cle-tint);
  border-bottom: 1px solid var(--cle-line);
}
.twr-modal-title-wrapper { display: flex; align-items: center; gap: 12px; }
.twr-modal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--cle-primary);
  border-radius: var(--cle-r-sm);
  color: #fff;
}
.twr-modal-header .modal-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--cle-ink); }
.twr-modal-header .close {
  color: var(--cle-muted);
  opacity: 1;
  font-size: 26px;
  font-weight: 400;
  margin: 0;
  padding: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-shadow: none;
  transition: background .15s, color .15s;
}
.twr-modal-header .close:hover { background: var(--cle-line); color: var(--cle-ink); }
.twr-modal-body { padding: 22px; }
.twr-modal-footer {
  padding: 16px 22px;
  background: var(--cle-tint);
  border-top: 1px solid var(--cle-line);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.twr-alert-info { background: var(--cle-tint-2); border: 1px solid var(--cle-light); color: var(--cle-primary-700); padding: 12px 14px; border-radius: var(--cle-r-sm); margin-bottom: 18px; }
.twr-alert-warning { background: var(--cle-warn-bg); border: 1px solid #ecdcae; color: var(--cle-warn-tx); padding: 12px 14px; border-radius: var(--cle-r-sm); margin-bottom: 18px; }

/* tabla de productos en modal (la pinta el JS con clases bootstrap) */
.twr-products-list { margin-bottom: 18px; }
.twr-products-list .table { width: 100%; border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); overflow: hidden; margin: 0; border-collapse: collapse; }
.twr-products-list .table thead { background: var(--cle-tint); }
.twr-products-list .table th { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cle-muted); border-bottom: 1px solid var(--cle-line); text-align: left; }
.twr-products-list .table td { padding: 10px 14px; font-size: 13px; vertical-align: middle; color: var(--cle-text); border-bottom: 1px solid var(--cle-line-soft); }
.twr-products-list .table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--cle-primary); }
.twr-products-list .table select { padding: 6px 8px; border: 1px solid var(--cle-line); border-radius: 8px; font-size: 13px; }
.cle_leydesestimiento-row-excluded { opacity: .6; background: var(--cle-danger-bg) !important; }
.cle_leydesestimiento-excluded-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--cle-danger-tx); background: var(--cle-danger-bg); border: 1px solid #e8ccc6; border-radius: var(--cle-pill); vertical-align: middle; }

/* form controls modal */
.twr-form-group { margin-bottom: 16px; }
.twr-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--cle-ink); }
.twr-select,
.twr-textarea { width: 100%;
/* ============================================================
   HARDENING — evita que el theme (Bootstrap) inyecte azules/estilos
   en elementos con clases base compartidas (.btn, .alert, .table, h3)
   ============================================================ */
.cle_leydesestimiento-buttons .twr-panel-title,
.cle-order-summary-panel .twr-panel-title { background: none !important; border: 0 !important; margin: 8px 0 4px !important; padding: 0 !important; color: var(--cle-ink) !important; }
.cle_leydesestimiento-buttons h3, .cle-order-summary-panel h3 { background: none !important; border: 0 !important; box-shadow: none !important; }

.cle_leydesestimiento-buttons .twr-action-btn { background: #fff !important; }
.cle_leydesestimiento-buttons .twr-return-btn,
.cle_leydesestimiento-buttons .twr-withdrawal-btn { border-color: var(--cle-light) !important; color: var(--cle-primary-700) !important; }
.cle_leydesestimiento-buttons .twr-return-btn:hover,
.cle_leydesestimiento-buttons .twr-withdrawal-btn:hover { background: var(--cle-primary) !important; color: #fff !important; }
.cle_leydesestimiento-buttons .twr-complaint-btn:hover { background: var(--cle-warn-tx) !important; color: #fff !important; }
.cle_leydesestimiento-buttons .twr-cancel-btn:hover { background: var(--cle-danger-tx) !important; color: #fff !important; }

#cle_leydesestimiento-modal .twr-modal-header { background: var(--cle-tint) !important; color: var(--cle-ink) !important; border-bottom: 1px solid var(--cle-line) !important; }
#cle_leydesestimiento-modal .twr-modal-header .modal-title { color: var(--cle-ink) !important; }
#cle_leydesestimiento-modal .btn.twr-btn-submit { background: var(--cle-primary) !important; border-color: var(--cle-primary) !important; color: #fff !important; }
#cle_leydesestimiento-modal .btn.twr-btn-submit:hover { background: var(--cle-primary-600) !important; }
#cle_leydesestimiento-modal .btn.twr-btn-cancel { background: #fff !important; color: var(--cle-text) !important; border: 1px solid var(--cle-line) !important; }
#cle_leydesestimiento-modal .alert.twr-alert-info { background: var(--cle-tint-2) !important; border: 1px solid var(--cle-light) !important; color: var(--cle-primary-700) !important; }
#cle_leydesestimiento-modal .alert.twr-alert-warning { background: var(--cle-warn-bg) !important; border: 1px solid var(--cle-warn-bd) !important; color: var(--cle-warn-tx) !important; }
#cle_leydesestimiento-modal .twr-products-list .table,
.twr-products-summary .table { color: var(--cle-text) !important; }
#cle_leydesestimiento-modal .twr-products-list .table a,
.twr-products-summary .table a { color: var(--cle-primary-700) !important; }

.cle-btn-go, .cle-history-view { color: #fff !important; text-decoration: none !important; }
.cle-history-ref a, .twr-address-info-content a { color: var(--cle-primary-700) !important; }

/* Resumen de pedido dentro del panel (returnpage) */
.cle-order-summary-panel { max-width: 960px; margin: 24px auto 0; }
.cle-order-summary-panel .cle-summary,
.cle-order-summary-panel .cle-products { max-width: none; margin: 0; padding: 0; }
.cle-order-summary-panel .cle-summary { margin-bottom: 14px; }

/* ============================================================
   ORDER SUMMARY (returnpage) — recuperado (faltaba) + etiquetas legibles
   ============================================================ */
.cle-summary { display: block; }
.cle-summary-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.cle-summary-row:last-child { margin-bottom: 0; }
.cle-summary-cell { flex: 1 1 200px; background: var(--cle-tint); border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); padding: 11px 14px; }
.cle-summary-label { display: block !important; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--cle-muted); margin-bottom: 4px; }
.cle-summary-cell strong { display: block; font-size: 14px; color: var(--cle-ink); font-weight: 700; line-height: 1.35; }
.cle-products { margin-top: 4px; }
.cle-products-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); overflow: hidden; }
.cle-products-table th { background: var(--cle-tint); color: var(--cle-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cle-line); }
.cle-products-table td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--cle-line-soft); color: var(--cle-text); }
.cle-products-table tr:last-child td { border-bottom: none; }

/* ============================================================
   MODAL — neutralizar clases Bootstrap inyectadas por el JS
   (table-bordered, thead-light, form-control → azules/bordes del theme)
   ============================================================ */
#cle_leydesestimiento-modal .twr-products-list .table.table-bordered,
#cle_leydesestimiento-modal .twr-products-list .table.table-bordered td,
#cle_leydesestimiento-modal .twr-products-list .table.table-bordered th { border-color: var(--cle-line) !important; }
#cle_leydesestimiento-modal .twr-products-list .thead-light th,
#cle_leydesestimiento-modal .twr-products-list thead th { background: var(--cle-tint) !important; color: var(--cle-muted) !important; border-color: var(--cle-line) !important; }
#cle_leydesestimiento-modal .twr-products-list .form-control,
#cle_leydesestimiento-modal .twr-select,
#cle_leydesestimiento-modal .twr-textarea { border: 1px solid var(--cle-line) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--cle-text) !important; background: #fff !important; }
#cle_leydesestimiento-modal .twr-products-list .form-control:focus,
#cle_leydesestimiento-modal .twr-select:focus,
#cle_leydesestimiento-modal .twr-textarea:focus { border-color: var(--cle-primary) !important; box-shadow: 0 0 0 3px rgba(111, 155, 59, .15) !important; outline: none !important; }
#cle_leydesestimiento-modal input[type=checkbox] { accent-color: var(--cle-primary); }
#cle_leydesestimiento-modal .text-right { text-align: right; }
#cle_leydesestimiento-modal .text-center { text-align: center; }
wrap: wrap; gap: 8px 28px; margin-bottom: 14px; }
.cle-order-info { display: flex; gap: 8px; font-size: 13px; }
.cle-info-label { color: var(--cle-muted); }
.cle-order-actions { text-align: right; }
.cle-btn-go { display: inline-flex; align-items: center; gap: 6px; background: var(--cle-primary); color: #fff !important; padding: 10px 20px; border-radius: var(--cle-pill); text-decoration: none !important; font-weight: 600; font-size: 14px; transition: background .15s; }
.cle-btn-go:hover { background: var(--cle-primary-600); }
.cle-empty-state { text-align: center; padding: 60px 20px; background: var(--cle-tint); border-radius: var(--cle-r); color: var(--cle-muted); }

/* legal notices */
.cle-legal-notice { max-width: 680px; margin: 40px auto; padding: 32px; background: var(--cle-tint); border: 1px solid var(--cle-line); border-radius: var(--cle-r); text-align: center; }
.cle-legal-notice .cle-legal-icon { font-size: 46px; margin-bottom: 12px; }
.cle-legal-notice h3 { color: var(--cle-ink); margin: 0 0 16px; font-size: 22px; font-weight: 700; }
.cle-legal-notice p { color: var(--cle-text); line-height: 1.6; margin: 10px 0; font-size: 14px; }
.cle-legal-notice .cle-legal-ref { font-size: 13px; color: var(--cle-muted); background: #fff; padding: 12px 16px; border-radius: var(--cle-r-sm); border-left: 3px solid var(--cle-primary); margin-top: 18px; text-align: left; }
.cle-legal-notice .cle-legal-info { font-size: 13px; color: var(--cle-primary-700); background: var(--cle-tint-2); padding: 12px 16px; border-radius: var(--cle-r-sm); margin-top: 12px; text-align: left; }
.cle-legal-warning { margin: 24px 0; padding: 18px 22px; background: var(--cle-warn-bg); border-left: 4px solid var(--cle-warn-rail); border-radius: var(--cle-r-sm); }
.cle-legal-warning strong { display: block; color: var(--cle-warn-tx); font-size: 15px; margin-bottom: 8px; }
.cle-legal-warning p { margin: 6px 0; color: var(--cle-warn-tx); font-size: 13px; line-height: 1.55; }

/* ============================================================
   LOGIN / LOCATE ORDER (returnpage) — formulario plano
   ============================================================ */
.cle-locate { max-width: 520px; margin: 36px auto; }
.cle-locate-panel { background: #fff; border: 1px solid var(--cle-line); border-radius: var(--cle-r); padding: 28px; }
.cle-locate-title { font-size: 20px; font-weight: 700; color: var(--cle-ink); margin: 0 0 6px; }
.cle-locate-sub { font-size: 13.5px; color: var(--cle-muted); margin: 0 0 20px; line-height: 1.5; }
.cle-field { margin-bottom: 16px; }
.cle-field label { display: block; font-size: 13px; font-weight: 600; color: var(--cle-ink); margin-bottom: 6px; }
.cle-input { width: 100%; padding: 11px 13px; border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); font-size: 14px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cle-input:focus { outline: none; border-color: var(--cle-primary); box-shadow: 0 0 0 3px rgba(111, 155, 59, .15); }
.cle-field-hint { display: block; margin-top: 5px; font-size: 12px; color: var(--cle-muted); }
.cle-submit { display: inline-flex; align-items: center; gap: 7px; background: var(--cle-primary); color: #fff; border: none; padding: 12px 22px; border-radius: var(--cle-pill); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.cle-submit:hover { background: var(--cle-primary-600); }
.cle-locate-note { font-size: 12px; color: var(--cle-muted); margin: 16px 0 0; line-height: 1.5; }
.cle-alert-error { background: var(--cle-danger-bg); border: 1px solid #e8ccc6; color: var(--cle-danger-tx); padding: 11px 14px; border-radius: var(--cle-r-sm); margin-bottom: 16px; font-size: 13.5px; }
.cle-alert-success { background: var(--cle-tint-2); border: 1px solid var(--cle-light); color: var(--cle-primary-700); padding: 11px 14px; border-radius: var(--cle-r-sm); margin-bottom: 16px; font-size: 13.5px; }

/* order summary strips (returnpage manage view) */
.cle-summary { max-width: 960px; margin: 24px auto 0; padding: 0 16px; }
.cle-summary-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cle-summary-cell { flex: 1 1 180px; background: var(--cle-tint); border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); padding: 12px 14px; font-size: 13px; }
.cle-summary-cell .cle-summary-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cle-muted); margin-bottom: 3px; }
.cle-summary-cell strong { color: var(--cle-ink); }
.cle-products { max-width: 960px; margin: 8px auto 0; padding: 0 16px; }
.cle-products-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); overflow: hidden; }
.cle-products-table th { background: var(--cle-tint); color: var(--cle-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--cle-line); }
.cle-products-table td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--cle-line-soft); color: var(--cle-text); }

/* ============================================================
   RETURN HISTORY (full page) — feed
   ============================================================ */
.cle-history { max-width: 900px; margin: 28px auto; padding: 0 16px; }
.cle-history-title { font-size: 24px; font-weight: 700; color: var(--cle-ink); margin: 0 0 6px; }
.cle-history-sub { font-size: 14px; color: var(--cle-muted); margin: 0 0 22px; }
.cle-history-feed { display: flex; flex-direction: column; gap: 12px; }
.cle-history-item { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: #fff; border: 1px solid var(--cle-line); border-left: 4px solid var(--cle-primary); border-radius: 0 var(--cle-r-sm) var(--cle-r-sm) 0; padding: 14px 18px; transition: box-shadow .15s; }
.cle-history-item:hover { box-shadow: 0 4px 14px rgba(44, 55, 32, .07); }
.cle-history-item.is-complaint { border-left-color: var(--cle-warn-rail); }
.cle-history-item.is-cancel { border-left-color: var(--cle-danger-rail); }
.cle-history-id { font-weight: 700; color: var(--cle-ink); }
.cle-history-ref a { color: var(--cle-primary-700); text-decoration: none; font-weight: 600; }
.cle-history-ref a:hover { text-decoration: underline; }
.cle-history-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.cle-history-date { color: var(--cle-muted); font-size: 12.5px; }
.cle-history-view { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--cle-primary); color: #fff !important; text-decoration: none !important; padding: 8px 16px; border-radius: var(--cle-pill); font-size: 13px; font-weight: 600; transition: background .15s; }
.cle-history-view:hover { background: var(--cle-primary-600); }
.cle-history-empty { text-align: center; padding: 50px 20px; background: var(--cle-tint); border: 1px solid var(--cle-line); border-radius: var(--cle-r); color: var(--cle-muted); }
.cle-history-foot { text-align: center; margin-top: 24px; }
.cle-history-back { display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--cle-light); color: var(--cle-primary-700); text-decoration: none; padding: 11px 22px; border-radius: var(--cle-pill); font-weight: 600; font-size: 14px; transition: background .15s; }
.cle-history-back:hover { background: var(--cle-tint); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .twr-panel { padding: 18px 16px; }
  .twr-card-actions { flex-direction: column; }
  .twr-action-btn { width: 100%; justify-content: center; }
  .twr-feed-main { align-items: flex-start; }
  .twr-toggle-details { margin-left: 0; }
  .cle-history-view { margin-left: 0; }
}

/* ============================================================
   ORDERS LIST (returnpage) — tarjetas de pedidos (recuperado, faltaba)
   ============================================================ */
.cle-orders-list { max-width: 980px; margin: 30px auto; padding: 0 16px; }
.cle-orders-title { font-size: 26px; color: var(--cle-ink); margin: 0 0 8px; font-weight: 700; line-height: 1.2; }
.cle-orders-subtitle { color: var(--cle-muted); margin: 0 0 24px; font-size: 14px; line-height: 1.5; }
.cle-orders-grid { display: flex; flex-direction: column; gap: 12px; }
.cle-order-card {
  background: #fff;
  border: 1px solid var(--cle-line);
  border-left: 4px solid var(--cle-primary);
  border-radius: 0 var(--cle-r) var(--cle-r) 0;
  padding: 18px 22px;
  transition: box-shadow .15s, transform .12s;
}
.cle-order-card:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(111, 155, 59, .13); }
.cle-order-card.cle-expired { border-left-color: #b6bfa6; opacity: .9; }
.cle-order-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cle-line-soft); }
.cle-order-ref { font-size: 18px; color: var(--cle-ink); margin-right: 8px; font-weight: 700; }
.cle-order-state { display: inline-block; color: #fff; font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: var(--cle-pill); letter-spacing: .3px; }
.cle-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: var(--cle-pill); }
.cle-badge-ok { background: var(--cle-light); color: var(--cle-primary-700); }
.cle-badge-expired { background: var(--cle-tint-2); color: var(--cle-muted); }
.cle-order-body { display: grid; gap: 7px; margin-bottom: 16px; }
.cle-order-info { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--cle-text); }
.cle-order-info .cle-info-label { color: var(--cle-muted); }
.cle-order-info small { color: var(--cle-muted); }

/* ============================================================
   MODAL — tabla de productos limpia (estética config, sin bootstrap)
   ============================================================ */
.twr-prod-table { width: 100%; border-collapse: collapse; border: 1px solid var(--cle-line); border-radius: var(--cle-r-sm); overflow: hidden; }
.twr-prod-table thead th { background: var(--cle-tint); color: var(--cle-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--cle-line); }
.twr-prod-table td { padding: 11px 12px; font-size: 13px; color: var(--cle-text); border-bottom: 1px solid var(--cle-line-soft); vertical-align: middle; }
.twr-prod-table tbody tr:last-child td { border-bottom: none; }
.twr-prod-table td strong { color: var(--cle-ink); font-weight: 600; }
.twr-prod-table .c-check { width: 42px; text-align: center; }
.twr-prod-table .c-qty { width: 96px; }
.twr-prod-table .c-num { width: 96px; text-align: center; }
.twr-prod-ref { display: block; margin-top: 2px; font-size: 11.5px; color: var(--cle-muted); }
.twr-prod-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cle-primary); cursor: pointer; vertical-align: middle; }
.twr-prod-qty { width: 100%; padding: 6px 8px; border: 1px solid var(--cle-line); border-radius: 8px; font-size: 13px; background: #fff; color: var(--cle-text); }
.twr-prod-qty:focus { outline: none; border-color: var(--cle-primary); box-shadow: 0 0 0 3px rgba(111, 155, 59, .15); }
.twr-prod-table .cle_leydesestimiento-row-excluded { opacity: .6; background: var(--cle-danger-bg); }
.twr-success-notice { margin-top: 8px; font-size: 12px; color: var(--cle-muted); }

/* ============================================================
   MODAL — estados de carga y error (clases propias)
   ============================================================ */
.twr-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px 0; color: var(--cle-muted); font-size: 13px; }
.twr-loading .twr-spin { width: 32px; height: 32px; color: var(--cle-primary); animation: twr-spin 1s linear infinite; }
.twr-alert-danger { background: var(--cle-danger-bg); border: 1px solid #e8ccc6; color: var(--cle-danger-tx); padding: 12px 14px; border-radius: var(--cle-r-sm); font-size: 13.5px; }
.twr-file-dropzone.twr-has-files { border-style: solid; border-color: var(--cle-primary); background: var(--cle-tint-2); }
.twr-file-dropzone.twr-has-files span { color: var(--cle-ink); font-weight: 600; }

/* ============================================================
   MODAL — REFACTOR MINIMALISTA (idéntico al backoffice)
   Sin iconos ni SVG: punto verde + título, cuerpo limpio,
   botones planos, spinner CSS. Estas reglas van al final para
   imponerse sobre las anteriores.
   ============================================================ */
#cle_leydesestimiento-modal .modal-dialog { max-width: 620px; }
#cle_leydesestimiento-modal .modal-content,
#cle_leydesestimiento-modal .twr-modal { border: 1px solid var(--cle-line) !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgba(44,55,32,.18) !important; overflow: hidden; }

/* Cabecera: punto verde + título; X a la derecha */
#cle_leydesestimiento-modal .twr-modal-header { display: flex !important; align-items: center !important; gap: 11px !important; padding: 16px 20px !important; background: var(--cle-tint) !important; border-bottom: 1px solid var(--cle-line) !important; }
#cle_leydesestimiento-modal .twr-modal-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cle-primary); flex: none; }
#cle_leydesestimiento-modal .twr-modal-header .modal-title { flex: 1; margin: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: var(--cle-ink) !important; line-height: 1.3; }
#cle_leydesestimiento-modal .twr-modal-header .close { margin: 0 !important; padding: 0 !important; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 8px; font-size: 22px; line-height: 1; color: var(--cle-muted); opacity: 1; text-shadow: none; cursor: pointer; transition: background .15s, color .15s; }
#cle_leydesestimiento-modal .twr-modal-header .close:hover { background: var(--cle-line); color: var(--cle-ink); }

/* Cuerpo y pie */
#cle_leydesestimiento-modal .twr-modal-body { padding: 20px !important; background: #fff; }
#cle_leydesestimiento-modal .twr-modal-footer { display: flex !important; justify-content: flex-end !important; gap: 10px !important; padding: 14px 20px !important; background: var(--cle-tint) !important; border-top: 1px solid var(--cle-line) !important; }

/* Botones planos (sin depender de .btn de Bootstrap) */
#cle_leydesestimiento-modal .twr-btn-submit,
#cle_leydesestimiento-modal .twr-btn-cancel { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
#cle_leydesestimiento-modal .twr-btn-submit { background: var(--cle-primary) !important; border-color: var(--cle-primary) !important; color: #fff !important; }
#cle_leydesestimiento-modal .twr-btn-submit:hover { background: var(--cle-primary-700) !important; border-color: var(--cle-primary-700) !important; }
#cle_leydesestimiento-modal .twr-btn-submit[disabled],
#cle_leydesestimiento-modal .twr-btn-submit.is-loading { opacity: .6 !important; cursor: default; }
#cle_leydesestimiento-modal .twr-btn-cancel { background: #fff !important; border-color: var(--cle-line) !important; color: var(--cle-text) !important; }
#cle_leydesestimiento-modal .twr-btn-cancel:hover { background: var(--cle-tint) !important; border-color: var(--cle-light) !important; }

/* Avisos (la clase .alert ya no se inyecta) */
#cle_leydesestimiento-modal .twr-alert-info { background: var(--cle-tint-2) !important; border: 1px solid var(--cle-light) !important; color: var(--cle-primary-700) !important; padding: 11px 13px !important; border-radius: 9px !important; margin-bottom: 16px; font-size: 13px; }
#cle_leydesestimiento-modal .twr-alert-warning { background: var(--cle-warn-bg) !important; border: 1px solid #ecdcae !important; color: var(--cle-warn-tx) !important; padding: 11px 13px !important; border-radius: 9px !important; margin-bottom: 16px; font-size: 13px; }
#cle_leydesestimiento-modal .twr-alert-danger { background: var(--cle-danger-bg); border: 1px solid #e8ccc6; color: var(--cle-danger-tx); padding: 11px 13px; border-radius: 9px; font-size: 13px; }

/* Form controls */
#cle_leydesestimiento-modal .twr-form-group { margin-bottom: 15px; }
#cle_leydesestimiento-modal .twr-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--cle-ink); }
#cle_leydesestimiento-modal .twr-select,
#cle_leydesestimiento-modal .twr-textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--cle-line) !important; border-radius: 9px !important; background: #fff !important; font-size: 13.5px; color: var(--cle-text) !important; box-shadow: none !important; box-sizing: border-box; }
#cle_leydesestimiento-modal .twr-select:focus,
#cle_leydesestimiento-modal .twr-textarea:focus { border-color: var(--cle-primary) !important; box-shadow: 0 0 0 3px rgba(111,155,59,.15) !important; outline: none !important; }
#cle_leydesestimiento-modal .twr-textarea { resize: vertical; min-height: 70px; }
#cle_leydesestimiento-modal .twr-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--cle-muted); }

/* Tabla de productos (la pinta el JS: twr-prod-table / c-check / c-qty / c-num) */
#cle_leydesestimiento-modal .twr-products-list { margin-bottom: 16px; }
#cle_leydesestimiento-modal .twr-prod-table { width: 100%; border: 1px solid var(--cle-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
#cle_leydesestimiento-modal .twr-prod-table thead th { padding: 9px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cle-muted); background: var(--cle-tint); border-bottom: 1px solid var(--cle-line); text-align: left; }
#cle_leydesestimiento-modal .twr-prod-table tbody td { padding: 10px 12px; font-size: 13px; color: var(--cle-text); border-bottom: 1px solid var(--cle-line-soft); vertical-align: middle; }
#cle_leydesestimiento-modal .twr-prod-table tbody tr:last-child td { border-bottom: 0; }
#cle_leydesestimiento-modal .twr-prod-table .c-check { width: 40px; text-align: center; }
#cle_leydesestimiento-modal .twr-prod-table .c-qty { width: 96px; }
#cle_leydesestimiento-modal .twr-prod-table .c-num { text-align: right; white-space: nowrap; }
#cle_leydesestimiento-modal .twr-prod-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--cle-primary); }
#cle_leydesestimiento-modal .twr-prod-ref { display: block; color: var(--cle-muted); font-size: 11.5px; margin-top: 2px; }
#cle_leydesestimiento-modal .twr-prod-qty { width: 100%; padding: 6px 8px; border: 1px solid var(--cle-line); border-radius: 8px; font-size: 13px; background: #fff; }

/* Subida de archivos — caja punteada sin icono */
#cle_leydesestimiento-modal .twr-file-input-wrapper { position: relative; }
#cle_leydesestimiento-modal .twr-file-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
#cle_leydesestimiento-modal .twr-file-dropzone { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 14px; text-align: center; border: 1.5px dashed var(--cle-light); border-radius: 10px; background: var(--cle-tint); color: var(--cle-muted); font-size: 13px; transition: border-color .15s, background .15s; }
#cle_leydesestimiento-modal .twr-file-dropzone:hover { border-color: var(--cle-primary); background: var(--cle-tint-2); }
#cle_leydesestimiento-modal .twr-file-dropzone.twr-has-files { border-style: solid; border-color: var(--cle-primary); background: var(--cle-tint-2); color: var(--cle-ink); font-weight: 600; }

/* Dirección de devolución — sin pin/icono */
#cle_leydesestimiento-modal .twr-return-address { margin-top: 4px; padding: 13px 15px; background: var(--cle-tint); border: 1px solid var(--cle-line); border-left: 3px solid var(--cle-primary); border-radius: 9px; display: block; }
#cle_leydesestimiento-modal .twr-address-content { font-size: 13px; color: var(--cle-text); line-height: 1.5; }
#cle_leydesestimiento-modal .twr-address-content strong { display: block; margin-bottom: 4px; color: var(--cle-ink); font-size: 12.5px; }

/* Cargando — spinner CSS (sin SVG) */
#cle_leydesestimiento-modal .twr-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px 0; color: var(--cle-muted); font-size: 13px; }
#cle_leydesestimiento-modal .twr-spinner { width: 28px; height: 28px; border: 3px solid var(--cle-line); border-top-color: var(--cle-primary); border-radius: 50%; animation: twr-spin 0.7s linear infinite; }
@keyframes twr-spin { to { transform: rotate(360deg); } }

/* Éxito — sin icono grande, mensaje limpio */
#cle_leydesestimiento-modal .twr-success-wrapper { text-align: center; padding: 14px 6px; }
#cle_leydesestimiento-modal .twr-success-icon { display: none !important; }
#cle_leydesestimiento-modal .twr-success-message { font-size: 15px; font-weight: 600; color: var(--cle-ink); margin-bottom: 14px; }
#cle_leydesestimiento-modal .twr-success-evidence { text-align: left; background: var(--cle-tint); border: 1px solid var(--cle-line); border-radius: 10px; padding: 14px 16px; font-size: 13px; color: var(--cle-text); }
#cle_leydesestimiento-modal .twr-success-evidence > div { margin-bottom: 6px; }
#cle_leydesestimiento-modal .twr-success-evidence > div:last-child { margin-bottom: 0; }
#cle_leydesestimiento-modal .twr-success-notice { margin-top: 8px; font-size: 12px; color: var(--cle-muted); }