/* Contratos y seguros: estilos de la pantalla. */
.ct-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .ct-summary { grid-template-columns: 1fr 1fr; }
  .ct-summary .stat:last-child { grid-column: 1 / -1; }
}

.ct-panel { padding: 8px 10px; container-type: inline-size; }
.ct-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ct-none { color: var(--muted); }

.ct-row {
  display: grid; align-items: center; gap: 6px 16px; min-width: 0; padding: 14px 8px;
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(130px, auto) minmax(0, 1.3fr) auto;
  grid-template-areas: 'ico main cost renew tools';
  border-top: 1px solid var(--line);
}
.ct-row:first-child { border-top: 0; }

.ct-row > .ct-ico { grid-area: ico; }
.ct-row > .ct-main { grid-area: main; }
.ct-row > .ct-cost { grid-area: cost; }
.ct-row > .ct-renew { grid-area: renew; }
.ct-row > .ct-tools { grid-area: tools; }

.ct-ico {
  --c: var(--violet);
  width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c);
}
.ct-ico .icon { width: 21px; height: 21px; }
.ct-kind-insurance .ct-ico { --c: var(--cyan); }
.ct-kind-subscription .ct-ico { --c: var(--pink); }
.ct-kind-rent .ct-ico { --c: var(--amber); }
.ct-kind-phone .ct-ico { --c: var(--blue); }
.ct-kind-utility .ct-ico { --c: var(--mint); }
.ct-kind-other .ct-ico { --c: var(--violet); }
:root[data-theme='light'] .ct-kind-insurance .ct-ico { --c: #0C7F96; }
:root[data-theme='light'] .ct-kind-subscription .ct-ico { --c: #C8206F; }
:root[data-theme='light'] .ct-kind-rent .ct-ico { --c: #9A6200; }
:root[data-theme='light'] .ct-kind-phone .ct-ico { --c: #3550D6; }
:root[data-theme='light'] .ct-kind-utility .ct-ico { --c: #0B7F57; }
:root[data-theme='light'] .ct-kind-other .ct-ico { --c: #6A3FD9; }

.ct-main { min-width: 0; display: grid; gap: 2px; }
.ct-main b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-main span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ct-cost { display: grid; gap: 2px; justify-items: end; text-align: right; min-width: 0; }
.ct-cost b { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ct-cost > span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.ct-renew { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.ct-when { font-size: 14px; }
.ct-note { font-size: 12.5px; color: var(--muted); }
.ct-due {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; background: var(--surface-3); color: var(--text); line-height: 1.25;
}
.ct-due .icon { width: 14px; height: 14px; flex: none; }
.ct-due.is-soon { background: rgba(255, 176, 32, 0.18); color: var(--amber); }
.ct-due.is-late { background: rgba(255, 77, 106, 0.18); color: var(--neg); }
:root[data-theme='light'] .ct-due.is-soon { color: #9A6200; }
:root[data-theme='light'] .ct-due.is-late { color: #C81E3A; }

.ct-tools { display: inline-flex; align-items: center; gap: 2px; justify-self: end; }

.ct-row.is-cancelled .ct-ico { opacity: 0.6; }
.ct-row.is-cancelled .ct-main,
.ct-row.is-cancelled .ct-cost,
.ct-row.is-cancelled .ct-renew { opacity: 0.8; }

.ct-cancelled > summary {
  display: flex; align-items: center; gap: 8px; padding: 12px 8px; cursor: pointer; font-weight: 650; list-style: none;
}
.ct-cancelled > summary::-webkit-details-marker { display: none; }
.ct-cancelled > summary .icon { width: 18px; height: 18px; color: var(--muted); transition: rotate 0.15s; }
.ct-cancelled[open] > summary .icon { rotate: 90deg; }
.ct-cancelled > summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 12px; }

/* Con poco ancho, cada fila pasa a dos líneas. */
@container (max-width: 640px) {
  .ct-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas: 'ico main cost' 'renew renew tools';
    align-items: start;
  }
  .ct-row > .ct-renew { padding-left: 60px; }
  .ct-row > .ct-tools { align-self: center; }
}

@container (max-width: 420px) {
  .ct-row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: 'ico main main' 'cost cost cost' 'renew renew renew' 'tools tools tools'; }
  .ct-ico { width: 40px; height: 40px; }
  .ct-cost { justify-items: start; text-align: left; padding-left: 56px; }
  .ct-row > .ct-renew { padding-left: 56px; }
  .ct-row > .ct-tools { justify-self: start; padding-left: 46px; }
}

/* En pantallas estrechas el botón baja debajo del título. */
@media (max-width: 480px) {
  .ct-head { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ct-head .btn { justify-self: start; }
}