/* Optimizo · Configuración (V02). Solo estilos propios de esta sección; los colores salen de tokens.css. */
.cf-tabs [role=tab] { padding: 0 12px; }
.cf-tabs [role=tab] .ic { color: inherit; }
.cf-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); align-items: start; }
.cf-panel { display: grid; gap: 20px; min-width: 0; }
.cf-lado { display: grid; gap: 20px; min-width: 0; }
.cf-card .card-head { margin-bottom: 12px; }
.cf-alc { min-height: 26px; font-size: 12.5px; font-weight: 600; gap: 6px; }
.cf-texto { color: var(--opt-text-secondary); font-size: var(--opt-text-sm); line-height: 1.5; }
.cf-card > .cf-texto + *, .cf-card > * + .cf-texto { margin-top: 12px; }
.cf-link { color: var(--opt-accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cf-nota a { color: var(--opt-accent-text); }

/* filas de preferencia: icono, texto y control a la derecha */
.cf-filas { display: grid; gap: 10px; }
.cf-fila { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--opt-border); border-radius: var(--opt-radius-card); background: var(--opt-surface-raised); min-height: 72px; }
.cf-fila > .ic { color: var(--opt-heading); }
.cf-fila-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cf-fila-txt b { color: var(--opt-heading); font-weight: 600; font-size: var(--opt-text-md); }
.cf-fila-txt small { color: var(--opt-text-secondary); font-size: var(--opt-text-sm); line-height: 1.45; }
.cf-fila-txt em { font-style: normal; color: var(--opt-warning); font-weight: 500; }
.cf-fila > .chip { flex: none; }
.cf-seg button { min-height: 36px; padding: 0 14px; }

/* formularios de la planta */
.cf-form { max-width: none; gap: 14px; }
.cf-form .dos { gap: 16px; align-items: start; }
.cf-campo { display: grid; gap: 6px; min-width: 0; }
.cf-campo .ayuda { font-size: var(--opt-text-xs); }
.cf-turnos { display: grid; gap: 10px; }
.cf-turno { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
.cf-turno .error-campo { grid-column: 1 / -1; }
.cf-hora { display: grid; gap: 4px; font-size: var(--opt-text-xs); color: var(--opt-text-secondary); font-weight: 600; }
.cf-turno .campo { width: 100%; }

/* estado de sincronización y datos de solo lectura */
.cf-estado { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--opt-radius-card); background: var(--opt-neutral-soft); }
.cf-estado > .ic { margin-top: 1px; color: var(--opt-neutral); }
.cf-estado > div { display: grid; gap: 2px; min-width: 0; }
.cf-estado b { color: var(--opt-heading); font-size: var(--opt-text-body); }
.cf-estado small { color: var(--opt-text-secondary); font-size: var(--opt-text-sm); line-height: 1.45; }
.cf-estado.t-ok { background: var(--opt-success-soft); } .cf-estado.t-ok > .ic { color: var(--opt-success); }
.cf-estado.t-aviso { background: var(--opt-warning-soft); } .cf-estado.t-aviso > .ic { color: var(--opt-warning); }
.cf-estado.t-error { background: var(--opt-error-soft); } .cf-estado.t-error > .ic { color: var(--opt-error); }
.cf-mini { display: grid; gap: 0; margin: 12px 0 14px; }
.cf-mini > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--opt-border); }
.cf-mini dt { display: flex; align-items: center; gap: 8px; color: var(--opt-text-secondary); font-size: var(--opt-text-sm); }
.cf-mini dd { margin: 0; color: var(--opt-heading); font-weight: 600; font-size: var(--opt-text-sm); text-align: right; font-variant-numeric: tabular-nums; }
.cf-dl { display: grid; margin: 12px 0 0; }
.cf-dl > div { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--opt-border); font-size: var(--opt-text-sm); }
.cf-dl > div:last-child { border-bottom: 0; }
.cf-dl dt { color: var(--opt-text-secondary); }
.cf-dl dd { margin: 0; color: var(--opt-text); overflow-wrap: anywhere; }
.cf-dl dd b { color: var(--opt-heading); }
.cf-bloque { display: grid; gap: 12px; }
.cf-bloque .cf-dl { margin: 0; }
.cf-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* acerca de */
.cf-marca { display: flex; align-items: center; gap: 10px; color: var(--opt-heading); }
.cf-marca circle { stroke: var(--opt-accent); }
.cf-marca img { flex: none; display: block; }
.cf-marca span { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.cf-version { margin: 10px 0 4px; color: var(--opt-text-secondary); font-size: var(--opt-text-sm); line-height: 1.5; }
.cf-acerca .cf-texto { margin-bottom: 14px; }

/* seguridad */
.cf-secreto { margin-top: 12px; flex-wrap: wrap; }
.cf-secreto code { min-width: 180px; }
.cf-tok-ayuda { display: block; margin-top: 8px; }
.cf-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--opt-text-sm); }
.cf-lista li { display: flex; gap: 10px; align-items: flex-start; color: var(--opt-text); line-height: 1.45; }
.cf-lista li > .ic { color: var(--opt-heading); margin-top: 1px; }
.cf-lista b { color: var(--opt-heading); }
.cf-sesion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--opt-border); }

/* acciones que borran datos: al final, discretas, con estilo de peligro */
.cf-peligro { border: 1px solid var(--opt-error-soft); border-radius: var(--opt-radius-card); padding: 18px 20px; display: grid; gap: 10px; }
.cf-peligro h2 { display: flex; align-items: center; gap: 8px; font-size: var(--opt-text-md); color: var(--opt-error); }
.cf-accion { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--opt-border); }
.cf-accion > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cf-accion b { color: var(--opt-heading); font-weight: 600; font-size: var(--opt-text-sm); }
.cf-accion small { color: var(--opt-text-secondary); font-size: var(--opt-text-xs); line-height: 1.45; }
.cf-accion .btn { flex: none; }
.cf-form-modal { margin-top: 14px; }

/* usuarios y roles (V03) */
.cf-u-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cf-u-cab .cf-texto { flex: 1 1 260px; }
.cf-u-tabla td { vertical-align: middle; }
.cf-u-nom { color: var(--opt-heading); font-weight: 600; overflow-wrap: anywhere; }
.cf-u-rol { min-height: 36px; }
.cf-u-rol select:disabled { cursor: not-allowed; opacity: 0.7; }
.cf-u-ult { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--opt-text-secondary); font-size: var(--opt-text-xs); }
.cf-u-acc { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.cf-u-nuevo { justify-content: flex-start; }

/* privacidad y auditoría (V03) */
.cf-roles { display: flex; flex-wrap: wrap; gap: 10px 24px; border: 0; padding: 0; margin: 0; }
.cf-roles[aria-invalid=true] { outline: 2px solid var(--opt-error); outline-offset: 6px; border-radius: 4px; }
.cf-card .cf-roles + .ayuda { display: block; margin-top: 10px; }
.cf-aud-f { margin-bottom: 12px; }
.cf-aud-f .grow { flex: 1; }
.cf-aud-f .control.buscar { flex: 1 1 260px; max-width: 420px; }
.cf-aud-f .control.buscar input { width: 100%; }
.cf-aud-tabla td { font-size: var(--opt-text-sm); vertical-align: top; }
.cf-aud-tabla .hora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cf-aud-obj { overflow-wrap: anywhere; }
.cf-aud-det { color: var(--opt-text-secondary); overflow-wrap: anywhere; max-width: 420px; }
.cf-card .tabla + .cf-texto, .cf-card #cf-aud + .cf-texto { margin-top: 12px; }

.cf-barra { margin-top: 20px; }
.cf-barra .estado-guardado { outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1249px) {
  .cf-tabs [role=tab] .ic { display: none; }
}
@media (max-width: 1099px) {
  .cf-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .cf-lado { grid-template-columns: minmax(0, 1fr); }
  .cf-turno { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cf-turno > input { grid-column: 1 / -1; }
}