/* Platillos y recetas (platillos.php) + pestaña Comparativo (comparativo_contenido.php).
   Mismo lenguaje que promociones.css. Todo va bajo .pl (contenido, que también contiene los modales)
   para no tocar el resto de Kapital; css/comparativo.css se sigue cargando y aquí solo se pisa dentro de .pl. */
.pl {
  --pl-fondo: #f5f7fa;
  --pl-surface: #ffffff;
  --pl-borde: #e3e8ef;
  --pl-borde-2: #eef1f5;
  --pl-texto: #1e293b;
  --pl-texto-2: #475569;
  --pl-muted: #8a96a8;
  --pl-acento: #2563eb;
  --pl-acento-2: #1d4ed8;
  --pl-acento-suave: #eff4ff;
  --pl-ok: #15803d; --pl-ok-suave: #e8f7ee;
  --pl-alerta: #b45309; --pl-alerta-suave: #fef6e7;
  --pl-peligro: #c02626; --pl-peligro-suave: #fdecec;
  --pl-pos: #7c3aed; --pl-pos-suave: #f3edff;
  --pl-radio: 8px;
  color: var(--pl-texto);
  font-family: 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}
.demo, #demo-setting { display: none !important; }
#content.pl { padding: 18px 20px 40px; background: var(--pl-fondo); min-height: calc(100vh - 100px); }
.pl td, .pl th { font-size: 13px; }
.pl .text-muted { color: var(--pl-muted) !important; }
.pl label { font-weight: 600; }

/* ── Campos (sistema.css los deja en 20px) ─────────── */
.pl .form-control {
  height: 36px !important; padding: 7px 11px; font-size: 13px !important; line-height: 20px;
  color: var(--pl-texto); background-color: #fff; border: 1px solid #d5dce6; border-radius: 6px; box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}
.pl textarea.form-control { height: auto !important; }
.pl .form-control:focus { border-color: var(--pl-acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; }
.pl .form-control[disabled] { background-color: #f5f7fa; color: var(--pl-muted); }
.pl .input-group-addon { border-color: #d5dce6; background: #f3f5f8; color: var(--pl-texto-2); font-weight: 600; }
.pl .input-group-addon:first-child { border-radius: 6px 0 0 6px; }
.pl .input-group-addon:last-child { border-radius: 0 6px 6px 0; }
.pl .input-group .form-control:first-child { border-radius: 6px 0 0 6px; }
.pl .input-group .form-control:last-child { border-radius: 0 6px 6px 0; }
.pl .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.pl .help-block { font-size: 12px; color: var(--pl-muted); }
.pl input[type="checkbox"], .pl input[type="radio"] { width: 16px; height: 16px; accent-color: var(--pl-acento); cursor: pointer; vertical-align: -3px; }

/* ── Botones ──────────────────────────────────────── */
.pl .btn { border-radius: 6px; font-weight: 600; font-size: 13px; padding: 7px 14px; line-height: 20px; transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pl .btn-sm { padding: 6px 12px; font-size: 13px; }
.pl .btn-xs { padding: 3px 9px; font-size: 12px; line-height: 18px; border-radius: 5px; }
.pl .btn-default { background: #fff; border: 1px solid #d5dce6; color: var(--pl-texto); }
.pl .btn-default:hover, .pl .btn-default:focus { background: #f5f7fa; border-color: #c3ccd8; color: var(--pl-texto); }
.pl .btn-default.active { background: var(--pl-acento-suave); border-color: var(--pl-acento); color: var(--pl-acento); box-shadow: none; }
.pl .btn-primary { background: var(--pl-acento); border-color: var(--pl-acento); color: #fff; }
.pl .btn-primary:hover, .pl .btn-primary:focus { background: var(--pl-acento-2); border-color: var(--pl-acento-2); color: #fff; }
.pl .btn-success { background: #16a34a; border-color: #16a34a; color: #fff; }
.pl .btn-success:hover, .pl .btn-success:focus { background: #15803d; border-color: #15803d; color: #fff; }
.pl .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.pl .btn[disabled] { opacity: .55; }

/* ── Encabezado y contexto ────────────────────────── */
.pl-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pl-head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--pl-texto); }
.pl-head h1 .fa { color: var(--pl-acento); margin-right: 8px; }
.pl-head p { margin: 4px 0 0; color: var(--pl-texto-2); }
.pl-contexto { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(220px, .9fr); gap: 14px; padding: 14px 16px; margin-bottom: 14px; background: var(--pl-surface); border: 1px solid var(--pl-borde); border-radius: var(--pl-radio); }
.pl-contexto.sin-ver { grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr); }
.pl-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pl-campo > label { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-muted); }
.pl-bd-valor { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--pl-borde); border-radius: 6px; background: #fafbfc; font-size: 12px; white-space: nowrap; overflow: hidden; }
.pl-bd-valor::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.pl-bd-valor.ok::before { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
.pl-bd-valor.error::before { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .18); }
.pl-bd-valor .fa-database { display: none; }
.pl-bd-valor .bd { margin: 0; font-family: Consolas, monospace; font-weight: 700; color: var(--pl-texto); }
.pl-bd-valor .host { color: var(--pl-muted); font-family: Consolas, monospace; overflow: hidden; text-overflow: ellipsis; }

.pl-banner-suc { position: relative; padding: 12px 16px 12px 18px; margin-bottom: 14px; border: 1px solid #e6dcfb; border-radius: var(--pl-radio); background: #faf7ff; color: var(--pl-texto-2); font-size: 13px; line-height: 1.55; }
.pl-banner-suc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--pl-radio) 0 0 var(--pl-radio); background: var(--pl-pos); }
.pl-banner-suc > .fa { color: var(--pl-pos); margin-right: 4px; }
.pl-banner-suc b.suc { color: var(--pl-texto); font-size: 14px; }
.pl-banner-suc .modo { display: inline-block; padding: 1px 9px; margin: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--pl-ok); background: var(--pl-ok-suave); }
.pl-banner-suc .modo.pos { color: var(--pl-pos); background: var(--pl-pos-suave); }
.pl-banner-suc .aviso { display: block; margin-top: 6px; color: var(--pl-alerta); }

/* Indicadores */
.pl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 14px; }
.pl-stat { --k: var(--pl-acento); position: relative; margin: 0; padding: 12px 16px 12px 18px; background: var(--pl-surface); border: 1px solid var(--pl-borde); border-radius: var(--pl-radio); }
.pl-stat::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.pl-stat.verde { --k: #22c55e; } .pl-stat.rojo { --k: #ef4444; } .pl-stat.gris { --k: #94a3b8; }
.pl-stat .num { font-size: 24px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--pl-texto); }
.pl-stat .txt { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--pl-texto-2); text-transform: none; }

/* ── Pestañas como tarjeta ────────────────────────── */
.pl .pl-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0 16px; background: var(--pl-surface); border: 1px solid var(--pl-borde); border-bottom-color: var(--pl-borde); border-radius: var(--pl-radio) var(--pl-radio) 0 0; }
.pl .pl-tabs::before, .pl .pl-tabs::after { display: none; }
.pl .pl-tabs > li { float: none; margin: 0 14px -1px 0; }
.pl .pl-tabs > li > a { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 14px 4px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none !important; color: var(--pl-texto-2); font-weight: 600; font-size: 13px; }
.pl .pl-tabs > li > a:hover { color: var(--pl-texto); }
.pl .pl-tabs > li.active > a, .pl .pl-tabs > li.active > a:hover, .pl .pl-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--pl-acento); color: var(--pl-acento); }
.pl .pl-tab-body { padding: 16px; background: var(--pl-surface); border: 1px solid var(--pl-borde); border-top: 0; border-radius: 0 0 var(--pl-radio) var(--pl-radio); }

.pl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.pl-toolbar .btn { margin: 0; }
.pl-toolbar .pl-leyenda { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--pl-muted); }
.pl-leyenda .glyphicon { font-size: 14px !important; vertical-align: -2px; margin-right: 3px; }

/* ── Tablas (Bootstrap + DataTables) ──────────────── */
.pl .table { margin-bottom: 0; background: #fff; border-collapse: collapse !important; }
.pl .table-bordered, .pl .table-bordered > thead > tr > th, .pl .table-bordered > tbody > tr > td { border-left: 0 !important; border-right: 0 !important; }
.pl .table-bordered { border: 1px solid var(--pl-borde) !important; border-radius: var(--pl-radio); }
.pl .table > thead > tr > th {
  padding: 10px 10px !important; border-top: 0 !important; border-bottom: 1px solid var(--pl-borde) !important;
  background: #fbfcfd; color: var(--pl-muted); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  vertical-align: bottom; white-space: nowrap;
}
.pl .table > tbody > tr > td { padding: 9px 10px !important; border-top: 1px solid var(--pl-borde-2) !important; vertical-align: middle !important; color: var(--pl-texto); }
.pl .table-striped > tbody > tr:nth-of-type(odd) { background: #fff; }
.pl .table-hover > tbody > tr:hover > td, .pl .table > tbody > tr:hover > td { background: #fafbfe; }
.pl .table > tbody > tr.danger > td { background: var(--pl-peligro-suave) !important; }
.pl .table > tbody > tr.fila-cambio > td, .pl .fila-cambio { background-color: #fffbeb !important; }
.pl table.dataTable thead .sorting, .pl table.dataTable thead .sorting_asc, .pl table.dataTable thead .sorting_desc { background-image: none !important; cursor: pointer; }
.pl table.dataTable thead .sorting::after { content: " \f0dc"; font-family: FontAwesome; color: #cbd5e1; font-size: 10px; }
.pl table.dataTable thead .sorting_asc::after { content: " \f0de"; font-family: FontAwesome; color: var(--pl-acento); font-size: 10px; }
.pl table.dataTable thead .sorting_desc::after { content: " \f0dd"; font-family: FontAwesome; color: var(--pl-acento); font-size: 10px; }
.pl table.dataTable thead .sorting_asc, .pl table.dataTable thead .sorting_desc { color: var(--pl-acento); }
.pl table.dataTable { margin-top: 0 !important; margin-bottom: 0 !important; }
.pl .dataTables_wrapper .dt-toolbar, .pl .dataTables_wrapper .dt-toolbar-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0; margin: 0 0 12px; background: none; border: 0; }
.pl .dataTables_wrapper .dt-toolbar-footer { margin: 12px 0 0; }
.pl .dataTables_wrapper .dataTables_filter { float: none; margin: 0 0 12px; text-align: left; }
.pl .dataTables_wrapper .dt-toolbar .dataTables_filter { margin: 0; }
.pl .dataTables_wrapper .dataTables_filter label { position: relative; display: block; margin: 0; font-weight: 400; }
.pl .dataTables_wrapper .dataTables_filter label::before { content: "\f002"; position: absolute; left: 12px; top: 10px; font-family: FontAwesome; color: var(--pl-muted); pointer-events: none; z-index: 1; }
.pl .dataTables_wrapper .dataTables_filter input { width: 300px !important; max-width: 100%; margin: 0 !important; padding-left: 34px !important; }
.pl .dataTables_wrapper .dataTables_filter .input-group-addon { display: none; }
.pl .dataTables_wrapper .dataTables_info { padding: 0; color: var(--pl-muted); font-size: 12px; font-style: normal; }
.pl .dataTables_wrapper .dataTables_paginate { margin: 0; padding: 0; }
.pl .dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
.pl .pl-dt-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.pl .pagination > li > a, .pl .pagination > li > span { padding: 6px 11px; border-color: var(--pl-borde); color: var(--pl-texto-2); font-weight: 600; font-size: 12px; }
.pl .pagination > li:first-child > a { border-radius: 6px 0 0 6px; }
.pl .pagination > li:last-child > a { border-radius: 0 6px 6px 0; }
.pl .pagination > .active > a, .pl .pagination > .active > a:hover, .pl .pagination > .active > a:focus { background: var(--pl-acento); border-color: var(--pl-acento); color: #fff; }
.pl .pagination > .disabled > a { color: #cbd5e1; }

/* Tabla principal */
#tablaPlatillos td { padding: 8px 8px !important; }
#tablaPlatillos p { margin: 0; }
#tablaPlatillos td b { font-weight: 700; color: var(--pl-texto); white-space: nowrap; }
#tablaPlatillos td small { color: var(--pl-muted); }
.pl-acciones { white-space: nowrap; text-align: right !important; }
.pl .pl-acciones .btn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; margin: 0 0 0 2px; border-color: transparent; background: none; color: var(--pl-texto-2); font-size: 13px; }
.pl .pl-acciones .btn:hover { border-color: var(--pl-borde); background: #f5f7fa; color: var(--pl-texto); }
.pl .pl-acciones .btn-primary { background: var(--pl-acento-suave); color: var(--pl-acento); }
.pl .pl-acciones .btn-primary:hover { background: var(--pl-acento); border-color: var(--pl-acento); color: #fff; }
.icono-completo, .icono-incompleto { display: inline-grid !important; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 15px !important; top: 0 !important; }
.icono-completo { color: var(--pl-ok) !important; background: var(--pl-ok-suave); }
.icono-incompleto { color: var(--pl-peligro) !important; background: var(--pl-peligro-suave); }
.pl-leyenda .icono-completo, .pl-leyenda .icono-incompleto { width: auto; height: auto; background: none; }
.btn-verificado { cursor: pointer; transition: transform .12s; }
.btn-verificado:hover { opacity: 1; transform: scale(1.12); }
.pl-solo-lectura { cursor: default !important; }
.pl-margen-bajo { color: var(--pl-peligro); font-weight: 700; }
.pl-origen { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pl-origen.base { background: var(--pl-acento-suave); color: var(--pl-acento); }
.pl-origen.propio { background: #f1f3f6; color: #64748b; }
.pl-pendiente { margin-left: 4px; color: var(--pl-pos); }

/* Precios por plataforma editables */
.pl-plat { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .02em; text-transform: none; }
.pl-plat.uber { background: #111827; }
.pl-plat.rappi { background: #ff441f; }
.pl-plat.delibot { background: #6c3fc5; }
.pl-th-plataforma { width: 158px; text-align: center !important; vertical-align: top !important; }
.pl-plat-general { display: flex; margin-top: 6px; }
.pl .pl-plat-general .form-control { height: 26px !important; padding: 2px 6px; font-size: 11px !important; text-align: right; border-radius: 5px 0 0 5px; text-transform: none; letter-spacing: 0; }
.pl .pl-plat-general .btn { height: 26px; padding: 0 8px; border-radius: 0 5px 5px 0; margin-left: -1px; }
.pl-plat-sub { display: flex; margin-top: 4px; font-size: 10px; color: var(--pl-muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.pl-plat-sub span:first-child { width: 58px; }
.pl-plat-sub span:last-child { flex: 1; }
.pl-plat-celda { display: flex; justify-content: center; }
.pl .pl-precio-plat { height: 30px !important; padding: 3px 7px; text-align: right; font-size: 12px !important; border-color: #dfe5ec; }
.pl .pl-precio-plat.porc { width: 58px; border-radius: 6px 0 0 6px; background: #f7f8fa; color: var(--pl-texto-2); }
.pl .pl-precio-plat.monto { width: 82px; border-radius: 0 6px 6px 0; margin-left: -1px; font-weight: 700; }
.pl .pl-precio-plat:focus { position: relative; z-index: 2; }
.pl .pl-precio-plat.cero { color: #b8c2cf; font-weight: 400; }
.pl .pl-guardando { border-color: #f59e0b !important; }
.pl .pl-guardado { border-color: #22c55e !important; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2) !important; }

/* Grupo (select2 chico dentro de la tabla) */
.pl .pl-grupo { height: 30px !important; padding: 3px 6px; font-size: 12px !important; }
.pl .pl-grupo.vacio { color: #b8c2cf; }
.pl td .select2-container .select2-selection--single { height: 30px; }
.pl td .select2-container .select2-selection--single .select2-selection__rendered { line-height: 28px; font-size: 12px; padding-left: 9px; padding-right: 24px; }
.pl td .select2-container .select2-selection--single .select2-selection__arrow { height: 28px !important; width: 24px !important; }
.pl td .select2-container .select2-selection--single .select2-selection__arrow::after { line-height: 28px; }
.pl td .select2-container.pl-grupo-vacio .select2-selection__rendered { color: #b8c2cf; }
.pl td .select2-container--disabled .select2-selection--single { background: #f5f7fa; }

/* ── select2 ──────────────────────────────────────── */
.pl .select2-container .select2-selection--single { height: 36px; border: 1px solid #d5dce6; border-radius: 6px; background: #fff; }
.pl .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 11px; padding-right: 30px; line-height: 34px; color: var(--pl-texto); font-size: 13px; }
.pl .select2-container .select2-selection--single .select2-selection__placeholder { color: var(--pl-muted); }
.pl .select2-container .select2-selection--single .select2-selection__arrow { width: 30px !important; height: 34px !important; top: 0 !important; right: 2px !important; border: 0 !important; background: none !important; }
.pl .select2-selection__arrow b { display: none !important; }
.pl .select2-selection__arrow::after { content: "\f107"; position: absolute; inset: 0; font-family: FontAwesome; font-size: 15px; line-height: 34px; text-align: center; color: var(--pl-muted); }
.pl .select2-container--open .select2-selection__arrow::after { content: "\f106"; color: var(--pl-acento); }
.pl .select2-container--open .select2-selection--single, .pl .select2-container--focus .select2-selection--single { border-color: var(--pl-acento); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.select2-container .select2-dropdown { border-color: #d5dce6; border-radius: 6px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); overflow: hidden; z-index: 1080; font-family: 'Open Sans', -apple-system, 'Segoe UI', Arial, sans-serif; }
.select2-container .select2-search--dropdown { padding: 8px; }
.select2-container .select2-search--dropdown .select2-search__field { height: 32px; padding: 5px 9px; border: 1px solid #d5dce6; border-radius: 5px; font-size: 13px; }
.select2-container .select2-results__option { padding: 8px 12px; font-size: 13px; }
.select2-container .select2-results__option--highlighted[aria-selected] { background: #eff4ff !important; color: #1e293b !important; }
.select2-container .select2-results__option[aria-selected="true"] { background: #f1f5fb; font-weight: 600; }
.pl-op { display: flex; align-items: center; gap: 8px; }
.pl-op .clave { min-width: 40px; padding: 1px 6px; border-radius: 4px; background: #eef1f5; color: #475569; font-size: 11px; font-weight: 700; text-align: center; }
.pl-op .tag-pos { margin-left: auto; padding: 0 7px; border-radius: 999px; background: #f3edff; color: #7c3aed; font-size: 10px; font-weight: 800; }
.pl-op .fa-database { color: #2563eb; }
/* select2 dentro de input-group (comparativo: platillo + botón Comparar) */
.pl .cmp-wrap .input-group .select2-container .select2-selection { border-radius: 6px 0 0 6px; }
.pl .input-group-btn .btn { height: 36px; border-radius: 0 6px 6px 0; }

/* ── Modales ──────────────────────────────────────── */
.pl .modal-dialog { margin: 24px auto; }
.pl .modal-content { display: flex; flex-direction: column; max-height: calc(100vh - 48px); border: 0; border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); overflow: hidden; }
.pl .pl-modal-alto .modal-content { height: calc(100vh - 48px); }
.pl .modal-header, .pl .modal-footer { flex: 0 0 auto; }
.pl .pl-modal-header, .pl .cmp-modal-header {
  position: relative; padding: 16px 56px 16px 20px; border-bottom: 1px solid var(--pl-borde); border-radius: 0;
  background: #fff; color: var(--pl-texto);
}
.pl .pl-modal-header .close, .pl .cmp-modal-header .close { position: absolute; top: 14px; right: 16px; margin: 0; font-size: 24px; color: var(--pl-muted); opacity: 1; text-shadow: none; }
.pl .pl-modal-header .close:hover, .pl .cmp-modal-header .close:hover { color: var(--pl-texto); }
.pl .pl-modal-header .modal-title, .pl .cmp-modal-header .modal-title { margin: 2px 0 0; font-size: 18px; font-weight: 700; color: var(--pl-texto); }
.pl .pl-modal-sub, .pl .cmp-modal-sub { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--pl-muted); opacity: 1; }
.pl .pl-modal-sub .fa, .pl .cmp-modal-sub .fa { margin-right: 4px; }
.pl .pl-modal-meta { margin-top: 3px; font-size: 12px; color: var(--pl-texto-2); opacity: 1; }
.pl .pl-codigo { display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px; background: #eef1f5; color: var(--pl-texto-2); font-family: Consolas, monospace; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.pl .pl-chip-verificado { position: absolute; right: 56px; top: 18px; padding: 4px 11px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pl .pl-chip-verificado.si { background: var(--pl-ok-suave); color: var(--pl-ok); }
.pl .pl-chip-verificado.no { background: var(--pl-peligro-suave); color: var(--pl-peligro); }
.pl .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
.pl .pl-modal-body, .pl .cmp-modal-body { background: var(--pl-fondo); }
.pl .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--pl-borde); background: #fff; border-radius: 0; }
.pl .modal-footer::before, .pl .modal-footer::after { display: none; }
.pl .modal-footer .btn + .btn { margin-left: 0; }
.pl .modal-footer .pull-left { float: none !important; margin-right: auto; }
.pl .modal-footer .pull-left + .pull-left { margin-left: -4px; margin-right: auto; }
.pl .modal-footer > div.pull-left { display: flex; gap: 8px; }
.pl .modal-footer > span.pull-left { color: var(--pl-muted); padding-top: 0 !important; }
.pl .modal-header h5 { margin: 0; }
.pl .modal .form-group { margin-bottom: 14px; }
.pl .modal .form-group > label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--pl-texto-2); }
#modalHistorial, #modalBitacoraEnvios { z-index: 1060; }
#modalDetalleEnvio { z-index: 1070; }

/* Contenido de modales */
.pl-nota { display: block; padding: 10px 14px; margin-bottom: 14px; border: 1px solid #dbe6fb; border-radius: var(--pl-radio); background: #f5f8ff; color: #33507f; font-size: 12px; line-height: 1.5; }
.pl-nota > .fa { margin-right: 4px; }
.pl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 14px; }
.pl-kpi { margin: 0; padding: 10px 14px; background: #fff; border: 1px solid var(--pl-borde); border-radius: var(--pl-radio); }
.pl-kpi .k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-muted); }
.pl-kpi .v { margin-top: 2px; font-size: 20px; font-weight: 800; color: var(--pl-texto); font-variant-numeric: tabular-nums; }
.pl-kpi .v.malo { color: var(--pl-peligro); }
.pl-kpi .v.bueno { color: var(--pl-ok); }
.pl-kpis-compacto .pl-kpi .v { font-size: 16px; }
.pl-agregar { padding: 14px 16px; margin-bottom: 16px; background: #fff; border: 1px solid var(--pl-borde); border-radius: 10px; }
.pl-agregar .row { margin-bottom: 4px; }
.pl-agregar .row > div { margin-bottom: 6px; }
.pl-agregar-titulo { margin-bottom: 10px; font-weight: 700; color: var(--pl-texto); }
.pl-agregar-titulo .fa { color: #16a34a; margin-right: 4px; }
.pl-agregar small.text-muted { font-size: 12px; }
.pl-seccion { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.pl-seccion .pl-subtotal { margin-left: auto; float: none !important; }
.pl-subtotal { font-size: 12px; color: var(--pl-texto-2); }
.pl-subtotal b { color: var(--pl-texto); font-size: 13px; }
.pl .label { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.pl .label-ingrediente { background: var(--pl-ok-suave); color: var(--pl-ok); }
.pl .label-preparado { background: #fff1e8; color: #c2410c; }
.pl .pl-tabla-receta { margin-bottom: 16px; background: #fff; border: 1px solid var(--pl-borde) !important; border-radius: 10px; border-collapse: separate !important; border-spacing: 0; overflow: hidden; }
.pl .pl-tabla-receta > tbody > tr:first-child > td { border-top: 0 !important; }
.pl .pl-tabla-receta .input-group { width: 150px; margin-left: auto; }
.pl .pl-tabla-receta .input-group .form-control { height: 30px !important; padding: 3px 8px; }
.pl .pl-tabla-receta .input-group-addon { padding: 3px 8px; font-size: 11px; min-width: 40px; }
.pl-form-seccion { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; margin: 4px 0 12px; border: 0; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pl-texto); }
.pl-form-seccion label { margin: 0; float: none !important; font-size: 12px; font-weight: 600 !important; color: var(--pl-acento); }
.pl #formNuevoPlatillo, .pl #formNuevoPreparadoPlatillo { padding: 16px 18px; background: #fff; border: 1px solid var(--pl-borde); border-radius: 10px; }
.pl-barra { height: 4px; margin-top: 4px; border-radius: 2px; background: var(--pl-borde-2); }
.pl-barra > div { height: 4px; border-radius: 2px; background: var(--pl-acento); }
.pl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip { margin: 0; padding: 3px 11px; border: 0; border-radius: 999px; background: var(--pl-acento-suave); color: var(--pl-acento-2); font-size: 12px; font-weight: 600; }
.pl-chip small { color: var(--pl-muted); }
.pl-suc-clave { display: inline-block; min-width: 44px; padding: 1px 7px; margin-right: 8px; border-radius: 4px; background: var(--pl-borde-2); color: var(--pl-texto-2); font-size: 11px; font-weight: 800; text-align: center; }
.estado-ok { color: var(--pl-ok); font-weight: 700; }
.estado-error { color: var(--pl-peligro); font-weight: 700; }
.pl .radio label { font-weight: 500; }
#modalRecalcularPlataformas .text-warning { padding: 8px 12px; border-radius: 6px; background: var(--pl-alerta-suave); color: var(--pl-alerta) !important; }
#tablaRecetas tbody td { vertical-align: middle; }
.editable-cantidad { text-align: right; }

/* ── Comparativo (pisa css/comparativo.css solo aquí) ─ */
.pl .cmp-panel { margin-bottom: 14px; border: 1px solid var(--pl-borde); border-radius: 10px; box-shadow: none; overflow: hidden; }
.pl .cmp-panel > .panel-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--pl-borde); background: #fff; color: var(--pl-texto); }
.pl .cmp-panel > .panel-heading::before, .pl .cmp-panel > .panel-heading::after { display: none; }
.pl .cmp-panel > .panel-heading .pull-right { float: none !important; margin-left: auto; }
.pl .cmp-paso { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 2px; border-radius: 50%; background: var(--pl-acento-suave); color: var(--pl-acento); font-size: 12px; font-weight: 800; line-height: 1; }
.pl .cmp-panel > .panel-body { padding: 16px; }
.pl .cmp-panel > .panel-body .row > div > label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--pl-texto-2); }
.pl #tablaConexiones { border: 0 !important; border-radius: 0; }
.pl .cmp-host { color: var(--pl-texto-2); }
.pl .cmp-estado-ok { color: var(--pl-ok); }
.pl .cmp-estado-error { color: var(--pl-peligro); }
.pl .cmp-card { min-height: 76px; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--pl-borde); border-radius: 10px; background: #fff; }
.pl .cmp-card-titulo { margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pl-muted); }
.pl .cmp-leyenda { display: inline-block; padding: 2px 10px; margin: 0 6px 4px 0; border: 1px solid var(--pl-borde); border-radius: 999px; font-size: 12px; }
.pl .diff-falta { background-color: #fdecec !important; }
.pl .diff-extra { background-color: #eaf3ff !important; }
.pl .diff-cantidad, .pl .diff-costo { background-color: #fffbeb !important; }
.pl .cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 0 0 12px; }
.pl .cmp-kpi { --k: var(--pl-acento); position: relative; margin: 0; padding: 10px 14px 10px 16px; border: 1px solid var(--pl-borde); border-left: 1px solid var(--pl-borde); border-radius: var(--pl-radio); background: #fff; transition: border-color .15s; }
.pl .cmp-kpi::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--k); }
.pl .cmp-kpi:hover { border-color: #c3ccd8; }
.pl .cmp-kpi.verde { --k: #22c55e; } .pl .cmp-kpi.rojo { --k: #ef4444; } .pl .cmp-kpi.naranja { --k: #f59e0b; } .pl .cmp-kpi.gris { --k: #94a3b8; }
.pl .cmp-kpi .n { font-size: 22px; font-weight: 800; }
.pl .cmp-kpi .t { font-size: 11px; font-weight: 600; color: var(--pl-texto-2); text-transform: none; }
.pl .cmp-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pl .cmp-filtros .btn { margin: 0; padding: 5px 12px; border-radius: 999px; font-size: 12px; }
.pl .cmp-tabla-todos { border: 1px solid var(--pl-borde) !important; border-radius: 10px; border-collapse: separate !important; border-spacing: 0; overflow: hidden; }
.pl .cmp-fila-distinta > td { background: #fffaf3; }
.pl #tabsComparativo { display: flex; gap: 4px; margin: 0; padding: 0 14px; border: 1px solid var(--pl-borde); border-bottom: 1px solid var(--pl-borde); border-radius: 10px 10px 0 0; background: #fff; }
.pl #tabsComparativo::before, .pl #tabsComparativo::after { display: none; }
.pl #tabsComparativo > li { float: none; margin: 0 12px -1px 0; }
.pl #tabsComparativo > li > a { padding: 12px 4px; margin: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--pl-texto-2); font-weight: 600; }
.pl #tabsComparativo > li.active > a, .pl #tabsComparativo > li.active > a:hover { border: 0; border-bottom: 2px solid var(--pl-acento); color: var(--pl-acento); background: none; }
.pl .cmp-tab-body { padding: 16px; border: 1px solid var(--pl-borde); border-top: 0; border-radius: 0 0 10px 10px; background: #fff; }
.pl .badge-creado, .pl .badge-emparejado { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.pl .badge-creado { background: var(--pl-ok-suave); color: var(--pl-ok); }
.pl .badge-emparejado { background: #f1f3f6; color: #64748b; }
.pl #modalRecetaComparada .modal-dialog { margin: 24px auto; }
.pl #modalRecetaComparada .modal-content { height: calc(100vh - 48px); }
.pl .alert { border-radius: var(--pl-radio); }

/* Permisos especiales: body.sin-X oculta los elementos .perm-X */
body.sin-editar_datos .perm-editar_datos,
body.sin-editar_receta .perm-editar_receta,
body.sin-verificar .perm-verificar,
body.sin-precios_plataforma .perm-precios_plataforma,
body.sin-enviar .perm-enviar,
body.sin-comparativo .perm-comparativo,
body.sin-bitacora .perm-bitacora,
body.sin-editar_sucursal .perm-editar_sucursal { display: none !important; }
/* Vista de UNA sucursal ("Ver catálogo de"): oculta lo que solo aplica a la BD base */
body.pl-vista-sucursal .pl-solo-base, body:not(.pl-vista-sucursal) .pl-solo-sucursal { display: none !important; }
body.pl-vista-sucursal #avisoCodigo { display: none !important; }
/* En la sucursal el permiso que manda es editar_sucursal (no editar_receta) */
body.pl-vista-sucursal .pl-agregar.perm-editar_receta { display: block !important; }
body.pl-vista-sucursal.sin-editar_sucursal .pl-agregar.perm-editar_receta { display: none !important; }

@media (max-width: 1280px) {
  #content.pl { padding-left: 14px; padding-right: 14px; }
  .pl-toolbar .pl-leyenda { margin-left: 0; width: 100%; }
}
@media (max-width: 991px) {
  .pl-contexto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  #content.pl { padding: 12px; }
  .pl-contexto, .pl-contexto.sin-ver { grid-template-columns: 1fr; }
  .pl .dataTables_wrapper .dataTables_filter input { width: 100% !important; }
  .pl .pl-chip-verificado { position: static; margin-top: 8px; }
}

/* Tablas anchas: solo la tabla se desplaza de lado (el buscador y la paginación se quedan fijos) */
.pl .pl-tabla-scroll { overflow-x: auto; border: 1px solid var(--pl-borde); border-radius: var(--pl-radio); background: #fff; }
.pl .pl-tabla-scroll > .table, .pl .pl-tabla-scroll > .table-bordered { border: 0 !important; border-radius: 0; }
.pl .pl-tabla-scroll > .pl-tabla-receta, .pl .pl-tabla-scroll > .cmp-tabla-todos { margin: 0; border: 0 !important; border-radius: 0; }
/* Cantidades de la receta alineadas a la derecha */
.pl .pl-tabla-receta td .input-group { float: right; }

/* ─── Matriz platillos × sucursales (tab "Matriz por sucursal", platillos_matriz.js) ─── */
#tabMatriz { padding: 14px 16px 18px; }
.pl-mx-sucs-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
.pl-mx-sucs-head .btn { margin-left: auto; }
.pl-atajos { display: inline-flex; gap: 4px; font-size: 12px; font-weight: 600; }
.pl-atajos a { padding: 2px 8px; border-radius: 999px; color: var(--pl-acento); cursor: pointer; text-decoration: none !important; }
.pl-atajos a:hover { background: var(--pl-acento-suave); }
.pl-mx-sucs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.pl-mx-sucs label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 9px; border: 1px solid var(--pl-borde); border-radius: 8px; background: #fff; font-weight: 500 !important; font-size: 12px; cursor: pointer; }
.pl-mx-sucs label:has(input:checked) { border-color: var(--pl-acento); background: var(--pl-acento-suave); }
.pl-mx-sucs input { width: 16px; height: 16px; margin: 0; accent-color: var(--pl-acento); }
.pl-mx-sucs .tag-pos { margin-left: auto; padding: 0 6px; border-radius: 4px; background: var(--pl-pos-suave); color: var(--pl-pos); font-size: 10px; font-weight: 800; }
.pl-mx-leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 10px; font-size: 12px; color: var(--pl-texto-2); }
.pl-mx-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.pl-mx-buscar { width: 260px; margin-left: auto; }
.pl-mx-op { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 600 !important; cursor: pointer; }
.pl-mx-op input { margin: 0; accent-color: var(--pl-acento); }
.pl-mx-c { display: inline-block; width: 18px; height: 12px; border: 1px solid #b9c3d1; border-radius: 2px; }
.pl-mx-vacio { text-align: center; padding: 56px 16px; color: var(--pl-muted); }
.pl-mx-vacio i.fa-3x { display: block; margin-bottom: 12px; color: #cbd5e1; }

.pl-mx-wrap { overflow: auto; max-height: calc(100vh - 260px); border: 1px solid var(--pl-borde); border-radius: 6px; }
.pl-mx { border-collapse: separate; border-spacing: 0; font-size: 12px; }
.pl-mx th, .pl-mx td { border-right: 1px solid var(--pl-borde); border-bottom: 1px solid var(--pl-borde); }
.pl-mx thead th { position: sticky; top: 0; z-index: 2; background: #f8fafc; padding: 6px 4px; font-weight: 700; color: var(--pl-texto-2); vertical-align: bottom; text-align: center; }
.pl-mx thead th.suc { min-width: 74px; max-width: 96px; line-height: 1.2; }
.pl-mx thead th.suc .clave { display: block; font-size: 10px; font-weight: 800; color: var(--pl-muted); }
.pl-mx thead th.suc.err { color: var(--pl-peligro); }
.pl-mx thead th.suc .pl-mx-suc-act { margin-top: 4px; font-weight: 400; }
.pl-mx thead th.suc .pl-mx-suc-act .btn { padding: 0 6px; }
.pl-mx .plat { position: sticky; left: 0; z-index: 1; min-width: 260px; max-width: 360px; padding: 5px 10px; background: #fff; text-align: left; font-weight: 600; color: var(--pl-texto); }
.pl-mx thead th.plat { z-index: 3; background: #f8fafc; vertical-align: middle; }
.pl-mx .plat small { display: block; font-weight: 500; color: var(--pl-muted); font-size: 11px; }
.pl-mx .tot { min-width: 54px; text-align: center; font-weight: 700; color: var(--pl-texto-2); background: #f8fafc; }
.pl-mx tr.sec td { position: sticky; left: 0; padding: 6px 10px; background: var(--pl-borde-2); font-weight: 700; color: var(--pl-texto-2); text-transform: uppercase; font-size: 11px; letter-spacing: .03em; }
.pl-mx tbody tr:hover td.plat { background: var(--pl-acento-suave); }
.pl-mx td.c, .pl-mx-c { position: relative; }
.pl-mx td.c { height: 26px; padding: 0; text-align: center; color: #fff; }
.pl-mx td.c.on, .pl-mx-c.on { background: #2f5597; }
.pl-mx td.c.no, .pl-mx-c.no { background: #fff; }
.pl-mx td.c.err, .pl-mx-c.err { background: repeating-linear-gradient(135deg, #f3f4f6 0 4px, #e5e7eb 4px 8px); }
.pl-mx td.c.cargando { background: #fff; color: var(--pl-muted); }
.pl-mx td.c .fa-clock-o { font-size: 11px; }
.pl-mx td.c.on .fa-clock-o { color: #ffd166; }
.pl-mx td.c.no .fa-clock-o { color: var(--pl-pos); }
.pl-mx td.c.dif, .pl-mx-c.dif { box-shadow: inset 0 0 0 3px #f59e0b; }
.pl-mx td.c.dif .fa-exclamation { color: #fbbf24; font-weight: 700; }
.pl-mx td.c.clic { cursor: pointer; }
.pl-mx td.c.clic:hover { outline: 2px solid var(--pl-acento); outline-offset: -2px; }
.pl-mx-dif { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; background: var(--pl-borde-2); font-size: 12px; color: var(--pl-texto-2); }
.pl-mx-dif.hay { background: var(--pl-alerta-suave); color: var(--pl-alerta); }
.pl-mx-dif .btn { margin-left: auto; }
.pl-mx-solo-num { display: none; font-weight: 700; color: var(--pl-alerta); }
body.sin-enviar .pl-mx-solo-num { display: inline; }
.pl-mx-tabla-dif td.base { color: var(--pl-ok); font-weight: 600; }
.pl-mx-tabla-dif td.suc { color: var(--pl-peligro); font-weight: 600; }
.pl-mx-chip { display: inline-block; padding: 2px 8px; margin: 2px 4px 2px 0; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pl-mx-chip.falta { background: var(--pl-ok-suave); color: var(--pl-ok); }
.pl-mx-chip.sobra { background: var(--pl-peligro-suave); color: var(--pl-peligro); text-decoration: line-through; }
.pl-mx-ok { padding: 14px; border-radius: 6px; background: var(--pl-ok-suave); color: var(--pl-ok); font-weight: 600; }
.pl-mx-aviso { padding: 11px 14px; margin-bottom: 12px; border: 1px solid #f6d7a7; border-radius: var(--pl-radio); background: var(--pl-alerta-suave); color: #7c4a03; font-size: 13px; }