/* Vista de consulta CRM: identidad TC; no afecta las capas de crear/detalle. */
@media (min-width: 761px) {
  body > .app.tc-crm-shell {
    --tc-crm-rail-width: 70px;
    display: grid;
    grid-template-columns: var(--tc-crm-rail-width) minmax(0,1fr);
    grid-template-rows: 62px minmax(0,1fr) 0px;
    gap: 0;
    padding: 0;
    background: var(--c-rosa);
  }
  .tc-crm-shell > .tc-crm-rail { grid-column: 1; grid-row: 1 / 4; }
  .tc-crm-shell > .app-header { grid-column: 2; grid-row: 1; }
  .tc-crm-shell > .workspace { grid-column: 2; grid-row: 2; }
  .tc-crm-shell > .bottom { display: none; }
  .tc-crm-shell > .app-header,
  .tc-crm-shell > .workspace > .panel { border-radius: 0; }
}
.tc-crm-rail {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 13px 6px; background: var(--c-vino-oscuro); color: white; z-index: 11;
}
.tc-crm-rail-mark {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 13px;
  border-radius: 12px; background: var(--d-vino); border: 1px solid #ffffff55;
  font-weight: 800; font-size: 16px; letter-spacing: -.04em;
}
.tc-crm-rail-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 100%; min-height: 60px; padding: 6px 2px;
  border: 1px solid transparent; border-radius: 9px;
  color: #f8edf1; background: transparent; transition: background .16s, border-color .16s;
}
.tc-crm-rail-action > span { font-size: 24px; line-height: 1; }
.tc-crm-rail-action small { font-size: 10px; font-weight: 600; }
.tc-crm-rail-action:is(:hover,:focus-visible), .tc-crm-rail-action.is-active {
  background: #ffffff20; border-color: #ffffff40; color: #fff;
}
.tc-crm-shell > .app-header {
  height: 62px !important; min-height: 62px !important; max-height: 62px !important;
  grid-template-columns: 128px minmax(0,1fr) auto !important;
  background: var(--c-blanco); box-shadow: none; border: 0;
  border-bottom: 1px solid var(--c-borde); padding: 5px 18px !important;
}
.tc-crm-shell > .app-header .brand { justify-content: flex-start; background: transparent; border: 0; box-shadow: none; }
.tc-crm-shell > .app-header .head-title { text-align: left; }
.tc-crm-shell > .app-header .head-title h1 { font-size: 18px; }
.tc-crm-shell > .app-header .eyebrow { color: var(--c-vino); font-size: 9px; letter-spacing: .04em; }
.tc-crm-shell > .workspace { overflow: hidden; background: var(--c-rosa); }
.tc-crm-shell > .workspace > .panel {
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  border: 0; box-shadow: none; background: var(--c-rosa);
}
.tc-crm-shell .section-top {
  min-height: 48px; padding: 10px 18px; gap: 12px;
  background: var(--c-blanco); border-bottom: 1px solid var(--c-borde);
}
.tc-crm-count-label { color: #756570; font-size: 11px; }
.tc-crm-views {
  display: flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 5px 18px; background: var(--c-blanco); border-bottom: 1px solid var(--c-borde);
  font-size: 12px;
}
.tc-crm-views-caption { color: #6b5e65; }
.tc-crm-view-current {
  background: var(--c-rosa); color: var(--c-vino-oscuro);
  border-radius: 6px; padding: 7px 12px; font-weight: 750;
}
.tc-crm-toolbar {
  display: flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 7px 14px; background: var(--c-rosa-claro); border-bottom: 1px solid var(--c-borde);
}
.tc-crm-tool, .tc-crm-tool-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 32px; padding: 5px 12px; border-radius: 7px;
  border: 1px solid var(--c-borde); background: var(--c-blanco); color: var(--c-negro);
  font-weight: 650; transition: background .15s, box-shadow .15s;
}
.tc-crm-tool:is(:hover,:focus-visible) { background: var(--c-rosa); box-shadow: var(--s-foco); }
.tc-crm-tool-primary { margin-left: auto; background: var(--d-vino); border-color: var(--c-vino); color: white; }
.tc-crm-tool-primary:hover { filter: brightness(1.07); }
.tc-crm-tool-caption { font-size: 12px; color: #7c7076; padding-left: 8px; }
.tc-crm-data-layout {
  display: grid; grid-template-columns: 250px minmax(0,1fr);
  flex: 1; min-height: 0; gap: 10px; padding: 10px 12px;
}
.tc-crm-filter-panel {
  min-height: 0; overflow-y: auto; background: var(--c-blanco);
  border: 1px solid var(--c-borde); border-radius: 9px;
  padding: 15px 12px; box-shadow: var(--s-satinado);
}
.tc-crm-filter-panel h3 { font-size: 13px; margin: 0 3px 8px; color: var(--c-negro); }
.tc-crm-filter-note { margin: 0 3px 9px; font-size: 11px; color: #80747b; }
.tc-crm-shell .tc-crm-filter-panel .search-band { padding: 0 0 12px; border-bottom: 1px solid var(--c-borde); }
.tc-crm-shell .tc-crm-filter-panel .filters {
  display: flex; flex-direction: column; gap: 0; margin: 7px 0 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.tc-crm-shell .tc-crm-filter-panel .filters .field {
  border-right: 0; border-bottom: 1px solid var(--c-borde);
  padding: 43px 0 11px;
}
.tc-crm-shell .tc-crm-filter-panel .filters .field:last-child { border-bottom: 0; }
.tc-crm-shell .tc-crm-filter-panel .filters .field::before {
  height: 35px; background: transparent; border-bottom: 0;
}
.tc-crm-shell .tc-crm-filter-panel .filters .field-label {
  height: 35px; text-align: left; justify-content: flex-start;
  padding-left: 3px; font-size: 11px; color: var(--c-vino-oscuro);
}
.tc-crm-shell .tc-crm-filter-panel .filters .menu { left: 0; right: 0; }
.tc-crm-shell .ajustes-table-group {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  margin: 0; border-radius: 9px; background: var(--c-blanco); overflow: hidden;
}
.tc-crm-shell .ajustes-table-group .table-frame { min-height: 0; flex: 1; overflow: auto; }
.tc-crm-shell .ajustes-table-group .table-scroll { height: 100%; overflow: auto; scrollbar-width: thin; }
.tc-crm-shell .ajustes-table-group .tc-tabla { min-width: 890px; }
.tc-crm-shell .ajustes-table-group .tc-tabla th { position: sticky; top: 0; z-index: 2; }
.tc-crm-shell .ajustes-table-group .tc-tabla tbody tr:hover { background: var(--c-rosa); }
.tc-crm-shell .table-footer { background: var(--c-blanco); border-top: 1px solid var(--c-borde); }
.tc-crm-shell.tc-crm-filters-hidden .tc-crm-data-layout { grid-template-columns: minmax(0,1fr); }
.tc-crm-shell.tc-crm-filters-hidden .tc-crm-filter-panel { display: none; }
.tc-crm-shell.tc-crm-filters-hidden #tc-toggle-filters { background: var(--c-rosa); }
@media (max-width: 1000px) {
  .tc-crm-data-layout { grid-template-columns: 210px minmax(0,1fr); gap: 7px; padding: 8px; }
}
@media (max-width: 760px) {
  body > .app.tc-crm-shell { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
  .tc-crm-shell > .workspace { flex: 1; min-height: 0; overflow: auto; }
  .tc-crm-shell > .bottom { display: none; }
  .tc-crm-shell > .tc-crm-rail { flex-direction: row; padding: 4px 8px; gap: 6px; }
  .tc-crm-rail-mark { margin: 0 8px 0 0; width: 34px; height: 34px; }
  .tc-crm-rail-action { width: auto; min-height: 38px; padding: 5px 8px; flex-direction: row; }
  .tc-crm-rail-action > span { font-size: 17px; }
  .tc-crm-shell > .app-header { grid-template-columns: 68px minmax(0,1fr) auto !important; padding: 5px 8px !important; }
  .tc-crm-shell > .app-header .eyebrow { display: none; }
  .tc-crm-shell > .app-header .head-title h1 { font-size: 16px; }
  .tc-crm-shell .tc-crm-data-layout { display: flex; flex-direction: column; overflow: auto; }
  .tc-crm-shell .tc-crm-filter-panel { flex: none; max-height: 230px; }
  .tc-crm-shell .ajustes-table-group { flex: 1 0 310px; }
  .tc-crm-shell .tc-crm-tool-caption { display: none; }
  .tc-crm-shell .section-top { min-height: 40px; padding: 7px 10px; }
}

/* Navegación CRM: barra lateral plegable, sin acción Crear en el menú. */
@media (min-width: 761px) {
  body > .app.tc-crm-shell { --tc-crm-rail-width: 68px; }
  body > .app.tc-crm-shell.tc-crm-nav-expanded { --tc-crm-rail-width: 238px; }
}
.tc-crm-shell .tc-crm-rail {
  align-items: stretch;
  gap: 13px;
  padding: 11px 7px;
  overflow: hidden;
  transition: width .18s ease, padding .18s ease;
}
.tc-crm-rail-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  min-width: 0;
}
.tc-crm-shell .tc-crm-rail-mark {
  flex: none;
  width: 39px; height: 39px;
  margin: 0;
  border-radius: 9px;
  font-size: 15px;
}
.tc-crm-rail-title {
  display: none;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
}
.tc-crm-rail-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 31px; height: 31px;
  border: 1px solid #ffffff38;
  border-radius: 6px;
  background: #ffffff13;
  color: white;
}
.tc-crm-rail-toggle:hover,
.tc-crm-rail-toggle:focus-visible { background: #ffffff30; }
.tc-crm-nav-items { display: flex; flex-direction: column; gap: 5px; }
.tc-crm-shell .tc-crm-rail-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 7px 4px;
  gap: 5px;
  border-radius: 7px;
}
.tc-crm-rail-action svg { flex: none; }
.tc-crm-nav-label {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  font-weight: 600;
}
@media (min-width: 761px) {
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-heading { flex-direction: column; gap: 8px; }
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-toggle { width: 39px; }
  .tc-crm-shell.tc-crm-nav-expanded .tc-crm-rail-title { display: block; }
  .tc-crm-shell.tc-crm-nav-expanded .tc-crm-rail-action {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 39px;
    padding: 8px 11px;
    gap: 13px;
  }
  .tc-crm-shell.tc-crm-nav-expanded .tc-crm-nav-label { font-size: 13px; }
}
@media (max-width: 760px) {
  .tc-crm-shell .tc-crm-rail { flex-direction: row; align-items: center; padding: 5px 8px; }
  .tc-crm-rail-heading { flex: none; }
  .tc-crm-rail-toggle { display: none; }
  .tc-crm-nav-items { flex-direction: row; }
  .tc-crm-shell .tc-crm-rail-action {
    flex-direction: row; width: auto; min-height: 36px; padding: 6px 10px; gap: 6px;
  }
  .tc-crm-nav-label { font-size: 11px; }
}

/* Corrección de regresiones: el selector genérico de span agrandaba las etiquetas. */
.tc-crm-shell .tc-crm-rail-action > .tc-crm-nav-label {
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
@media (min-width: 761px) {
  /* Un único control visible al contraer: el propio logotipo de la cabecera. */
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-toggle { display: none; }
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-heading {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .tc-crm-shell.tc-crm-nav-expanded .tc-crm-rail-heading {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .tc-crm-shell.tc-crm-nav-expanded .tc-crm-rail-action > .tc-crm-nav-label {
    font-size: 13px;
    line-height: 1.25;
  }
  .tc-crm-shell > .app-header {
    grid-template-columns: 148px minmax(0,1fr) auto !important;
    min-width: 0;
    gap: 18px;
  }
  .tc-crm-shell > .app-header .brand { width: 148px !important; max-width: 148px !important; }
  .tc-crm-shell > .app-header .head-title { min-width: 0; }
}
.tc-crm-shell .tc-crm-rail-mark {
  cursor: pointer;
  padding: 0;
  color: white;
}
.tc-crm-shell .tc-crm-rail-mark:focus-visible { outline: 2px solid white; outline-offset: 2px; }
@media (max-width: 760px) {
  .tc-crm-shell .tc-crm-rail-action > .tc-crm-nav-label { font-size: 11px; }
  .tc-crm-shell > .app-header { grid-template-columns: 74px minmax(0,1fr) auto !important; }
  .tc-crm-shell > .app-header .brand { width: 74px !important; max-width: 74px !important; }
}

/* Navegación fluida: transición real del grid y sustitución del logo al pasar el cursor. */
@media (min-width: 761px) {
  body > .app.tc-crm-shell {
    transition: grid-template-columns 260ms cubic-bezier(.22,1,.36,1);
  }
}
.tc-crm-shell .tc-crm-rail {
  transition: background-color 180ms ease;
}
.tc-crm-shell .tc-crm-rail-mark {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  transition: background-color 190ms ease, border-color 190ms ease, box-shadow 190ms ease;
}
.tc-crm-logo-letters,
.tc-crm-logo-expand {
  grid-area: 1 / 1;
  transition: opacity 180ms ease, transform 230ms cubic-bezier(.22,1,.36,1);
}
.tc-crm-logo-letters { opacity: 1; transform: scale(1); }
.tc-crm-logo-expand { opacity: 0; transform: scale(.7); pointer-events: none; }
@media (hover: hover) {
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-mark:is(:hover,:focus-visible) .tc-crm-logo-letters {
    opacity: 0; transform: scale(.78);
  }
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-mark:is(:hover,:focus-visible) .tc-crm-logo-expand {
    opacity: 1; transform: scale(1);
  }
}
.tc-crm-shell .tc-crm-rail-mark:hover { background: #ffffff2a; border-color: #ffffff76; box-shadow: 0 3px 10px #0000001a; }
.tc-crm-shell .tc-crm-rail-action {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.tc-crm-shell .tc-crm-rail-action:is(:hover,:focus-visible) {
  background: #ffffff29;
  border-color: #ffffff45;
}
.tc-crm-shell .tc-crm-rail-toggle {
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.tc-crm-shell .tc-crm-rail-toggle:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  body > .app.tc-crm-shell,
  .tc-crm-shell .tc-crm-rail,
  .tc-crm-shell .tc-crm-rail-mark,
  .tc-crm-shell .tc-crm-rail-action,
  .tc-crm-shell .tc-crm-rail-toggle,
  .tc-crm-logo-letters,
  .tc-crm-logo-expand { transition: none !important; }
}


/* Barra lateral: superficie continua, no un botón rectangular. */
@media (min-width: 761px) {
  .tc-crm-shell .tc-crm-rail {
    cursor: pointer;
    background:
      linear-gradient(160deg, rgba(255,255,255,.065), transparent 24%),
      linear-gradient(180deg, #702041 0%, #5e1838 48%, #4c142f 100%);
    box-shadow: inset -1px 0 0 rgba(20,2,12,.23);
  }
  .tc-crm-shell.tc-crm-nav-expanded .tc-crm-rail-mark {
    background: var(--d-vino);
  }
}
.tc-crm-shell .tc-crm-rail-heading,
.tc-crm-shell .tc-crm-nav-items { cursor: default; }
.tc-crm-shell .tc-crm-rail-mark,
.tc-crm-shell .tc-crm-rail-toggle,
.tc-crm-shell .tc-crm-rail-action { cursor: pointer; }
.tc-crm-shell .tc-crm-rail-mark {
  background: linear-gradient(145deg, #a33963 0%, #812147 52%, #641a3a 100%);
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 2px 5px rgba(31,3,19,.16);
}
.tc-crm-shell .tc-crm-rail-action.is-active {
  background: linear-gradient(110deg, rgba(255,255,255,.19), rgba(255,255,255,.10));
  box-shadow: inset 2px 0 0 rgba(255,255,255,.75);
}
.tc-crm-shell .tc-crm-rail-action:not(.is-active):hover {
  background: rgba(255,255,255,.12);
}
/* El icono sustituye el logotipo únicamente durante hover, como en CRM. */
.tc-crm-shell .tc-crm-logo-letters {
  opacity: 1; transform: none;
}
.tc-crm-shell .tc-crm-logo-expand {
  opacity: 0; transform: scale(.82);
}
@media (hover: hover) {
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-mark:hover .tc-crm-logo-letters {
    opacity: 0; transform: scale(.82);
  }
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail-mark:hover .tc-crm-logo-expand {
    opacity: 1; transform: scale(1);
  }
}
/* Un control de teclado legítimo conserva su foco sin convertir la zona vacía en un tab. */
.tc-crm-shell .tc-crm-rail-mark:focus:not(:focus-visible) { outline: 0; }
@media (prefers-reduced-motion: reduce) {
  .tc-crm-shell .tc-crm-rail-action,
  .tc-crm-shell .tc-crm-logo-letters,
  .tc-crm-shell .tc-crm-logo-expand { transition: none; }
}

/* Hover contextual de Zoho: se detecta el puntero sobre TODA la barra,
   no únicamente sobre el cuadrado del logotipo. */
@media (min-width: 761px) and (hover: hover) {
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail:hover .tc-crm-logo-letters {
    opacity: 0;
    transform: scale(.82);
  }
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail:hover .tc-crm-logo-expand {
    opacity: 1;
    transform: scale(1);
  }
  .tc-crm-shell:not(.tc-crm-nav-expanded) .tc-crm-rail:hover .tc-crm-rail-mark {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.48);
  }
}