@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@400;500;700&display=swap");

/* =========================================================
   Kufferath — Reporte de servicio (CSS unificado)
   Pantalla + Impresión (A4)
   ========================================================= */

/* -------------------- Variables -------------------- */
:root {
    /* UI (pantalla) */
    --bg: #0e0f10;
    --panel: #111418;
    --panel-2: #0f1216;
    --line: #1e2329;
    --text: #e6e6e6;
    --muted: #cfcfcfbb;
    --acc: #ffc400;
    --acc-2: #cc9e00;
    --ok: #22c55e;
    --danger: #ef4444;
    --radius: 16px;
    --shadow: 0 20px 40px #0008, inset 0 1px 0 #ffffff14;

    /* Print */
    --print-text: #111;
    --print-line: #cfcfd4;
    --print-muted: #666;
    --print-yellow: #f5c323;
    --print-gray-bg: #f6f7f9;
}

:root[data-theme="light"] {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-2: #f4f6fb;
    --line: #d7dee8;
    --text: #1f2937;
    --muted: #6b778c;
    --acc: #f2b705;
    --acc-2: #d8a500;
    --ok: #16a34a;
    --danger: #dc2626;
    --shadow: 0 18px 36px rgba(15, 23, 42, .12), inset 0 1px 0 #ffffff;
}

/* -------------------- Base -------------------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 "Montserrat", "Roboto", sans-serif;
}

button, input, select, textarea, table, th, td {
    font-family: "Montserrat", "Roboto", sans-serif;
}

body.no-scroll {
    overflow: hidden;
}

[hidden] {
    display: none !important;
}

/* -------------------- Layout -------------------- */
.wrap {
    max-width: 1100px;
    margin: 24px auto;
    padding: 16px;
    position: relative;
}

.hist-body {
    position: relative;
}

.hist-body .loading {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    backdrop-filter: saturate(.8) blur(1px);
    z-index: 10;
}

.hist-body.is-loading .loading {
    display: flex;
}

.hist-body.is-loading {
    display: block;
}

:root[data-theme="light"] .hist-body .loading {
    background: rgba(255, 255, 255, .75);
    color: #1f2937;
}

/* -------------------- Skeleton (boot) -------------------- */
.srv-skeleton {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: start center;
    padding: 16px;
    background: var(--bg);
    color: var(--text);
    pointer-events: all;
    opacity: 1;
    visibility: visible;
}

html[data-sr-ready="1"] .srv-skeleton {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
}

:root[data-theme="light"] .srv-skeleton {
    background:
        radial-gradient(1200px 800px at 10% -10%, #e7ecf2 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 10%, #f1f4f8 0%, transparent 55%),
        linear-gradient(160deg, #e6ebf2, #f1f4f8 70%);
}

.srv-sk-inner {
    width: min(1100px, 94vw);
    display: grid;
    gap: 12px;
}

.srv-sk-card {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: color-mix(in srgb, #ffffff 4%, transparent);
    padding: 16px;
    box-shadow: var(--shadow);
}

.srv-sk-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.srv-sk-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.srv-sk-title {
    display: grid;
    gap: 6px;
}

.srv-sk-line {
    height: 14px;
    border-radius: 10px;
}

.srv-sk-line.lg { width: 260px; height: 18px; }
.srv-sk-line.sm { width: 380px; height: 12px; }

.srv-sk-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 0 4px;
}

.srv-sk-pill {
    width: 140px;
    height: 32px;
    border-radius: 999px;
}

.srv-sk-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.srv-sk-field {
    height: 36px;
    border-radius: 10px;
}

.srv-sk-block {
    height: 90px;
    border-radius: 14px;
    margin-top: 10px;
}

.srv-sk-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.16), rgba(255,255,255,.08));
    background-size: 200% 100%;
    animation: srv-shimmer 1.2s ease-in-out infinite;
}

:root[data-theme="light"] .srv-sk-shimmer {
    background: linear-gradient(90deg, rgba(15,23,42,.06), rgba(15,23,42,.12), rgba(15,23,42,.06));
}

@keyframes srv-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (max-width: 900px) {
    .srv-sk-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .srv-sk-grid { grid-template-columns: 1fr; }
    .srv-sk-tabs { flex-wrap: wrap; }
}

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card h1 {
    margin: 0;
    font-size: 20px;
    letter-spacing: .5px;
}

.head {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}

.logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    color: #111;
    font-weight: 800;
}

.body {
    padding: 16px;
}

/* -------------------- Grids & utilidades -------------------- */
.grid {
    display: grid;
    gap: 12px;
}

.grid-2 {
    display: grid;
    gap: 12px;
}

@media (min-width: 900px) {
    .grid.cols-2 {
        grid-template-columns:1fr 1fr;
    }

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

.row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.muted {
    color: var(--muted);
}

/* -------------------- Formularios -------------------- */
  label {
      display: block;
      font-weight: 600;
      color: #fff;
  }

  .req {
      color: #c1121f;
      font-weight: 700;
      margin-left: 2px;
  }

  @media print {
      .req {
          display: none;
      }
  }

  .view-only .assign-picker button {
      display: none;
  }

  .view-only.allow-assign-link #assignment_pick {
      display: inline-flex;
  }

  .view-only.allow-assign-link #assignment_clear {
      display: none;
  }

input[type="text"], input[type="date"], input[type="time"], textarea, select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    outline: none;
    box-shadow: inset 0 1px 0 #ffffff0f;
}

/* -------------------- Asignacion: selector modal -------------------- */
.assign-picker {
    display: flex;
    gap: 8px;
    align-items: center;
}

.assign-picker input {
    flex: 1 1 auto;
}

  .assign-search {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }

  .assign-row {
      display: grid;
      gap: 8px;
      grid-template-columns: 1fr;
  }

  .assign-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  .assign-search label {
      font-size: 12px;
      opacity: 0.8;
  }

  .assign-search input,
  .assign-search select {
      width: 100%;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--panel-2);
      color: var(--text);
      outline: none;
  }

  @media (min-width: 720px) {
      .assign-row.cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .assign-row.cols-3 {
          grid-template-columns: repeat(3, minmax(0, 1fr));
      }
  }

.assign-list {
    display: grid;
    gap: 8px;
    margin-top: 10px;
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.assign-month {
    padding: 6px 10px 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .04em;
    grid-column: 1 / -1;
}

.assign-item {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    cursor: pointer;
}

.assign-item .t {
    font-weight: 700;
}

.assign-item .assign-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--muted);
}

.assign-item .sub {
    font-size: 12px;
    color: var(--muted);
}
.assign-item .sub strong {
    color: var(--text);
    font-weight: 700;
}

.assign-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 720px) {
    .assign-list {
        grid-template-columns: 1fr;
    }
}

.assign-page {
    font-size: 12px;
    color: var(--muted);
}

.assign-item:hover {
    border-color: color-mix(in oklab, var(--acc) 35%, var(--line));
    background: color-mix(in oklab, var(--panel-2) 80%, var(--acc));
}

.assign-empty {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--line);
    color: var(--muted);
}

textarea {
    min-height: 110px;
    resize: vertical;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--acc) 50%, #fff);
    outline-offset: 2px;
}

/* -------------------- Chips / Botones -------------------- */
.chip {
    background: #1f2937;
    border: 1px solid #263244;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    color: #ffd54f;
    line-height: 1;
}

.actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px;
    border-top: 1px solid var(--line);
}

.btn {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
}

.btn.primary {
    background: linear-gradient(#2a2f3a, #161a22);
    border-color: #2a3444;
}

.btn.accent {
    background: var(--acc);
    color: #111;
    border-color: #c88a00;
}

.btn:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--acc) 50%, #fff);
    outline-offset: 2px;
}

/* -------------------- Secciones / Opciones -------------------- */
.sec {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-2);
    margin-bottom: 14px;
}

.sec-sub {
    margin-bottom: 10px;
    background: var(--panel);
    border-color: color-mix(in oklab, var(--line) 70%, #000);
}

.sec h3 {
    margin: 0 0 10px;
    font-size: 16px;
}

.sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.sec-head h3 {
    margin: 0;
}

.sec-head-left,
.sec-head-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sec-head-right {
    margin-left: auto;
}

.print-only {
    display: none;
}

.print-assign {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-align: right;
}

.print-assign-value {
    margin-left: 6px;
    border-bottom: 0.1px solid currentColor;
    padding-bottom: 1px;
}

.req {
    color: #e11d48;
    font-weight: 700;
}

.field-missing {
    outline: 2px solid rgba(225, 29, 72, 0.35);
    outline-offset: 2px;
    border-radius: 10px;
    background: rgba(225, 29, 72, 0.06);
}

.req-note {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #f97316;
}

.hint-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.hint-text {
    font-size: 0.78rem;
    color: var(--muted);
}


.assign-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.assign-inline label {
    margin: 0;
    font-size: 12px;
    opacity: 0.8;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .sec-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .assign-inline {
        width: 100%;
    }

    .assign-inline .assign-picker {
        flex: 1 1 auto;
    }
}

@media print {
    .print-only {
        display: inline-flex;
    }

    .sec-head-right .assign-inline {
        display: none;
    }

    .sec-head {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }

    .sec-head-left {
        flex: 1 1 auto;
        justify-content: flex-start;
    }

    .sec-head-left h3 {
        text-align: left;
    }
}

.opts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sec-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.sec-grid-2 .sec {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .sec-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* D.2 — título e input en línea completa (pantalla) */
#sec_desc .opts[role="radiogroup"] .cause-title,
#sec_desc_rest .opts[role="radiogroup"] .cause-title,
#sec_desc .opts[role="radiogroup"] #satisfaccion_causa,
#sec_desc_rest .opts[role="radiogroup"] #satisfaccion_causa {
    flex: 1 1 100%;
}

#sec_desc .opts[role="radiogroup"] .cause-title,
#sec_desc_rest .opts[role="radiogroup"] .cause-title {
    font-weight: 600;
    margin-top: 6px;
}

.opt {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #1a2230;
    border: 1px solid #283548;
    cursor: pointer;
}

.opt input[type="checkbox"], .opt input[type="radio"] {
    accent-color: var(--acc);
}

.opt input[type="text"] {
    width: 220px;
}

/* -------------------- Tablas -------------------- */
.tbl {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}

.tbl thead th {
    background: #151a22;
    font-weight: 700;
}

.tbl th, .tbl td {
    border-top: 1px solid var(--line);
    padding: 10px 8px;
    text-align: left;
    vertical-align: top;
}

.tbl tfoot td {
    background: #0f141b;
}

/* ===== Responsive: Tabla C (Fechas/Horas) #tbl_entrega ===== */
@media (max-width: 720px) {
    #tbl_entrega {
        border: 0;
        background: transparent;
    }

    #tbl_entrega thead {
        display: none;
    }

    #tbl_entrega tbody,
    #tbl_entrega tfoot {
        display: block;
        width: 100%;
    }

    #tbl_entrega tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
        padding: 12px;
        margin: 0 0 10px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--panel);
    }

    #tbl_entrega tbody td {
        border: 0;
        padding: 0;
    }

    #tbl_entrega tbody td::before {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        margin: 0 0 6px;
    }

    /* Labels por columna (5 columnas reales) */
    #tbl_entrega tbody td:nth-child(1)::before {
        content: "Fecha inicio";
    }

    #tbl_entrega tbody td:nth-child(2)::before {
        content: "Hora inicio";
    }

    #tbl_entrega tbody td:nth-child(3)::before {
        content: "Fecha fin";
    }

    #tbl_entrega tbody td:nth-child(4)::before {
        content: "Hora fin";
    }

    /* Acciones (col 5) a todo el ancho y sin label */
    #tbl_entrega tbody td:nth-child(5) {
        grid-column: 1 / -1;
    }

    #tbl_entrega tbody td:nth-child(5)::before {
        content: "";
        display: none;
    }

    #tbl_entrega .row-actions {
        justify-content: flex-end;
    }

    /* Footer */
    #tbl_entrega tfoot tr {
        display: block;
    }

    #tbl_entrega tfoot td {
        display: block;
        border: 0;
        padding: 0;
        text-align: right;
        background: transparent;
    }
}

@media (max-width: 420px) {
    #tbl_entrega tbody tr {
        grid-template-columns: 1fr;
    }
}


/* Extra: si el celular es muy angosto, apila todo en 1 columna */
@media (max-width: 420px) {
    #tbl_entrega tbody tr {
        grid-template-columns: 1fr;
    }
}


.row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.link {
    appearance: none;
    background: none;
    border: 0;
    color: var(--acc);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 8px;
}

.link:hover {
    text-decoration: underline;
}

.hide {
    display: none !important;
}

/* -------------------- Progreso -------------------- */
.badge-progress {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-progress .chip {
    cursor: pointer;
}

/* -------------------- Light mode tweaks -------------------- */
:root[data-theme="light"] .logo {
    background: #0f172a;
    color: #ffffff;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #d7dee8;
}

:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder {
    color: #94a3b8;
}

:root[data-theme="light"] .chip {
    background: #eef2f7;
    border-color: #d7dee8;
    color: #1f2937;
}

:root[data-theme="light"] .btn {
    background: #ffffff;
    border-color: #d7dee8;
    color: #1f2937;
}

:root[data-theme="light"] .btn.primary {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
}

:root[data-theme="light"] .btn.accent {
    background: #f2b705;
    border-color: #d8a500;
    color: #111111;
}

:root[data-theme="light"] .tbl {
    border-color: #d7dee8;
    background: #ffffff;
}

:root[data-theme="light"] .tbl thead th {
    background: #f8fafc;
    color: #0f172a;
}

:root[data-theme="light"] .tbl th,
:root[data-theme="light"] .tbl td {
    border-top-color: #d7dee8;
}

:root[data-theme="light"] .tbl tfoot td {
    background: #f1f5f9;
}

:root[data-theme="light"] .tab-bar {
    border-bottom-color: #d7dee8;
}

:root[data-theme="light"] .tab-btn {
    color: #64748b;
}

:root[data-theme="light"] .tab-btn.is-active {
    color: #0f172a;
    border-color: #f2b705;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}

:root[data-theme="light"] .opt {
    background: #f8fafc;
    border-color: #d7dee8;
    color: #1f2937;
}

:root[data-theme="light"] input[type="checkbox"],
:root[data-theme="light"] input[type="radio"] {
    accent-color: #0f172a;
}

:root[data-theme="light"] .modal-backdrop {
    background: rgba(15, 23, 42, .35);
}

:root[data-theme="light"] .modal .dialog {
    background: #ffffff;
    border-color: #d7dee8;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .18);
}

:root[data-theme="light"] .modal .title,
:root[data-theme="light"] .modal .foot {
    background: #f8fafc;
    border-color: #d7dee8;
    color: #0f172a;
}

:root[data-theme="light"] .modal .content {
    background: #ffffff;
}

:root[data-theme="light"] .sig-canvas-wrap {
    background: #f8fafc;
    border-color: #d7dee8;
}

:root[data-theme="light"] .sig-preview img {
    border-color: #d7dee8;
}

:root[data-theme="light"] .actions .btn.primary {
    background: #0f172a;
    border-color: #0f172a;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .18);
}

:root[data-theme="light"] .tbl thead th,
:root[data-theme="light"] .hist-table thead th {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #d7dee8;
}

:root[data-theme="light"] .hist-table {
    border-color: #d7dee8;
    background: #ffffff;
}

:root[data-theme="light"] .hist-table tbody tr:nth-child(even) {
    background: #f8fafc;
}

:root[data-theme="light"] .hist-table .btn.danger {
    background: #fff1f2;
    border-color: #fecdd3;
    color: #b91c1c;
}

:root[data-theme="light"] .hist-table .btn.danger:hover {
    border-color: #fda4af;
    color: #991b1b;
}

:root[data-theme="light"] label,
:root[data-theme="light"] .hist-filter-label,
:root[data-theme="light"] .muted {
    color: #475569;
}

:root[data-theme="light"] .sig-box {
    background: #f8fafc;
    border-color: #d7dee8;
}

:root[data-theme="light"] .sig-preview img {
    background: #ffffff;
    border-color: #d7dee8;
}

.badge-progress input {
    display: none;
}

.badge-progress .chip[aria-pressed="true"] {
    background: #2b2410;
    border-color: #735f20;
    color: #ffd76b;
}

/* -------------------- Firma (pantalla) -------------------- */
.sig-box {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px dashed #2b3340;
    border-radius: 12px;
    background: #0d1217;
}

.sig-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sig-preview img {
    max-height: 70px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
}
.sig-preview,
.sig-preview img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* -------------------- Modal de firma -------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out;
}

.modal-backdrop[open] {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 1001;
    pointer-events: none;
}

.modal[open] {
    pointer-events: auto;
}

.modal .dialog {
    width: min(860px, 92vw);
    max-height: 88vh;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 24px 60px #000a, inset 0 1px 0 #ffffff12;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#assignModal .dialog {
    height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
}

#assignModal .content {
    overflow: auto;
    flex: 1 1 auto;
}

  .assign-foot {
      justify-content: flex-end;
      min-height: 56px;
  }

  .assign-foot .assign-pager {
      margin-right: auto;
  }

  .assign-page {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 180px;
  }

  .modal .title, .modal .foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 12px 14px;
    background: #0f1319;
    border-bottom: 1px solid var(--line);
}

#assignModal .title {
    padding: 8px 12px;
}
#assignModal .modal-close-x {
    font-size: 20px;
    line-height: 1;
    padding: 6px 10px;
}

.modal .foot {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

  .modal .content {
      padding: 12px;
      overflow: auto;
  }
  @media (max-width: 640px) {
      .modal .dialog {
          width: 94vw;
          height: min(92vh, 92svh);
      }
      .modal .title {
          position: sticky;
          top: 0;
          z-index: 2;
      }
      .modal .foot {
          position: sticky;
          bottom: 0;
          z-index: 2;
      }
      .modal .title .btn,
      .modal .foot .btn {
          min-height: 36px;
      }
  }

.sig-canvas-wrap {
    padding: 12px;
    background: #0b1016;
    border: 1px solid #1e2733;
    border-radius: 12px;
}

.sig-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 280px;
    background: #fff;
    border-radius: 8px;
}

.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.toolbar .seg {
    display: inline-flex;
    gap: 6px;
}

.toolbar .btn[aria-pressed="true"] {
    outline: 2px solid color-mix(in oklab, var(--acc) 50%, #fff);
    outline-offset: 2px;
}

/* Modal/backdrop: ocultos por defecto; visibles solo con [open] */
.modal, .modal-backdrop {
    display: none !important;
}

.modal[open] {
    display: grid !important;
}

.modal-backdrop[open] {
    display: block !important;
    opacity: 1;
}

/* -------------------- Cabecera/Firmas solo impresión -------------------- */
.print-header {
    display: none;
}

.print-signature-block {
    display: none;
}

/* ===========================
iOS/Safari: date input no debe forzar ancho
=========================== */
#sec_info .grid-auto > div {
    min-width: 0;
}

/* el grid-item sí puede encoger */
#sec_info input[type="date"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* opcional: refuerzo solo iOS */
@supports (-webkit-touch-callout: none) {
    #sec_info input[type="date"] {
        min-width: 0;
        max-width: 100%;
    }
}


/* -------------------- Paginación de impresión -------------------- */
@page {
    size: A4;
    margin: 10mm;
}

/* ——— Fuerza A4 en iOS Safari ——— */
@media print {
    /* 1) Usa medidas físicas además del nombre A4 */
    @page {
        /* intenta con el nombre… */
        size: A4 portrait;
        margin: 10mm;
    }

    /* …y refuerza con tamaño explícito en mm (iOS a veces sólo respeta esto) */
    @page {
        size: 210mm 297mm;
    }

    /* 2) Fija el lienzo del documento al ancho del papel A4 */
    html, body {
        width: 210mm !important;
        /* height no siempre es necesaria, pero ayuda a la maquetación */
        min-height: 297mm !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* 3) Evita zoom/autoajustes que cambian el tamaño efectivo */
    * {
        -webkit-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
}

/* Opcional: fallback en pulgadas por si alguna versión no respeta mm */
@media print {
    @page {
        size: 8.27in 11.69in;
    }

    /* A4 en pulgadas */
}


/* =========================================================
   PRINT (UNIFICADO)
   ========================================================= */
@media print {
    /* Reset/ajustes base impresión */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html, body {
        background: #fff !important;
        color: var(--print-text) !important;
    }

    body {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    .wrap {
        padding: 0 !important;
        margin: 0 !important;
    }

    .body {
        padding: 0 !important;
    }

    /* Ocultar UI pantalla */
    .head, .actions, .modal, .modal-backdrop {
        display: none !important;
    }

    #sec_firma {
        display: none !important;
    }

    /* Contenedores claros */
    .card, .sec, .sig-box {
        background: #fff !important;
        border: 1px solid var(--print-line) !important;
        box-shadow: none !important;
        border-radius: 8px !important;
    }

    /* Textos */
    h1, h2, h3, h4, label {
        color: #000 !important;
    }

    .muted {
        color: var(--print-muted) !important;
    }

    .hist-table .td-sub {
        color: #000 !important;
    }

    body::after {
        content: "FSI.001 Rev.2 Mayo 20, 2022";
        position: fixed;
        right: 10mm;
        bottom: 8mm;
        font-size: 10px;
        color: #000;
        letter-spacing: .2px;
    }

    /* Inputs planos */
    :root {
        --radius: 0 !important;
    }

    input, select, textarea {
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        outline: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--print-line) !important;
        padding: 1px 0 !important;
    }

    /* Checkbox / radio visibles */
    input[type="checkbox"], input[type="radio"] {
        -webkit-appearance: auto !important;
        appearance: auto !important;
        display: inline-block !important;
        width: 12px !important;
        height: 12px !important;
        margin: 0 4px 0 0 !important;
        border: 1px solid #000 !important;
        background: #fff !important;
        transform: none !important;
    }

    .print-hide {
        display: none !important;
    }

    #row_regreso_modulo {
        display: none !important;
    }

    /* Números sin flechas */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0 !important;
    }

    input[type="number"] {
        -moz-appearance: textfield !important;
    }

    /* Chips / opciones */
    .opt, .chip {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid var(--print-line) !important;
    }

    #progressGroup .chip {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
        padding: 2px 8px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    #progressGroup .chip[aria-pressed="true"] {
        background: #000 !important;
        color: #fff !important;
        border: 2px solid #000 !important;
        outline: 1px solid #000 !important;
        outline-offset: 2px !important;
        position: relative !important;
    }

    #progressGroup .chip[aria-pressed="true"]::after {
        content: " ✓";
        font-weight: 900;
        margin-left: 6px;
    }

    /* Tablas */
    .tbl {
        width: 100%;
        table-layout: fixed;
        background: #fff !important;
        border-color: var(--print-line) !important;
    }

    .tbl thead th {
        background: var(--print-gray-bg) !important;
        color: #000 !important;
        font-weight: 700 !important;
        border-top: 1px solid var(--print-line) !important;
    }

    .tbl th, .tbl td {
        border-top: 1px solid var(--print-line) !important;
        color: #000 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        padding: 4px 4px !important;
    }

    /* Evitar cortes feos (permitiendo partir donde haga falta) */
    .sec, .tbl, .sig-box, .print-header {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .sec {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Cabecera impresión */
    .print-header {
        display: block;
        margin-bottom: 3mm;
    }

    .ph-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    .ph-brand {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .ph-logo {
        width: 28px;
        height: 28px;
        border: 2px solid var(--print-yellow);
        border-radius: 8px;
        display: grid;
        place-items: center;
        font-weight: 800;
        color: #000;
    }

    .ph-title .ph-suptitle {
        font-size: 10px;
        letter-spacing: .3px;
        color: var(--print-muted);
    }

    .ph-title .ph-h1 {
        font-size: 20px;
        font-weight: 800;
        letter-spacing: .4px;
    }

    /* Grids compactos */
    .sec {
        padding: 7px !important;
        margin-bottom: 7px !important;
    }

    .grid-auto {
        display: grid;
        grid-template-columns:repeat(3, 1fr) !important;
        gap: 5px !important;
    }

    .grid-2 {
        display: grid;
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 5px !important;
    }

    .sec-grid-2 {
        display: grid !important;
        grid-template-columns:repeat(2, 1fr) !important;
        gap: 4mm !important;
        margin-bottom: 6px !important;
    }

    .sec-grid-2 .sec {
        margin-bottom: 0 !important;
    }

    /* Firma pantalla sin borde al imprimir */
    .sig-preview img {
        border: 0 !important;
        background: transparent !important;
    }

    /* Firmas (bloque único) */
    .print-signature-block {
        display: block;
        margin-top: 0;
        margin-bottom: 3mm;
        padding-top: 0;
        border-top: 0 !important;
    }

    .ps-columns {
        display: grid;
        grid-template-columns:1fr 1fr 1fr;
        gap: 14mm;
    }

    /* Orden en impresión: Firma, Autorizado, Departamento (default) */
    .ps-col {
        display: flex !important;
        flex-direction: column !important;
        min-height: 28mm;
    }

    .ps-col::before {
        content: "";
        flex: 1 1 auto;
    }

    .print-signature-block .ps-value {
        text-align: center !important;
        color: #000 !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        margin: 0 0 1.6mm 0 !important;
        border: 0 !important;
        text-decoration: none !important;
    }

    .ps-line {
        width: 100% !important;
        height: 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--print-line) !important;
    }

    .ps-caption {
        margin-top: 2mm !important;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: .5px;
        color: #000 !important;
        text-align: center !important;
        font-size: 11.5px !important;
        border: 0 !important;
    }

    .print-signature-block .ps-value--firma img {
        display: inline-block;
        max-height: 20mm !important;
        max-width: 100% !important;
        object-fit: contain !important;
        border: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    /* Compactar secciones 2–5 */
    #sec_tipo_serv h3, #sec_tipo_mesa h3, #sec_fases h3, #sec_desc h3 {
        margin: 2px 0 4px !important;
        font-size: 12.5px !important;
    }

    #sec_desc h4 {
        margin: 2px 0 2px !important;
        font-size: 11px !important;
    }

    #sec_desc > div, #sec_desc_rest > div {
        margin-top: 4px !important;
    }

    #sec_tipo_serv .row, #sec_tipo_mesa .row, #sec_fases .row, #sec_desc .row, #sec_desc_rest .row {
        gap: 4px !important;
    }

    /* Opciones como grilla compacta */
    #sec_tipo_serv .opts, #sec_tipo_mesa .opts, #sec_fases .opts, #sec_desc .opts, #sec_desc_rest .opts {
        display: grid !important;
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
        gap: 4px 6px !important;
        align-items: center;
    }

    /* Satisfacción: más columnas */
    #sec_desc .opts[role="radiogroup"], #sec_desc_rest .opts[role="radiogroup"] {
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    }

    /* Opts sin caja */
    #sec_tipo_serv .opt, #sec_tipo_mesa .opt, #sec_fases .opt, #sec_desc .opt, #sec_desc_rest .opt {
        background: #fff !important;
        border: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
    }

    /* Checks/radios compactos dentro de opciones */
    #sec_tipo_serv .opt input[type="checkbox"],
    #sec_tipo_mesa .opt input[type="checkbox"],
    #sec_fases .opt input[type="checkbox"],
    #sec_desc .opt input[type="checkbox"],
    #sec_desc_rest .opt input[type="checkbox"],
    #sec_tipo_serv .opt input[type="radio"],
    #sec_tipo_mesa .opt input[type="radio"],
    #sec_fases .opt input[type="radio"],
    #sec_desc .opt input[type="radio"],
    #sec_desc_rest .opt input[type="radio"] {
        margin: 0 4px 0 0 !important;
        transform: none !important;
        accent-color: #111 !important;
    }

    /* Campos “Otro” reducidos */
    #ts_otro_txt, #tm_otro_txt, #fa_otro_txt, #sr_otro_txt {
        width: 140px !important;
        padding: 1px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--print-line) !important;
    }

    /* Tablas más compactas dentro de 5) */
    #sec_desc .tbl th, #sec_desc .tbl td, #sec_desc_rest .tbl th, #sec_desc_rest .tbl td {
        padding: 3.5px 3.5px !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    /* Contenedores internos de 5) */
    #sec_desc .sec, #sec_desc .sig-box, #sec_desc_rest .sec, #sec_desc_rest .sig-box {
        padding: 6px !important;
    }

    /* A.2 y Satisfacción: cápsulas cortas */
    #sec_desc [aria-label="Servicio realizado (pueden aplicar varios)"],
    #sec_desc_rest [aria-label="Servicio realizado (pueden aplicar varios)"],
    #sec_desc [aria-label="Satisfacción"],
    #sec_desc_rest [aria-label="Satisfacción"] {
        gap: 4px 6px !important;
    }

    #progressGroup .chip {
        padding: 2px 6px !important;
        border: 1px solid var(--print-line) !important;
        background: #fff !important;
        color: #000 !important;
    }

    /* Ocultar pies/acciones y última columna Acciones en tablas dinámicas */
    .tbl tfoot, [data-add-row], [data-del-row], .row-actions {
        display: none !important;
    }

    #tbl_acciones thead th:last-child, #tbl_recursos thead th:last-child, #tbl_entrega thead th:last-child,
    #tbl_acciones tbody td:last-child, #tbl_recursos tbody td:last-child, #tbl_entrega tbody td:last-child {
        display: none !important;
    }

    #tbl_acciones, #tbl_recursos, #tbl_entrega {
        table-layout: auto !important;
    }

    /* Contenedores sin márgenes */
    .wrap {
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    form#srvForm {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    form#srvForm.card {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Cabecera: imagen derecha fija */
    .print-header .ph-right {
        flex: 0 0 42mm;
        height: 16mm;
        border: 0;
        border-radius: 0;
        background: #fff;
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .print-header .ph-right img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    /* --- Evitar empalme con “Progreso” (soporta selector frágil + clase sugerida) --- */
    #sec_desc .row[style*="align-items:flex-start"],
    #sec_desc_rest .row[style*="align-items:flex-start"],
    #sec_desc_rest .row[style*="align-items:flex-start"],
    .row-cterminado {
        margin-bottom: 2mm !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #sec_desc .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child,
    .row-cterminado > div:last-child {
        padding-bottom: 2mm !important;
        margin-bottom: 1mm !important;
    }

    #progressGroup {
        margin-top: 1.5mm !important;
        margin-bottom: 3mm !important;
    }

    #sec_desc .row[style*="align-items:flex-start"] > div:last-child > label,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child > label,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child > label,
    .row-cterminado > div:last-child > label {
        display: inline-block !important;
        background: #fff !important;
        padding: 0 .8mm !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* A.1 — anchos y textareas impresas */
    #tbl_acciones {
        table-layout: fixed !important;
    }

    #tbl_acciones th, #tbl_acciones td {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        padding: 4px 4px !important;
    }

    /* 60/40 estable + mínimo físico para 2ª col */
    #tbl_acciones thead th:nth-child(1), #tbl_acciones tbody td:nth-child(1) {
        width: 60% !important;
    }

    #tbl_acciones thead th:nth-child(2), #tbl_acciones tbody td:nth-child(2) {
        width: 40% !important;
        min-width: 70mm !important;
    }

    #tbl_acciones textarea.td-textarea {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        border: 0 !important;
        border-bottom: 1px solid var(--print-line) !important;
        border-radius: 0 !important;
        background: #fff !important;
        color: #000 !important;
        padding: 1px 0 !important;
        line-height: 1.3 !important;
        overflow: visible !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }

    /* A.1 espejos (si los usas) */
    #tbl_acciones textarea.td-textarea {
        display: none !important;
    }

    #tbl_acciones .td-print {
        display: block !important;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
        border: 0 !important;
        border-bottom: 1px solid var(--print-line) !important;
        padding: 1px 0 !important;
        min-height: 12mm;
        color: #000 !important;
        background: #fff !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* D.2 — “Causa” a ancho completo + título */
    #sec_desc .opts[role="radiogroup"] .cause-title,
    #sec_desc_rest .opts[role="radiogroup"] .cause-title,
    #sec_desc .opts[role="radiogroup"] #satisfaccion_causa,
    #sec_desc_rest .opts[role="radiogroup"] #satisfaccion_causa {
        grid-column: 1 / -1 !important;
    }

    #sec_desc .opts[role="radiogroup"] .cause-title,
    #sec_desc_rest .opts[role="radiogroup"] .cause-title {
        font-weight: 700 !important;
        margin-top: 2mm !important;
        color: #000 !important;
    }

    #sec_desc .opts[role="radiogroup"] #satisfaccion_causa,
    #sec_desc_rest .opts[role="radiogroup"] #satisfaccion_causa {
        width: 100% !important;
        border: 0 !important;
        border-bottom: 1px solid var(--print-line) !important;
        padding: 1px 0 !important;
        color: #000 !important;
        background: #fff !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* Mostrar bloque de firmas en print */
    .print-signature-block {
        display: block;
    }
}

/* === Forzar C.2 + Progreso en 2 columnas al imprimir === */
@media print {
    /* El row que tiene align-items:flex-start (C.2) */
    #sec_desc .row[style*="align-items:flex-start"],
    .row-cterminado {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* izquierda: C.2  |  derecha: Progreso */
        column-gap: 4mm !important;
        align-items: flex-start !important;
        flex-wrap: unset !important; /* por si trae la clase .row con flex-wrap */
        margin-bottom: 2mm !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Quita el margin-left:auto de la 2ª columna */
    #sec_desc .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child,
    .row-cterminado > div:last-child {
        margin-left: 0 !important;
    }

    /* Ajuste de los chips */
    #progressGroup {
        margin-top: 0 !important;
        margin-bottom: 3mm !important;
        justify-content: flex-start !important;
    }

    /* Segundo bloque (el de Progreso) alineado a la derecha de la hoja */
    #sec_desc .row[style*="align-items:flex-start"] > div:last-child,
    .row-cterminado > div:last-child {
        margin-left: 0 !important;
        justify-self: end !important;
        text-align: right !important;
    }

    /* Chips dentro del bloque también se van a la derecha */
    #progressGroup {
        justify-content: flex-end !important;
    }


}


/* ===== C.2 Progreso (PRINT): label alineado con los chips, sin fondo ===== */
@media print {
    /* Bloque de la derecha: servicio terminado / progreso */
    #sec_desc .row[style*="align-items:flex-start"] > div:last-child,
    .row-cterminado > div:last-child {
        margin-left: auto !important;
        display: flex !important;
        align-items: center !important; /* label centrado vertical con los chips */
        justify-content: flex-end !important; /* todo el bloque pegado a la derecha   */
        gap: 3mm !important; /* espacio entre "Progreso" y los chips */
        text-align: right !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Label "Progreso" sin fondo ni padding, en línea con los chips */
    #sec_desc .row[style*="align-items:flex-start"] > div:last-child > label,
    .row-cterminado > div:last-child > label {
        display: inline-block !important;
        background: transparent !important; /* 👈 sin recuadro blanco */
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
        z-index: auto !important;
    }

    /* Chips pegados a la derecha dentro del bloque */
    #progressGroup {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        justify-content: flex-end !important;
    }
}

/* =========================================================
   FIN PRINT
   ========================================================= */

/* ------- Pantalla: mejoras de tabla A.1 y acciones ------- */
#tbl_acciones td {
    word-break: break-word;
    overflow-wrap: anywhere;
}

#tbl_acciones thead th:last-child, #tbl_acciones tbody td:last-child {
    width: 160px;
}

@media (max-width: 1024px) {
    #tbl_acciones thead th:last-child, #tbl_acciones tbody td:last-child {
        width: 140px;
    }
}

@media (max-width: 900px) {
    #tbl_acciones thead th:last-child, #tbl_acciones tbody td:last-child {
        width: auto;
        min-width: 130px;
    }
}

#tbl_acciones .row-actions .link {
    padding: 6px 10px;
}

/* D.2 Causa (pantalla) */
#sec_desc .opts[role="radiogroup"] #satisfaccion_causa,
#sec_desc_rest .opts[role="radiogroup"] #satisfaccion_causa {
    flex: 1 1 100%;
}

/* Preferencia: reducir animaciones */
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop {
        transition: none;
    }
}

/* iOS/WebKit afinado */
@supports (-webkit-touch-callout: none) {
    input[type="date"], input[type="time"] {
        font-size: 16px;
        height: 36px;
        padding: 6px 10px;
        line-height: 1.2;
    }

    input[type="date"]::-webkit-calendar-picker-indicator,
    input[type="time"]::-webkit-calendar-picker-indicator {
        padding: 0 6px;
    }
}

/* Sec. 1 grid 3x3 en desktop */
#sec_info .grid-auto {
    display: grid;
    gap: 10px;
}

@media (max-width: 680px) {
    #sec_info .grid-auto {
        grid-template-columns:1fr;
    }
}

@media (min-width: 681px) and (max-width: 1024px) {
    #sec_info .grid-auto {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) {
    #sec_info .grid-auto {
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

/* ===== A.1 textarea pantalla ===== */
#tbl_acciones textarea.td-textarea {
    width: 100%;
    min-height: 64px;
    resize: vertical;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
}

#tbl_acciones textarea.td-textarea--sm {
    min-height: 64px;
}

/* A.1 — anchos en pantalla */
#tbl_acciones thead th:nth-child(1), #tbl_acciones tbody td:nth-child(1) {
    width: 58%;
}

#tbl_acciones thead th:nth-child(2), #tbl_acciones tbody td:nth-child(2) {
    width: 42%;
}

/* Icono date/time visible en dark */
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"] {
    color-scheme: dark;
}

html[data-theme="light"] input[type="date"],
html[data-theme="light"] input[type="time"] {
    color-scheme: light;
}

html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .hist-filter-date::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.2) opacity(.95) !important;
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] .hist-filter-date::-webkit-calendar-picker-indicator {
    filter: invert(0) brightness(1) opacity(.95) !important;
}

/* Espejos de A.1: ocultos en pantalla; visibles en print (arriba) */
#tbl_acciones .td-print {
    display: none;
}

/* ===== iOS Print fix: checkboxes/radios sin relleno negro ===== */
@media print {
    /* Objetivo: Safari/WebKit móvil */
    @supports (-webkit-touch-callout: none) {
        /* Desactiva el control nativo y dibuja uno plano sin relleno */
        input[type="checkbox"],
        input[type="radio"] {
            -webkit-appearance: none !important;
            appearance: none !important;
            width: 12px !important;
            height: 12px !important;
            margin: 0 4px 0 0 !important;
            border: 1px solid #000 !important;
            border-radius: 2px !important; /* radios se ajustan abajo */
            background: transparent !important; /* ← evita relleno negro */
            box-shadow: none !important;
            outline: none !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
            position: relative;
        }

        /* Radios con forma circular */
        input[type="radio"] {
            border-radius: 50% !important;
        }

        /* Checkbox marcado: dibuja el ✓ */
        input[type="checkbox"]:checked::after {
            content: "✓";
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-weight: 900;
            font-size: 12px;
            line-height: 1;
            color: #000;
        }

        /* Radio marcado: dibuja el punto */
        input[type="radio"]:checked::after {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: 50%;
            background: #000;
        }

        /* Hazlos un pelín más grandes si te gusta más para papel */
        /* input[type="checkbox"], input[type="radio"]{ width: 14px; height: 14px; } */
    }

    /* Fallback general (por si no aplica @supports):
       fuerza fondo claro cuando están desmarcados */
    input[type="checkbox"]:not(:checked),
    input[type="radio"]:not(:checked) {
        background: transparent !important;
    }

    /* Ocultar pestañas e historial en impresión */
    .tab-bar,
    #tab-historial {
        display: none !important;
    }

}

/* ===== Tabs internos (Captura / Historial) ===== */
.tab-bar {
    display: flex;
    gap: 4px;
    padding: 0 16px 8px;
    border-bottom: 1px solid var(--line);
    margin-top: 4px;
}

.tab-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
}

.tab-btn.is-active {
    color: var(--text);
    border-color: var(--acc);
    background: linear-gradient(to bottom, #1b222f, transparent);
}

.tab-panel[hidden] {
    display: none !important;
}

/* ===== Historial dentro del reporte ===== */
.hist-body {
    padding: 16px;
}

.hist-toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hist-toolbar-left {
    flex: 1;
    display: flex;
    flex-direction: column; /* buscador arriba, filtros abajo */
    gap: 6px;
}

.hist-toolbar-right {
    align-self: flex-end;
}

/* Buscador */
.hist-search {
    width: 100%;
    max-width: none;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    outline: none;
    font-size: 13px;
}

/* Texto de estado ("Sin resultados", etc.) */
.hist-status {
    font-size: 12px;
    margin-bottom: 6px;
}

/* Filtros en grilla ordenada: Estado, Satisfacción, Desde, Hasta */
.hist-filters {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 columnas */
    gap: 6px 10px;
    align-items: flex-end;
}

.hist-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hist-filter-label {
    font-size: 11px;
    color: var(--muted);
}

.hist-filter-select,
.hist-filter-date {
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: var(--panel-2);
    color: var(--text);
    font-size: 12px;
    outline: none;
}

.hist-filter-date {
    padding-right: 32px;
}

.hist-filter-date::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

html[data-theme="dark"] .hist-filter-date {
    background: var(--panel-2) url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M8 2v4M16 2v4M3 10h18'/></svg>") no-repeat right 10px center / 16px 16px;
}

html[data-theme="light"] .hist-filter-date {
    background: var(--panel-2) url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M8 2v4M16 2v4M3 10h18'/></svg>") no-repeat right 10px center / 16px 16px;
}

#tab-captura input[type="date"] {
    padding-right: 32px;
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
}

#tab-captura input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

html[data-theme="dark"] #tab-captura input[type="date"] {
    background: var(--panel-2) url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M8 2v4M16 2v4M3 10h18'/></svg>") no-repeat right 10px center / 16px 16px;
}

html[data-theme="light"] #tab-captura input[type="date"] {
    background: var(--panel-2) url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M8 2v4M16 2v4M3 10h18'/></svg>") no-repeat right 10px center / 16px 16px;
}

.hist-filter-select:focus-visible,
.hist-filter-date:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--acc) 50%, #fff);
    outline-offset: 2px;
}

/* Tabla de historial */
.hist-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Tabla de historial (más limpia y espaciosa) ===== */
.hist-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 13px;
    min-width: 780px; /* evita que todo se aplaste demasiado */
}

.hist-table thead th {
    background: #151a22;
    color: var(--muted);
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    font-weight: 600;
}

.hist-table tbody td {
    padding: 6px 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    vertical-align: middle;
}

.hist-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.hist-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* Celda vacía / mensajes */
.hist-table td.empty {
    padding: 14px 10px;
    font-size: 13px;
}

/* Cliente / Planta, Ciudad / Estado en dos líneas legibles */
.hist-table .td-main {
    font-weight: 600;
    display: block;
}

.hist-table .td-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

/* Folio (col 1) más ancho */
.hist-table th:nth-child(1),
.hist-table td:nth-child(1) {
    width: 160px;
    white-space: nowrap;
}

/* % prog. alineado a la derecha */
.hist-table td:nth-child(7) {
    text-align: right;
    white-space: nowrap;
}

.hist-table td:nth-child(8) {
    white-space: nowrap;
}

/* Columna PDF centrada */
.hist-table td:last-child {
    text-align: center;
}

/* Tecnicos (col 6) mas compacto */
.hist-table th:nth-child(6),
.hist-table td:nth-child(6) {
    width: 160px;
}

.hist-table .btn.danger {
    background: #1f1a1a;
    border-color: #5b1b1b;
    color: #fca5a5;
}

.hist-table .btn.danger:hover {
    border-color: #dc2626;
    color: #fecaca;
}

.hist-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 6px;
}

.hist-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hist-page-meta {
    font-size: 12px;
    color: var(--muted);
}

/* Botón pequeño reutilizable */
.btn.sm {
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 8px;
}

.view-only-only {
    display: none;
}

body.view-only .view-only-only,
body.debug-print .view-only-only {
    display: inline-flex;
}
body.view-only #firmaLater {
    display: none;
}
body.view-only .firma-later-label {
    display: none;
}
body.view-only #tbl_acciones thead th:last-child,
body.view-only #tbl_acciones tbody td.row-actions,
body.view-only #tbl_acciones tfoot {
    display: none;
}
body.view-only #tbl_entrega thead th:last-child,
body.view-only #tbl_entrega tbody td.row-actions,
body.view-only #tbl_entrega tfoot {
    display: none;
}

body.view-only .actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
body.view-only #btnFirmaLink {
    order: 1;
    margin-right: auto;
}
body.view-only #btnGuardarPdf {
    order: 2;
    margin-left: auto;
}

/* ===== Responsive tabs / historial ===== */
@media (max-width: 900px) {
    .hist-body {
        padding: 12px;
    }

    .tab-bar {
        padding: 0 12px 8px;
    }

    .hist-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas en tablets */
    }

    .hist-table {
        font-size: 12px;
        min-width: 640px;
    }

    .hist-table thead th,
    .hist-table tbody td {
        padding: 6px 8px;
    }

    .hist-table .td-main {
        font-size: 12.5px;
    }

    .hist-table .td-sub {
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .hist-filters {
        grid-template-columns: 1fr; /* 1 columna en móvil */
    }
}

/* ===== Modo sólo lectura desde Historial ===== */
body.view-only:not(.view-report):not(.allow-tabs) .tab-bar {
    display: none !important; /* oculta las pestañas CAPTURA / HISTORIAL */
}

body.view-only:not(.view-report):not(.allow-tabs) #tab-captura {
    display: none !important;
}

body.view-only:not(.view-report):not(.allow-tabs) #tab-historial {
    display: block !important;
}

/* ===== Vista sólo lectura (view=1): sin pestañas ===== */
body.view-report .tab-bar {
    display: none !important;
}

body.view-report #tab-captura {
    display: block !important;
}

body.view-report #tab-historial {
    display: none !important;
}

body.view-only .actions .btn.primary {
    display: none !important; /* oculta "Guardar reporte" */
}

body.view-only .hist-table .th-delete,
body.view-only .hist-table .td-delete {
    display: none !important;
}

/* Oculta controles de edición dinámica */
body.view-only [data-add-row],
body.view-only [data-del-row],
body.view-only #toggle_recursos,
body.view-only:not(.signature-repair) #openSign,
body.view-only:not(.signature-repair) #sigModal,
body.view-only:not(.signature-repair) #sigBackdrop {
    display: none !important;
}

/* Inputs en modo lectura (pero visibles) */
body.view-only #srvForm input,
body.view-only #srvForm textarea,
body.view-only #srvForm select {
    cursor: default;
}

/* Checkboxes / radios en modo lectura: que se vean bien si están marcados */
body.view-only input[type="checkbox"][data-view-readonly="1"],
body.view-only input[type="radio"][data-view-readonly="1"] {
    opacity: 1;
    cursor: default;
}

body.view-only #progressGroup .chip[disabled] {
    cursor: default;
    opacity: .9;
}

/* =========================================================
MEJORAS RESPONSIVE (pantalla)
========================================================= */

/* --- Ajustes generales en pantallas pequeñas --- */
@media (max-width: 900px) {
    .wrap {
        max-width: 100%;
        margin: 12px auto;
        padding: 8px;
    }

    .card {
        border-radius: 12px;
    }

    .head {
        gap: 10px;
        padding: 12px;
    }

    .body {
        padding: 12px;
    }

    .sec {
        padding: 12px;
        margin-bottom: 10px;
    }

    .card h1 {
        font-size: 18px;
    }

    /* Botones de acción: uno debajo de otro en móvil/tablet */
    .actions {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .actions .btn {
        flex: 1 1 100%;
        max-width: 260px;
        text-align: center;
    }
}

/* --- Mobile más compacto --- */
@media (max-width: 600px) {
    .head {
        align-items: flex-start;
    }

    .logo {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .head .muted {
        font-size: 12px;
    }

    label {
        font-size: 13px;
    }

    input[type="text"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 13px;
        padding: 8px 10px;
    }

    .sec h3 {
        font-size: 14px;
    }

    #sec_desc h4 {
        font-size: 13px;
    }
}

/* --- Grids en una sola columna en pantallas estrechas --- */
@media (max-width: 768px) {
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* firma: formulario en columna */
    #sec_firma .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* --- Historial y tabs más fluidos en móvil --- */
@media (max-width: 720px) {
    .tab-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 12px 10px;
    }

    .tab-btn {
        flex: 1 1 140px;
        justify-content: center;
        text-align: center;
    }

    .hist-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hist-toolbar-left,
    .hist-toolbar-right {
        width: 100%;
    }

    .hist-toolbar-right .btn.sm {
        width: 100%;
    }

    .hist-search {
        width: 100%;
    }

    .hist-filters {
        grid-template-columns: 1fr 1fr;
    }

    .hist-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 520px) {
    .hist-filters {
        grid-template-columns: 1fr;
    }

    .actions .btn {
        width: 100%;
        max-width: none;
    }
}

/* --- C.2 Servicio terminado + Progreso: mejor en móvil --- */
@media (max-width: 768px) {
    /* Ese row tiene inline style align-items:flex-start */
    #sec_desc .row[style*="align-items:flex-start"],
    #sec_desc_rest .row[style*="align-items:flex-start"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #sec_desc .row[style*="align-items:flex-start"] > div:last-child,
    #sec_desc_rest .row[style*="align-items:flex-start"] > div:last-child {
        margin-left: 0 !important; /* anula el margin-left:auto inline */
        width: 100%;
    }

    /* Chips de progreso alineados a la izquierda y con wrap cómodo */
    #progressGroup {
        justify-content: flex-start;
    }

    #progressGroup .chip {
        flex: 0 0 auto;
    }
}

/* --- Opciones (chips/checkbox) respirando mejor en móvil --- */
@media (max-width: 600px) {
    .opts {
        gap: 6px;
    }

    .opt {
        padding: 6px 8px;
        font-size: 12px;
    }

    .opt input[type="text"] {
        width: 100%;
    }
}

/* =========================================================
   Responsive: Historial de reportes
   ========================================================= */
@media (max-width: 900px) {
    .hist-body {
        padding: 12px;
    }

    .tab-bar {
        padding: 0 12px 8px;
    }

    /* Toolbar: filtros debajo del buscador en columna */
    .hist-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .hist-toolbar-left {
        width: 100%;
    }

    .hist-toolbar-right {
        align-self: flex-end;
    }

    /* Botón Actualizar a la derecha pero sin romper layout */
    .hist-toolbar-right .btn.sm {
        white-space: nowrap;
    }
}

/* Filtros ya se ponen en 2 columnas a <900px (ya lo tienes),
   aquí afinamos el aspecto general para móvil estrecho */
@media (max-width: 600px) {
    .hist-status {
        font-size: 11px;
    }

    .hist-table-wrap {
        margin-top: 6px;
        border-radius: 10px;
        border: 1px solid var(--line);
    }

    .hist-table {
        font-size: 12px;
        min-width: 600px;
    }

    .hist-table thead th,
    .hist-table tbody td {
        padding: 6px 8px;
    }

    .hist-table .td-main {
        font-size: 12.5px;
    }

    .hist-table .td-sub {
        font-size: 11px;
    }
}

/* ===== Responsive extra (móvil) ===== */
@media (max-width: 720px) {
    html, body {
        overflow-x: hidden;
    }

    .wrap {
        padding: 6px;
    }

    .body {
        padding: 10px;
    }

    .sec-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .assign-inline,
    .assign-picker {
        width: 100%;
    }

    .assign-picker {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
    }

    .assign-picker input {
        flex: 1 1 auto;
        min-width: 0;
    }

    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions .btn {
        width: 100%;
        max-width: none;
    }

    .tbl {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #tbl_acciones,
    #tbl_recursos,
    #tbl_lib_acts {
        min-width: 520px;
    }
}

/* ===== Safari/iOS afinado ===== */
@supports (-webkit-touch-callout: none) {
    html {
        -webkit-text-size-adjust: 100%;
    }

    button, input, select, textarea {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    input[type="text"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px;
    }
}