/* La Mesa de cotización (D-28): su hoja de estilos, fuera de mesa.html desde M-4. */
  /* La escala de la marca es la del chat (#203F2D es el 700); ver index.html.
     La Mesa es para quien cotiza todo el día: más densa, dos columnas, el
     expediente a la izquierda y las tarjetas a la derecha. */
  :root {
    --marca-900: #112118; --marca-800: #193224; --marca-700: #203F2D; --marca-600: #2C573E;
    --marca-500: #3A7252; --marca-400: #4D986C; --marca-300: #70B68E; --marca-200: #A7D2B9;
    --marca-100: #D6EADE; --marca-050: #EEF6F1;
    --fondo: #F7F9F7; --panel: #fff; --borde: #E1E8E3; --texto: #16201A; --tenue: #5F6F65;
    --acento: var(--marca-700); --acento-texto: #fff;
    --suave: var(--marca-050); --suave-texto: var(--marca-900);
    --alerta: #A3341F; --alerta-fondo: #FBEAE6;
    --sube: #9A5B0B; --sube-fondo: #FCF1DF;
    --baja: var(--marca-600);
    --leido: #FCF4E3; --leido-borde: #EBCB8B;
  }
  html.oscuro {
    color-scheme: dark;
    --fondo: #0E1511; --panel: #16201A; --borde: #26332B; --texto: #E6EDE8; --tenue: #8FA396;
    --acento: var(--marca-400); --acento-texto: #08110B;
    --suave: #16301F; --suave-texto: var(--marca-100);
    --alerta: #FF9B84; --alerta-fondo: #3A1F1A;
    --sube: #F2C77A; --sube-fondo: #33290F;
    --baja: var(--marca-300);
    --leido: #2A2412; --leido-borde: #6B5520;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  body {
    margin: 0; background: var(--fondo); color: var(--texto);
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    height: 100dvh; display: flex; flex-direction: column;
  }
  button {
    background: var(--acento); color: var(--acento-texto); border: 0; border-radius: 8px;
    padding: 0 14px; height: 34px; font: inherit; font-weight: 600; cursor: pointer;
  }
  button:disabled { opacity: .45; cursor: default; }
  button.secundario { background: transparent; color: var(--acento); border: 1px solid var(--borde); }
  button.secundario:hover:not(:disabled) { border-color: var(--acento); }
  :focus-visible { outline: 2px solid var(--marca-400); outline-offset: 2px; }
  input, select {
    font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--borde);
    border-radius: 8px; height: 34px; padding: 0 9px; width: 100%; min-width: 0;
  }
  .num { font-variant-numeric: tabular-nums; }

  /* ---------- Encabezado ---------- */
  #aviso-qa { background: #F2C77A; color: #3B2A06; text-align: center; font-size: 13px; font-weight: 650; padding: 6px 12px; }
  header {
    display: flex; align-items: center; gap: 10px; padding: 10px 16px;
    border-bottom: 1px solid var(--borde);
    padding-top: max(10px, env(safe-area-inset-top));
  }
  header h1 { font-size: 16px; margin: 0; font-weight: 700; white-space: nowrap; }
  #titulo-exp { color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .espacio { flex: 1; }
  .boton-cabeza {
    background: transparent; color: var(--tenue); border: 1px solid var(--borde); height: 30px;
    padding: 0 10px; font-size: 13px; font-weight: 500; display: inline-grid; place-items: center;
    text-decoration: none; border-radius: 8px; flex: 0 0 auto;
  }
  .boton-cabeza:hover { color: var(--texto); border-color: var(--tenue); }
  #tema { width: 32px; padding: 0; font-size: 17px; }

  /* ---------- Columnas ---------- */
  #cuerpo { flex: 1; display: flex; min-height: 0; }

  /* La Mesa tiene dos vistas (D-59): la pestaña de Cotizaciones, para
     encontrar, y el expediente, para trabajar. Se pasa de una a otra con las
     pestañas del encabezado; cada una ocupa el ancho completo. */
  #vistas { display: flex; border: 1px solid var(--borde); border-radius: 8px; padding: 2px; gap: 2px; flex: 0 0 auto; }
  #vistas button { height: 26px; padding: 0 10px; font-size: 13px; font-weight: 600; background: transparent; color: var(--tenue); border: 0; border-radius: 6px; }
  #vistas button[aria-selected="true"] { background: var(--suave); color: var(--suave-texto); }
  body.en-lista #titulo-exp, body.en-lista #abrir-asistente { display: none; }
  body.en-lista #asistente { display: none; }

  /* ---------- Pestaña de Cotizaciones (D-59) ---------- */
  #cotizaciones { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .barra-cot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .barra-cot #nuevo, #nuevo-exp { display: inline-flex; gap: 6px; align-items: center; flex: 0 0 auto; }
  #nuevo-exp { align-self: flex-start; }
  #buscar-caja { position: relative; flex: 1 1 320px; min-width: 0; }
  #buscar-caja i { position: absolute; left: 10px; top: 9px; color: var(--tenue); font-size: 16px; pointer-events: none; }
  #buscar { padding-left: 32px; height: 38px; font-size: 15px; }
  .filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .filtros select, .filtros input { width: auto; height: 32px; font-size: 13px; }
  .filtros input[type="date"] { width: 140px; }
  #rango { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--tenue); }
  #rango[hidden] { display: none; }
  /* Quien administra elige entre los suyos y los de todos (D-41). */
  #alcance { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; padding: 2px; gap: 2px; }
  #alcance[hidden] { display: none; }
  #alcance button { height: 26px; padding: 0 12px; font-size: 13px; background: transparent; color: var(--tenue); border: 0; }
  #alcance button[aria-pressed="true"] { background: var(--suave); color: var(--suave-texto); }
  #limpiar { height: 32px; font-size: 13px; }
  /* Una fila por cotización. En pantallas anchas, columnas; en el teléfono,
     una tarjeta por renglón. */
  #lista-cot { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
  .cot-fila, .cot-cabeza {
    display: grid; align-items: center; gap: 10px; padding: 9px 14px;
    grid-template-columns: minmax(150px, 1.5fr) minmax(140px, 1.3fr) 104px 100px 120px 96px;
  }
  #lista-cot.con-vendedor .cot-fila, #lista-cot.con-vendedor .cot-cabeza {
    grid-template-columns: minmax(150px, 1.5fr) minmax(140px, 1.3fr) 104px minmax(90px, .8fr) 100px 120px 96px;
  }
  .cot-cabeza { font-size: 12px; color: var(--tenue); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borde); padding-top: 8px; padding-bottom: 8px; }
  .cot-cabeza span:nth-child(3), .cot-fila .cot-prima { text-align: right; }
  .cot-fila { position: relative; color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borde); cursor: pointer; }
  .cot-fila:last-child { border-bottom: 0; }
  .cot-fila:hover { background: color-mix(in srgb, var(--suave) 60%, transparent); }
  .cot-fila.actual { background: var(--suave); }
  .cot-fila > span { min-width: 0; }
  .cot-fila b, .cot-fila .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cot-fila b { font-weight: 650; }
  .cot-fila .sub { font-size: 12px; color: var(--tenue); }
  .cot-fila .vin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
  .cot-fila .cot-prima { font-weight: 650; font-size: 14px; padding-right: 6px; }
  .cot-fila .cuando, .cot-fila .vend { font-size: 13px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cot-fila .id-cot { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cot-nombre { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .cot-nombre b { flex: 0 1 auto; }
  .cot-fila input.nombre-exp { height: 28px; font: inherit; font-weight: 650; padding: 0 6px; }
  /* Renombrar (D-45): el lápiz aparece al pasar el cursor. */
  .renombrar {
    flex: 0 0 auto; width: 24px; height: 24px; padding: 0; font-size: 14px;
    background: transparent; border: 0; color: var(--tenue); opacity: 0;
  }
  .cot-fila:hover .renombrar, .cot-fila:focus-within .renombrar { opacity: 1; }
  @media (hover: none) { .renombrar { opacity: 1; } }
  .renombrar:hover { color: var(--texto); }
  .estado-cot { display: inline-block; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--fondo); color: var(--tenue); border: 1px solid var(--borde); white-space: nowrap; }
  .estado-cot.e-cotizada { background: var(--suave); color: var(--suave-texto); border-color: transparent; }
  .estado-cot.e-negociacion { background: var(--sube-fondo); color: var(--sube); border-color: transparent; }
  .estado-cot.e-emitida, .estado-cot.e-pagada { background: var(--acento); color: var(--acento-texto); border-color: transparent; }
  .estado-cot.e-perdida { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
  .vacio { color: var(--tenue); font-size: 13px; padding: 14px; margin: 0; }
  #mas-cot { color: var(--tenue); font-size: 13px; margin: 0; }
  @media (max-width: 760px) {
    #cotizaciones { padding: 12px; }
    .cot-cabeza { display: none; }
    .cot-fila, #lista-cot.con-vendedor .cot-fila {
      grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre prima" "auto estado" "otros otros";
      row-gap: 2px; padding: 10px 12px;
    }
    .cot-fila .nom { grid-area: nombre; } .cot-fila .cot-prima { grid-area: prima; }
    .cot-fila .au { grid-area: auto; } .cot-fila .est { grid-area: estado; text-align: right; }
    .cot-fila .otros > span { font-size: 12px; flex: 0 0 auto; }
    .cot-fila .otros > .id-cot { flex: 1 1 auto; min-width: 0; }
    .cot-fila .otros { grid-area: otros; display: flex; gap: 10px; min-width: 0; }
    .renombrar { opacity: 1; }
  }
  @media (min-width: 761px) { .cot-fila .otros { display: contents; } }

  /* ---------- Pestaña Por cobrar (D-61) ----------
     Las pólizas emitidas que deben algo, por fecha límite: en lista o por
     semana. En rojo, lo vencido y lo que vence esta semana. */
  #por-cobrar { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .segmentos { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; padding: 2px; gap: 2px; flex: 0 0 auto; }
  .segmentos[hidden] { display: none; }
  .segmentos button { height: 26px; padding: 0 12px; font-size: 13px; background: transparent; color: var(--tenue); border: 0; }
  .segmentos button[aria-pressed="true"] { background: var(--suave); color: var(--suave-texto); }
  #por-cobrar .filtros select { width: auto; height: 32px; font-size: 13px; }
  #importar-cartera, #importar-renovar { height: 32px; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
  #resumen-cobrar { margin: 0; font-size: 13px; color: var(--tenue); }
  #resumen-cobrar b { color: var(--alerta); }
  #lista-cobrar { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
  .cob-fila, .cob-cabeza {
    display: grid; align-items: center; gap: 10px; padding: 9px 14px;
    grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) 104px 64px 136px minmax(130px, 1fr);
  }
  #lista-cobrar.con-vendedor .cob-fila, #lista-cobrar.con-vendedor .cob-cabeza {
    grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) 104px 64px 136px minmax(90px, .8fr) minmax(130px, 1fr);
  }
  .cob-cabeza { font-size: 12px; color: var(--tenue); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--borde); padding-top: 8px; padding-bottom: 8px; }
  .cob-cabeza span:nth-child(3), .cob-fila .cob-prima { text-align: right; }
  .cob-fila { color: var(--texto); text-decoration: none; border-bottom: 1px solid var(--borde); cursor: pointer; }
  .cob-fila:last-child { border-bottom: 0; }
  .cob-fila:hover { background: color-mix(in srgb, var(--suave) 60%, transparent); }
  .cob-fila > span { min-width: 0; }
  .cob-fila b, .cob-fila .sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cob-fila b { font-weight: 650; }
  .cob-fila .sub { font-size: 12px; color: var(--tenue); }
  .cob-fila .au > .vin:first-child { display: block; font-size: 12.5px; font-weight: 600; }
  .cob-fila .vin, .cob-fila .poliza { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; }
  .cob-fila .cob-prima { font-weight: 650; font-size: 14px; padding-right: 6px; }
  .cob-fila .pagos, .cob-fila .vend { font-size: 13px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cob-fila .limite b { font-size: 13.5px; }
  .urgente, .cob-fila .limite.urgente b, .cob-fila .limite.urgente .sub { color: var(--alerta); }
  .pago-cob { display: inline-block; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--sube-fondo); color: var(--sube); white-space: nowrap; }
  .pago-cob.p-sin_consultar { background: var(--fondo); color: var(--tenue); border: 1px solid var(--borde); }
  .pago-cob.p-error { background: var(--alerta-fondo); color: var(--alerta); }
  @media (max-width: 760px) {
    #por-cobrar { padding: 12px; }
    .cob-cabeza { display: none; }
    .cob-fila, #lista-cobrar.con-vendedor .cob-fila {
      grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre prima" "auto limite" "otros otros";
      row-gap: 2px; padding: 10px 12px;
    }
    .cob-fila .nom { grid-area: nombre; } .cob-fila .cob-prima { grid-area: prima; }
    .cob-fila .au { grid-area: auto; } .cob-fila .limite { grid-area: limite; text-align: right; }
    .cob-fila .otros { grid-area: otros; display: flex; gap: 10px; align-items: center; min-width: 0; flex-wrap: wrap; }
    .cob-fila .otros > span { font-size: 12px; }
  }
  @media (min-width: 761px) { .cob-fila .otros { display: contents; } }
  /* El calendario: una fila de siete días por semana, de lunes a domingo. */
  #calendario-cobrar { display: grid; gap: 14px; }
  #calendario-cobrar[hidden] { display: none; }
  .semana-cob { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
  .semana-cob h3 { margin: 0; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--borde); display: flex; gap: 8px; align-items: baseline; }
  .semana-cob h3 span { color: var(--tenue); font-weight: 500; }
  .dias-cob { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dia-cob { min-height: 84px; padding: 6px; border-right: 1px solid var(--borde); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .dia-cob:last-child { border-right: 0; }
  .dia-cob .num-dia { font-size: 12px; color: var(--tenue); font-weight: 600; }
  .dia-cob.hoy { background: var(--suave); }
  .dia-cob.hoy .num-dia { color: var(--suave-texto); }
  .ficha-cob {
    display: block; text-align: left; width: 100%; height: auto; padding: 4px 6px; border-radius: 6px; font-size: 12px; font-weight: 600;
    background: var(--sube-fondo); color: var(--sube); border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ficha-cob small { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
  .ficha-cob.urgente { background: var(--alerta-fondo); color: var(--alerta); }
  .vencidas-cob { padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 6px; }
  .vencidas-cob .ficha-cob { width: auto; max-width: 240px; }
  @media (max-width: 760px) {
    .dias-cob { grid-template-columns: 1fr; }
    .dia-cob { min-height: 0; border-right: 0; border-bottom: 1px solid var(--borde); flex-direction: row; flex-wrap: wrap; align-items: center; }
    .dia-cob:last-child { border-bottom: 0; }
    .dia-cob.libre { display: none; }
    .dia-cob .num-dia { flex: 0 0 64px; }
    .dia-cob .ficha-cob { width: auto; max-width: calc(100% - 72px); }
  }

  /* El detalle de una póliza importada y la importación (D-61). */
  dialog#poliza-cob, dialog#cartera, dialog#renovacion {
    border: 1px solid var(--borde); border-radius: 14px; padding: 0; background: var(--panel); color: var(--texto);
    width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  }
  dialog#cartera { width: min(980px, calc(100vw - 32px)); }
  dialog#poliza-cob::backdrop, dialog#cartera::backdrop, dialog#renovacion::backdrop { background: rgba(0,0,0,.4); }
  #poliza-cob .vista, #cartera .vista, #renovacion .vista { padding: 18px; display: grid; gap: 14px; }
  #poliza-cob h2, #cartera h2, #renovacion h2 { margin: 0; }
  #renovacion .cabeza-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #renovacion .cerrar { background: transparent; color: var(--tenue); width: 32px; padding: 0; font-size: 18px; }
  #renovacion .base { margin: 0; color: var(--tenue); font-size: 13px; }
  #renovacion .error { margin: 0; color: var(--alerta); font-weight: 550; }
  #renovacion .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  #form-no-renovada { display: grid; gap: 8px; }
  #form-no-renovada label { display: grid; gap: 4px; font-size: 13px; color: var(--tenue); }
  #cartera h3 { margin: 0; font-size: 14px; }
  #poliza-cob .cabeza-dialogo, #cartera .cabeza-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #poliza-cob .cerrar, #cartera .cerrar { background: transparent; color: var(--tenue); width: 32px; padding: 0; font-size: 18px; }
  #poliza-cob .base, #cartera .base { margin: 0; color: var(--tenue); font-size: 13px; }
  #cartera .error { margin: 0; color: var(--alerta); font-weight: 550; }
  .datos-cob { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13.5px; }
  .datos-cob dt { color: var(--tenue); }
  .datos-cob dd { margin: 0; overflow-wrap: anywhere; }
  #cartera .acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  #conteo-cartera { display: flex; flex-wrap: wrap; gap: 6px; }
  #conteo-cartera span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); }
  .tabla-reporte { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .tabla-reporte th { text-align: left; font-weight: 600; color: var(--tenue); font-size: 12px; padding: 0 8px 6px 0; white-space: nowrap; }
  .tabla-reporte td { padding: 6px 8px 6px 0; border-top: 1px solid var(--borde); vertical-align: top; white-space: nowrap; }
  .tabla-reporte td:nth-child(n+4) { white-space: normal; overflow-wrap: anywhere; min-width: 120px; }
  .tabla-reporte tr.t-conflicto td:nth-child(3) { color: var(--alerta); font-weight: 600; }
  .marco-reporte { overflow: auto; max-height: 46vh; }
  @media (max-width: 640px) { .tabla-reporte .col-menor { display: none; } }

  /* El estado en el expediente (D-59). */
  #seguimiento { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--tenue); }
  #seguimiento select { width: auto; height: 32px; font-size: 13px; }
  #seguimiento .nota-estado { font-size: 12px; }

  /* Quien administra elige con qué sucursal sale el expediente (D-42). */
  #caja-sucursal { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
  #caja-sucursal[hidden] { display: none; }
  #caja-sucursal select { width: auto; max-width: 180px; height: 32px; }
  #ajeno { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--suave); color: var(--suave-texto); font-size: 13px; }

  #mesa {
    flex: 1; min-width: 0; overflow-y: auto; padding: 16px;
    display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 20px; align-items: start;
  }
  /* En el teléfono el encabezado se parte en dos renglones antes que salirse. */
  @media (max-width: 640px) {
    header { flex-wrap: wrap; row-gap: 8px; padding-left: 12px; padding-right: 12px; }
    #titulo-exp { order: 9; flex: 1 0 100%; }
    /* Cuatro pestañas no caben en un teléfono angosto: se recorren de lado. */
    #vistas { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    #vistas button { flex: 0 0 auto; padding: 0 8px; }
  }

  .bloque { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 14px; }
  .columna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); margin: 0 0 10px; font-weight: 650; }
  h2 small { text-transform: none; letter-spacing: 0; font-weight: 500; }

  /* ---------- Documentos ---------- */
  #soltar {
    border: 2px dashed var(--borde); border-radius: 12px; padding: 18px; text-align: center;
    color: var(--tenue); cursor: pointer; background: var(--panel);
  }
  #soltar i { font-size: 26px; color: var(--acento); display: block; margin-bottom: 4px; }
  #soltar b { color: var(--texto); }
  #soltar.encima, body.arrastrando #soltar { border-color: var(--acento); background: var(--suave); }
  #pegar { margin-top: 8px; display: grid; gap: 6px; }
  #pegar label { font-size: 12.5px; color: var(--tenue); display: flex; align-items: center; gap: 4px; }
  #pegar textarea {
    width: 100%; min-height: 72px; resize: vertical; box-sizing: border-box; padding: 8px 10px;
    border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 13px;
    background: var(--panel); color: var(--texto);
  }
  #pegar .botones { display: flex; gap: 6px; justify-content: flex-end; }
  #docs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
  #docs li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font-size: 13px; }
  #docs li i { color: var(--acento); }
  #docs li.mal i { color: var(--alerta); }
  #docs li .avisos { grid-column: 2; color: var(--sube); }

  #aviso { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--alerta-fondo); color: var(--alerta); font-weight: 550; }
  .conflicto { background: var(--sube-fondo); color: var(--texto); border-radius: 8px; padding: 9px 11px; font-size: 13px; }
  .conflicto b { color: var(--sube); }
  .conflicto .botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .conflicto button { height: 28px; font-size: 12.5px; }
  #vin-cotizado { background: var(--suave); color: var(--suave-texto); border-radius: 8px; padding: 9px 11px; font-size: 13px; }
  #vin-cotizado i { margin-right: 4px; }
  #vin-cotizado .botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  #vin-cotizado button { height: 28px; font-size: 12.5px; }

  /* ---------- Revisión ---------- */
  .campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .campo.ancho { grid-column: 1 / -1; }
  .campo label { font-size: 12.5px; color: var(--tenue); display: flex; justify-content: space-between; gap: 6px; }
  .origen { font-size: 11px; padding: 0 6px; border-radius: 99px; background: var(--suave); color: var(--suave-texto); white-space: nowrap; }
  .origen.doc { background: var(--leido); color: var(--sube); }
  .campo.leido select, .campo.leido input { background: var(--leido); border-color: var(--leido-borde); }
  .campo .nota { font-size: 12px; color: var(--tenue); }
  .campo .nota.mal { color: var(--alerta); }
  /* La versión que dejó Coberto como la más probable (D-75): se pide revisarla. */
  .nota.revisar { color: var(--sube); font-weight: 600; }
  .base { font-size: 13px; margin: 0 0 8px; }
  .notas { margin: 0 0 8px; padding-left: 18px; color: var(--sube); font-size: 12.5px; }
  .extras { display: flex; flex-wrap: wrap; gap: 6px 14px; grid-column: 1 / -1; }
  .extras label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto); }
  .extras input { width: auto; height: auto; }
  .campo .casilla { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto); }
  .campo .casilla input { width: auto; height: auto; flex: none; }
  .acciones { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
  .acciones button { flex: 0 0 auto; white-space: nowrap; }
  /* Lo que falta va en su propio renglón cuando no cabe junto a los botones. */
  #faltan { color: var(--tenue); font-size: 13px; margin-right: auto; flex: 1 1 180px; min-width: 0; }
  #cotizar { height: 38px; padding: 0 22px; }

  .poliza table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
  .poliza td { padding: 4px 0; border-top: 1px solid var(--borde); vertical-align: top; }
  .poliza td:last-child { text-align: right; color: var(--tenue); white-space: nowrap; padding-left: 8px; }
  .poliza .cabeza { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 13px; }

  /* ---------- Tarjetas ---------- */
  #tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .tarjeta { display: flex; flex-direction: column; gap: 10px; }
  .tarjeta .cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .tarjeta .nombre { font-size: 17px; font-weight: 700; }
  .pastilla { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
  .p-lista { background: var(--suave); color: var(--suave-texto); }
  .p-espera { background: var(--sube-fondo); color: var(--sube); }
  .p-error { background: var(--alerta-fondo); color: var(--alerta); }
  .prima { font-size: 30px; font-weight: 750; line-height: 1.1; letter-spacing: -.01em; }
  .prima small { display: block; font-size: 12.5px; font-weight: 500; color: var(--tenue); letter-spacing: 0; }
  .delta { font-size: 12.5px; }
  .lista { font-size: 12.5px; color: var(--baja); font-weight: 600; }
  .lista s { color: var(--tenue); font-weight: 400; }
  .delta.sube { color: var(--sube); }
  .delta.baja { color: var(--baja); }
  .renglones { display: grid; gap: 3px; font-size: 13px; }
  .renglon { display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--borde); padding-top: 4px; }
  .renglon span:last-child { color: var(--tenue); text-align: right; }
  .no-incluye { font-size: 12.5px; color: var(--tenue); }
  .diferencias { margin: 0; padding: 8px 10px 8px 26px; background: var(--sube-fondo); border-radius: 8px; font-size: 12.5px; }
  .vin { font-size: 12.5px; color: var(--tenue); }
  .tarjeta .version-cotizada { border-top: 0; padding-top: 0; font-size: 13px; }
  .propias { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: 8px; }
  .propias .titulo { font-size: 12.5px; font-weight: 600; color: var(--tenue); }
  .propias select { width: 100%; height: 32px; font-size: 13px; }
  .cotizadas summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--acento); }
  .cotizadas[open] summary { margin-bottom: 6px; }
  .cupon { display: flex; gap: 6px; }
  #atajos-cobertura { display: flex; gap: 8px; flex-wrap: wrap; }
  #fila-nueva { display: flex; gap: 8px; flex-wrap: wrap; }
  #fila-nueva button { align-self: flex-start; }
  #form-traer { display: flex; gap: 6px; justify-content: flex-start; flex-wrap: wrap; }
  #form-traer input { flex: 1 1 260px; max-width: 360px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  /* Sin mayúsculas forzadas: el código viaja tal como se escribe. */
  .cupon input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .cupon-estado { font-size: 12.5px; margin: -4px 0 0; }
  .cupon-estado.ok { color: var(--baja); }
  .cupon-estado.no { color: var(--sube); }
  .botones-tarjeta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
  /* El id de la cotización en la aseguradora, para pegarlo en su portal o
     mandárselo a ella. Monoespaciado: un UUID se lee y se compara mejor así. */
  .referencia { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--tenue); min-width: 0; }
  .referencia code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--texto);
    overflow-wrap: anywhere; user-select: all; min-width: 0;
  }
  .referencia button { height: 26px; padding: 0 8px; font-size: 12px; flex: 0 0 auto; }
  .botones-tarjeta a { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 8px; font-weight: 600; }
  .espera { color: var(--tenue); font-style: italic; }
  .cargando { animation: late 1.2s ease-in-out infinite; }
  @keyframes late { 50% { opacity: .5; } }
  @media (prefers-reduced-motion: reduce) { .cargando { animation: none; } }

  #historial { list-style: none; margin: 0; padding: 0; font-size: 12.5px; display: grid; gap: 4px; }
  #historial li { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; color: var(--tenue); }
  #historial li span:nth-child(2) { color: var(--texto); }

  /* ---------- Emitir (D-33) ---------- */
  .nota-tarjeta { font-size: 12.5px; color: var(--tenue); margin: 0; }
  .bajada { border-top: 1px solid var(--borde); padding-top: 10px; }
  .bajada summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--acento); }
  .bajada-forma { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
  .bajada-forma label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tenue); min-width: 0; }
  .bajada-forma button { grid-column: 1 / -1; }
  .bajada-salida { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .bajada-salida pre { margin: 0; width: 100%; box-sizing: border-box; white-space: pre-wrap; font-size: 12.5px;
    padding: 10px; border-radius: 8px; border: 1px solid var(--borde); }
  .nota-tarjeta.mal { color: var(--alerta); }
  .emitida { background: var(--suave); color: var(--suave-texto); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; }
  .emitida b { font-size: 14px; }
  /* La liga de Stripe es larga: va en su renglón, con Copiar a un lado. */
  .emitida .liga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; }
  .emitida .liga > span { grid-column: 1 / -1; color: var(--tenue); font-size: 12px; }
  .emitida .liga code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; min-width: 0; user-select: all; }
  .emitida button, .emitida a.boton { height: 28px; font-size: 12.5px; padding: 0 10px; flex: 0 0 auto; }
  .emitida .docs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .emitida .docs > span { flex: 1 0 100%; color: var(--tenue); font-size: 12px; }
  .emitida .docs a.boton { gap: 4px; background: var(--panel); }
  a.boton { display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600; text-decoration: none; border: 1px solid var(--borde); color: var(--acento); }
  dialog#emitir {
    border: 1px solid var(--borde); border-radius: 14px; padding: 0; background: var(--panel); color: var(--texto);
    width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  }
  dialog#emitir::backdrop { background: rgba(0,0,0,.4); }
  #emitir form, #emitir .vista { padding: 18px; display: grid; gap: 12px; }
  #emitir h2 { margin: 0; }
  #emitir .cabeza-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #emitir .cerrar { background: transparent; color: var(--tenue); width: 32px; padding: 0; font-size: 18px; }
  #para-emitir .campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  @media (max-width: 1100px) { #para-emitir .campos { grid-template-columns: 1fr 1fr; } }
  /* Persona física o moral (D-47): cambia los campos de quien contrata. */
  #tipo-persona { display: flex; border: 1px solid var(--borde); border-radius: 8px; padding: 2px; gap: 2px; margin: 0 0 10px; }
  #tipo-persona button { flex: 1; height: 28px; font-size: 13px; background: transparent; color: var(--tenue); border: 0; }
  #tipo-persona button[aria-pressed="true"] { background: var(--suave); color: var(--suave-texto); }
  #botones-emitir { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
  #para-emitir .subtitulo { font-size: 12.5px; color: var(--tenue); margin: 14px 0 8px; font-weight: 650; }
  #emitir .avisos { margin: 0; padding-left: 18px; color: var(--sube); font-size: 12.5px; }
  #emitir .error { margin: 0; color: var(--alerta); font-weight: 550; }
  #emitir .resumen { width: 100%; border-collapse: collapse; font-size: 13px; }
  #emitir .resumen td { padding: 5px 0; border-top: 1px solid var(--borde); vertical-align: top; }
  #emitir .resumen td:first-child { color: var(--tenue); width: 34%; padding-right: 10px; }
  #emitir .total { font-size: 26px; font-weight: 750; }
  #emitir .total small { font-size: 13px; font-weight: 500; color: var(--tenue); margin-left: 6px; }
  #emitir .irreversible { background: var(--alerta-fondo); color: var(--alerta); border-radius: 8px; padding: 9px 11px; font-size: 13px; font-weight: 550; margin: 0; }
  #emitir .acepto { display: flex; gap: 8px; align-items: center; font-weight: 600; }
  #emitir .acepto input { width: auto; height: auto; }

  /* ---------- Cupones (D-76) ---------- */
  #aviso-cupones { background: var(--sube-fondo); color: var(--texto); text-align: center; font-size: 13px; font-weight: 600; padding: 6px 12px; }
  #aviso-cupones button { height: 26px; font-size: 12.5px; margin-left: 8px; }
  dialog#cupones {
    border: 1px solid var(--borde); border-radius: 14px; padding: 0; background: var(--panel); color: var(--texto);
    width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  }
  dialog#cupones::backdrop { background: rgba(0,0,0,.4); }
  #cupones .vista { padding: 18px; display: grid; gap: 14px; }
  #cupones h2 { margin: 0; }
  #cupones h3 { margin: 0; font-size: 14px; }
  #cupones .cabeza-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #cupones .cerrar { background: transparent; color: var(--tenue); width: 32px; padding: 0; font-size: 18px; }
  #cupones .base { margin: 0; color: var(--tenue); font-size: 13px; }
  #cupones .error { margin: 0; color: var(--alerta); font-weight: 550; }
  #lista-cupones { display: grid; gap: 14px; }
  .bolsa { display: grid; gap: 8px; }
  .bolsa ol, .bolsa ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 13px; }
  .bolsa li { display: flex; align-items: center; gap: 8px; }
  .bolsa code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
  .bolsa li button { height: 26px; font-size: 12px; padding: 0 8px; margin-left: auto; }
  .bolsa .en-uso { font-size: 11.5px; font-weight: 650; color: var(--baja); }
  .bolsa .tirado { color: var(--tenue); font-size: 12.5px; }
  .bolsa form { display: grid; gap: 6px; }
  .bolsa textarea { min-height: 70px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
  .bolsa form button { justify-self: start; }
  .tarjeta .sin-cupon { height: 26px; font-size: 12px; margin-left: 8px; }

  /* ---------- Cuentas (D-44) ---------- */
  dialog#cuentas {
    border: 1px solid var(--borde); border-radius: 14px; padding: 0; background: var(--panel); color: var(--texto);
    width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  }
  dialog#cuentas::backdrop { background: rgba(0,0,0,.4); }
  #cuentas .vista { padding: 18px; display: grid; gap: 14px; }
  #cuentas h2 { margin: 0; }
  #cuentas h3 { margin: 0; font-size: 14px; }
  #cuentas .cabeza-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #cuentas .cerrar { background: transparent; color: var(--tenue); width: 32px; padding: 0; font-size: 18px; }
  #cuentas .base { margin: 0; color: var(--tenue); font-size: 13px; }
  #cuentas .error { margin: 0; color: var(--alerta); font-weight: 550; }
  .tabla-cuentas { width: 100%; border-collapse: collapse; font-size: 13px; }
  .tabla-cuentas th { text-align: left; font-weight: 600; color: var(--tenue); font-size: 12px; padding: 0 8px 6px 0; }
  .tabla-cuentas td { padding: 7px 8px 7px 0; border-top: 1px solid var(--borde); vertical-align: middle; }
  .tabla-cuentas td.acciones-cuenta { text-align: right; white-space: nowrap; }
  .tabla-cuentas td.acciones-cuenta button { height: 28px; font-size: 12.5px; padding: 0 10px; margin-left: 4px; }
  .tabla-cuentas tr.inactiva td:not(:last-child) { color: var(--tenue); }
  .tabla-cuentas tr.inactiva td:first-child { text-decoration: line-through; }
  .tabla-cuentas .tenue { color: var(--tenue); font-size: 12px; }
  .estado-cuenta { font-size: 12px; font-weight: 600; }
  .estado-cuenta.no { color: var(--alerta); }
  #caja-llave { background: var(--leido); border: 1px solid var(--leido-borde); border-radius: 10px; padding: 12px; display: grid; gap: 8px; }
  #caja-llave .liga { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  #caja-llave code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; overflow-wrap: anywhere; user-select: all; }
  #caja-llave button { height: 30px; font-size: 13px; }
  #form-cuenta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: end; }
  #form-cuenta label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tenue); min-width: 0; }
  #form-cuenta label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; color: var(--texto); height: 34px; white-space: nowrap; }
  #form-cuenta label.check input { width: auto; height: auto; }
  @media (max-width: 640px) {
    #form-cuenta { grid-template-columns: 1fr; }
    .tabla-cuentas .col-sucursal { display: none; }
    .tabla-cuentas td.acciones-cuenta { white-space: normal; }
    .tabla-cuentas td.acciones-cuenta button { margin: 2px 0; width: 100%; }
  }

  /* ---------- Uso por cuenta (D-51) ---------- */
  dialog#uso {
    border: 1px solid var(--borde); border-radius: 14px; padding: 0; background: var(--panel); color: var(--texto);
    width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  }
  dialog#uso::backdrop { background: rgba(0,0,0,.4); }
  #uso .vista { padding: 18px; display: grid; gap: 14px; }
  #uso h2 { margin: 0; }
  #uso .cabeza-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  #uso .cerrar { background: transparent; color: var(--tenue); width: 32px; padding: 0; font-size: 18px; }
  #uso .base { margin: 0; color: var(--tenue); font-size: 13px; }
  #uso .error { margin: 0; color: var(--alerta); font-weight: 550; }
  #periodos { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; padding: 2px; gap: 2px; justify-self: start; }
  #periodos button { height: 28px; font-size: 13px; padding: 0 12px; background: transparent; color: var(--tenue); border: 0; }
  #periodos button[aria-pressed="true"] { background: var(--suave); color: var(--suave-texto); }
  .tabla-uso-marco { overflow-x: auto; }
  .tabla-uso { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
  .tabla-uso th { text-align: right; font-weight: 600; color: var(--tenue); font-size: 12px; padding: 0 0 6px 10px; white-space: nowrap; }
  .tabla-uso td { text-align: right; padding: 7px 0 7px 10px; border-top: 1px solid var(--borde); white-space: nowrap; }
  .tabla-uso th:first-child, .tabla-uso td:first-child { text-align: left; padding-left: 0; white-space: normal; }
  .tabla-uso td.cero { color: var(--tenue); }
  .tabla-uso tr.total td { font-weight: 650; border-top: 2px solid var(--borde); }
  .tabla-uso .tenue { color: var(--tenue); font-size: 12px; font-weight: 400; }
  @media (max-width: 640px) {
    .tabla-uso .col-menor { display: none; }
  }

  /* ---------- Asistente (D-54) ----------
     Una columna más, a la derecha: angosta las otras en vez de taparlas. Se
     pliega desde el encabezado; en pantallas chicas flota sobre la Mesa. */
  #asistente {
    flex: 0 0 340px; border-left: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0;
    background: var(--fondo);
  }
  body.sin-asistente #asistente { display: none; }
  #abrir-asistente[aria-pressed="true"] { color: var(--texto); border-color: var(--acento); }
  /* Una tarjeta pendiente con el panel cerrado (un aviso de la Mesa, task 3.6). */
  #abrir-asistente { position: relative; }
  #abrir-asistente.con-aviso::after {
    content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px;
    border-radius: 50%; background: var(--acento);
  }
  .burbuja.asistente.automatico { border-style: dashed; }
  .propuesta select { height: 32px; font-size: 13px; }
  .cabeza-asistente { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--borde); }
  .cabeza-asistente h2 { margin: 0; flex: 1; }
  .cabeza-asistente button { height: 28px; padding: 0 9px; font-size: 12.5px; }
  #hilo-asistente { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
  .burbuja { max-width: 92%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; }
  .burbuja.usuario { align-self: flex-end; background: var(--acento); color: var(--acento-texto); border-bottom-right-radius: 4px; }
  .burbuja.asistente { align-self: flex-start; background: var(--panel); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
  .aviso-asistente { align-self: center; font-size: 12px; color: var(--tenue); text-align: center; }
  .aviso-asistente.mal { color: var(--alerta); }
  .propuesta { background: var(--panel); border: 1px solid var(--acento); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 13px; }
  .propuesta b { font-size: 13px; }
  .propuesta ul { margin: 0; padding-left: 18px; }
  .propuesta .motivo, .propuesta .recotiza { color: var(--tenue); font-size: 12px; margin: 0; }
  .propuesta .botones-tarjeta button { height: 30px; }
  .propuesta.resuelta { border-color: var(--borde); opacity: .75; }
  .propuesta .estado-propuesta { font-size: 12px; font-weight: 600; color: var(--tenue); }
  #actividad-asistente { font-size: 12px; color: var(--tenue); font-style: italic; padding: 0 12px 6px; }
  #form-asistente { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--borde); align-items: flex-end; }
  #f-asistente {
    flex: 1; resize: none; font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--borde);
    border-radius: 8px; padding: 7px 9px; min-height: 36px; max-height: 140px;
  }
  #form-asistente button { height: 36px; width: 38px; padding: 0; font-size: 17px; }
  .vacio-asistente { color: var(--tenue); font-size: 13px; margin: 0; }
  @media (max-width: 1000px) {
    #asistente {
      position: fixed; top: 0; bottom: 0; right: 0; z-index: 20; width: min(360px, 92vw);
      box-shadow: 0 0 40px rgba(0,0,0,.25); padding-top: env(safe-area-inset-top);
    }
  }

  /* ---------- Pestaña Renovaciones (D-62) ----------
     Las pólizas que vencen en las próximas semanas, en lista o por semana,
     con el estado de su renovación. Usa las filas y el calendario de «Por
     cobrar»; en rojo, lo que vence en dos semanas (o ya venció) sin que nadie
     lo haya tocado. */
  #renovaciones { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  #renovaciones .filtros select { width: auto; height: 32px; font-size: 13px; }
  #resumen-renovar { margin: 0; font-size: 13px; color: var(--tenue); }
  #resumen-renovar b { color: var(--alerta); }
  #lista-renovar { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
  #calendario-renovar { display: grid; gap: 14px; }
  #calendario-renovar[hidden] { display: none; }
  @media (min-width: 761px) {
    .cob-fila.ren-fila, .cob-cabeza.ren-cabeza {
      grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) 104px 116px minmax(150px, 1fr);
    }
    #lista-renovar.con-vendedor .ren-fila, #lista-renovar.con-vendedor .ren-cabeza {
      grid-template-columns: minmax(150px, 1.4fr) minmax(130px, 1.2fr) 104px 116px minmax(90px, .8fr) minmax(150px, 1fr);
    }
  }
  .ren-estado { display: inline-block; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
    background: var(--fondo); color: var(--tenue); border: 1px solid var(--borde); }
  .ren-estado.e-cotizada { background: var(--sube-fondo); color: var(--sube); border-color: transparent; }
  .ren-estado.e-renovada { background: var(--suave); color: var(--suave-texto); border-color: transparent; }
  .ren-estado.e-urgente { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
  .ficha-cob.f-renovada { background: var(--suave); color: var(--suave-texto); }
  .ficha-cob.f-no_renovada { background: var(--fondo); color: var(--tenue); border: 1px solid var(--borde); }
  #renovacion-exp { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--suave); color: var(--suave-texto); font-size: 13px; display: grid; gap: 4px; }
  #renovacion-exp[hidden] { display: none; }
  #renovacion-exp ul { margin: 2px 0 0; padding-left: 18px; }
  #renovacion-exp a { color: inherit; }
  @media (max-width: 760px) {
    #renovaciones { padding: 12px; }
    .cob-fila.ren-fila, #lista-renovar.con-vendedor .cob-fila.ren-fila { grid-template-areas: "nombre prima" "auto limite" "otros estado"; }
    .cob-fila.ren-fila .est { grid-area: estado; text-align: right; }
  }

  /* ---------- Acceso ---------- */
  #acceso { max-width: 360px; margin: 12vh auto 0; padding: 0 16px; }
  #acceso form { display: grid; gap: 10px; }

  /* La versión en otra aseguradora (D-66), dentro de su tarjeta. */
  .version-aseguradora { margin: 6px 0 8px; display: flex; flex-direction: column; gap: 4px; }
  .version-aseguradora select { width: 100%; height: 32px; font-size: 13px; }
  .version-aseguradora .nota { margin: 0; }

  /* Lo que una aseguradora pide además para emitir (D-68). */
  #campos-extra .extras { margin-top: 10px; }
  #campos-extra .campo[hidden] { display: none; }

  /* El descuento de la cuenta en la tarjeta (D-71). */
  .tarjeta .descuento { display: grid; grid-template-columns: 1fr 72px auto; gap: 6px; align-items: center; margin: 8px 0; }
  .tarjeta .descuento label { font-size: 12.5px; color: var(--tenue); }
  .tarjeta .descuento input { height: 32px; }