/**
 * Acerca la apariencia de CiviCRM a la app de captación, para que el equipo y
 * los amigos no sientan que usan dos productos distintos.
 *
 * REGLA QUE SE SIGUE AQUÍ: solo se tocan tipografía, color, borde, radio y
 * espaciado. NUNCA display, position, float, width ni height de contenedores.
 * CiviCRM tiene cientos de pantallas que nadie va a revisar una por una, y son
 * las propiedades de layout las que las descolocan. Un tema que cambia colores
 * se ve raro en el peor caso; uno que cambia el layout deja formularios
 * inservibles.
 *
 * Se carga desde yucore (no se toca el tema aah, que es de terceros) con peso
 * mayor que yucore-theme.css, así que gana en los empates. Para quitarlo basta
 * borrar su línea en yucore_civicrm_coreResourceList.
 */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ---------- Tipografía: la misma de la app ---------- */
body,
body.aah-theme,
.crm-container,
#crm-container,
#crm-main-content-wrapper,
.crm-container input,
.crm-container select,
.crm-container textarea,
.crm-container button,
#civicrm-menu,
.ui-dialog {
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---------- Títulos: menos grandilocuentes, como en la app ---------- */
.crm-container .crm-page-title,
.crm-page-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

.crm-container .crm-section-title,
.crm-container legend,
.crm-container h3 {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ---------- Tablas: densas y con franjas, como la Lista de amigos ---------- */
.crm-container table.selector thead th,
.crm-container table.report-layout thead th,
.crm-container .crm-flex-box thead th {
  padding: 8px 12px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--hu-navy, #1B3A6B) !important;
  background: var(--aah-bg-layer, #F4F6FA) !important;
  border-bottom: 1px solid #E4E8EF !important;
}

.crm-container table.selector tbody td,
.crm-container table.report-layout tbody td {
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-bottom: 1px solid #F0F3F8 !important;
}

.crm-container table.selector tbody tr:nth-child(even) td,
.crm-container table.report-layout tbody tr:nth-child(even) td {
  background: #F4F6FA !important;
}

.crm-container table.selector tbody tr:hover td {
  background: #E8EEF7 !important;
}

/* Números alineados: en listas de cédulas y teléfonos se lee mucho mejor. */
.crm-container table.selector td,
.crm-container .crm-summary-row .crm-summary-block {
  font-variant-numeric: tabular-nums;
}

/* ---------- Botones: los radios y el peso de la app ---------- */
.crm-container .crm-button,
.crm-container input[type="submit"],
.crm-container button.crm-button,
.crm-container a.button,
#crm-container .crm-button {
  border-radius: 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 7px 13px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ---------- Campos: misma altura y radio que en la app ---------- */
.crm-container input[type="text"],
.crm-container input[type="email"],
.crm-container input[type="tel"],
.crm-container input[type="password"],
.crm-container input[type="number"],
.crm-container input[type="date"],
.crm-container select,
.crm-container textarea,
.crm-container .crm-form-text,
.crm-container .select2-container .select2-choice {
  border-radius: 5px !important;
  border-color: #CBD3E0 !important;
  font-size: 13px !important;
  box-shadow: none !important;
}

.crm-container input[type="text"]:focus,
.crm-container select:focus,
.crm-container textarea:focus {
  border-color: var(--hu-navy, #1B3A6B) !important;
  outline: 2px solid var(--hu-navy, #1B3A6B) !important;
  outline-offset: 0 !important;
}

.crm-container label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #55606F !important;
}

/* ---------- Bloques y tarjetas: bordes nítidos, sin sombras ---------- */
.crm-container .crm-accordion-wrapper,
.crm-container .crm-block,
.crm-container fieldset,
.crm-container .crm-form-block,
.crm-container .crm-search-form-block {
  border-radius: 8px !important;
  border-color: #E4E8EF !important;
  box-shadow: none !important;
}

.crm-container .crm-accordion-header,
.crm-container .collapsible-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* ---------- Avisos: la misma familia de colores que la app ---------- */
.crm-container .messages.status,
.crm-container .crm-info,
.crm-container .status {
  border-radius: 8px !important;
  font-size: 13px !important;
}

/* El logo del menú vivía aquí. Se quitó al llegar la barra lateral: aquel
   bloque estilaba #civicrm-menu, que el armazón ahora oculta, y era además
   la única regla de layout que quedaba en este archivo. El logo lo pone
   ahora crm-shell.css, en la marca del sidebar. */


/* ============================================================
   CONTENIDO DE LAS PANTALLAS
   Añadido al pedir la campaña que se mejorara «dentro de cada opción».
   Se trabaja sobre las clases que CiviCRM usa de verdad, comprobadas en las
   pantallas reales: la ficha se compone de 48 .crm-summary-row repartidas en
   16 .crm-summary-block, y la búsqueda de bloques .crm-form-block.

   SIGUE LA MISMA REGLA: solo tipografía, color, borde, radio, sombra y
   espaciado. NI UN display, position, float, width ni height — el layout de
   CiviCRM va con floats y tocarlo descoloca pantallas que nadie va a revisar.
   ============================================================ */

/* ---------- Cabecera de página: aire y una línea que la separe ---------- */
.crm-container .crm-page-title-wrapper,
.crm-container .crm-title-wrapper {
  padding-bottom: 12px !important;
  margin-bottom: 18px !important;
  border-bottom: 1px solid #E4E8EF !important;
}

/* ---------- Todo bloque es una tarjeta ---------- */
.crm-container .crm-block,
.crm-container .crm-form-block,
.crm-container .crm-search-form-block,
.crm-container .crm-results-block,
.crm-container .crm-summary-block,
.crm-container .crm-accordion-wrapper,
.crm-container fieldset {
  background: #fff !important;
  border: 1px solid #E4E8EF !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(31, 39, 51, .04) !important;
  padding: 16px 18px !important;
  margin-bottom: 16px !important;
}
/* Anidadas no llevan doble marco: una tarjeta dentro de otra se ve sucia. */
.crm-container .crm-block .crm-block,
.crm-container .crm-form-block fieldset,
.crm-container .crm-summary-block fieldset {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* ---------- Filas de la ficha: etiqueta arriba, dato destacado ---------- */
.crm-container .crm-summary-row {
  padding: 7px 0 !important;
  border-bottom: 1px solid #F0F3F8 !important;
}
.crm-container .crm-summary-row:last-child { border-bottom: 0 !important; }
.crm-container .crm-summary-row .crm-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #8791A0 !important;
}
.crm-container .crm-summary-row .crm-content {
  font-size: 13.5px !important;
  color: #1F2733 !important;
}
/* Un dato vacío no debe pesar lo mismo que uno lleno. */
.crm-container .crm-summary-row .crm-content:empty::after {
  content: '—';
  color: #CBD3E0;
}

/* ---------- Pestañas de la ficha ---------- */
.crm-container .ui-tabs-nav,
.crm-container ul.ui-tabs-nav {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #E4E8EF !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
}
.crm-container .ui-tabs-nav li,
.crm-container .crm-tab-button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 2px -1px 0 !important;
}
.crm-container .crm-tab-button a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #55606F !important;
  padding: 9px 13px !important;
}
.crm-container .crm-tab-button:hover { border-bottom-color: #CBD3E0 !important; }
.crm-container .ui-tabs-nav li.ui-tabs-active,
.crm-container .crm-tab-button.ui-tabs-active {
  border-bottom-color: #E1251B !important;
}
.crm-container .ui-tabs-nav li.ui-tabs-active a { color: #1B3A6B !important; }
/* El contador de cada pestaña, como una pastilla discreta. */
.crm-container .crm-tab-button .crm-tab-count,
.crm-container .crm-tab-button em {
  background: #F4F6FA !important;
  color: #55606F !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
/* Sin registros, el contador no debe llamar la atención. */
.crm-container .crm-count-0 .crm-tab-count,
.crm-container .crm-count-0 em { opacity: .45 !important; }

/* ---------- Filas de formulario: etiquetas legibles y aire ---------- */
.crm-container .crm-section {
  padding: 7px 0 !important;
  margin-bottom: 4px !important;
}
.crm-container .crm-section > .label label,
.crm-container .crm-section > .label {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #55606F !important;
}
.crm-container .description,
.crm-container .crm-section .description {
  font-size: 11.5px !important;
  color: #8791A0 !important;
  font-style: normal !important;
}

/* ---------- Barra de botones ---------- */
.crm-container .crm-submit-buttons {
  padding-top: 14px !important;
  margin-top: 14px !important;
  border-top: 1px solid #F0F3F8 !important;
}
/* El botón que confirma, en azul institucional; el resto, discretos. */
.crm-container .crm-button.crm-form-submit.default,
.crm-container input.crm-form-submit.default,
.crm-container .crm-button-type-upload input {
  background: #1B3A6B !important;
  border-color: #1B3A6B !important;
  color: #fff !important;
}
.crm-container .crm-button.cancel,
.crm-container input.cancel {
  background: #fff !important;
  border-color: #CBD3E0 !important;
  color: #55606F !important;
}

/* ---------- Acordeones ---------- */
.crm-container .crm-accordion-header,
.crm-container .collapsible-title {
  background: #F4F6FA !important;
  color: #1B3A6B !important;
  padding: 10px 14px !important;
  margin: -16px -18px 14px !important;
  border-bottom: 1px solid #E4E8EF !important;
}
.crm-container .crm-accordion-light .crm-accordion-header {
  background: transparent !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 6px 0 !important;
}

/* ---------- Avisos: un borde de color que diga de qué van ---------- */
.crm-container .messages.status,
.crm-container .status,
.crm-container .crm-info {
  background: #fff !important;
  border: 1px solid #E4E8EF !important;
  border-left: 3px solid #2B5AA0 !important;
  padding: 11px 14px !important;
}
.crm-container .messages.error,
.crm-container .status.error { border-left-color: #E1251B !important; }
.crm-container .messages.success { border-left-color: #2E8B57 !important; }
.crm-container .messages.warning { border-left-color: #F2A900 !important; }

/* ---------- Sin resultados: que se note que no es un error ---------- */
.crm-container .crm-results-block .messages,
.crm-container .empty-results {
  color: #8791A0 !important;
  font-size: 13px !important;
}

/* ============================================================
   FORMULARIOS Y BÚSQUEDAS
   Añadido al ver la pantalla de búsqueda de membresías, que es como todas las
   demás: CiviCRM las arma con <table class="form-layout"> y filas .odd/.even.

   SOBRE LA REGLA DE NO TOCAR EL LAYOUT: se mantiene para los CONTENEDORES,
   que es donde romper duele. Aquí sí se fija ancho y alto de los CONTROLES
   (input, select, el widget select2), que son elementos hoja: si uno queda
   raro se ve al momento y no descoloca la página entera. Sin eso no hay forma
   de arreglar el desorden de campos de anchos aleatorios, que es justo lo que
   hace que estas pantallas parezcan viejas.
   ============================================================ */

/* ---------- Fuera las franjas en los FORMULARIOS ----------
   En una tabla de resultados ayudan a seguir la fila con la vista. En un
   formulario no aportan nada: solo cortan la pantalla en bandas grises. */
.crm-container table.form-layout tr.odd,
.crm-container table.form-layout tr.even,
.crm-container table.form-layout tr.odd-row,
.crm-container table.form-layout tr.even-row,
.crm-container .crm-form-block table tr.odd,
.crm-container .crm-form-block table tr.even,
.crm-container .crm-search-form-block tr.odd,
.crm-container .crm-search-form-block tr.even {
  background-color: transparent !important;
}

/* ---------- Ritmo vertical: cada fila respira lo mismo ---------- */
.crm-container table.form-layout > tbody > tr > td,
.crm-container table.form-layout > tbody > tr > th {
  padding: 9px 10px 9px 0 !important;
  vertical-align: top !important;
  border: 0 !important;
}
.crm-container table.form-layout td.label,
.crm-container table.form-layout th.label {
  padding-top: 12px !important;
  color: #55606F !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

/* ---------- Controles con la misma altura y un ancho previsible ----------
   Antes cada campo medía lo que le venía en gana: uno ancho, el siguiente
   corto, el de al lado mediano. Eso es lo que más envejece un formulario. */
.crm-container .crm-form-text,
.crm-container .crm-form-select,
.crm-container input[type="text"],
.crm-container input[type="email"],
.crm-container input[type="tel"],
.crm-container input[type="number"],
.crm-container input[type="date"],
.crm-container select {
  min-height: 34px !important;
  box-sizing: border-box !important;
  padding: 6px 10px !important;
}
.crm-container table.form-layout .crm-form-text,
.crm-container table.form-layout .crm-form-select,
.crm-container table.form-layout select {
  min-width: 260px !important;
  max-width: 100% !important;
}
/* Los cortos de verdad se quedan cortos: una fecha o un número no necesitan
   260px, y estirarlos miente sobre lo que se espera dentro. */
.crm-container table.form-layout input.crm-form-date,
.crm-container table.form-layout input[size="4"],
.crm-container table.form-layout input[size="6"],
.crm-container table.form-layout input.six {
  min-width: 0 !important;
}

/* ---------- El widget select2, que sin valor parecía roto ----------
   Vacío se dibujaba como una cajita diminuta con una pastilla blanca dentro:
   no parecía un campo, parecía un error. Ahora tiene el mismo cuerpo que los
   demás controles. */
.crm-container .select2-container,
.crm-container .crm-select2 + .select2-container {
  min-width: 260px !important;
  max-width: 100% !important;
}
.crm-container .select2-container .select2-choice,
.crm-container .select2-container .select2-choices {
  min-height: 34px !important;
  padding: 4px 9px !important;
  border-color: #CBD3E0 !important;
  border-radius: 5px !important;
  background: #fff !important;
  box-shadow: none !important;
}
.crm-container .select2-container-active .select2-choice,
.crm-container .select2-container-active .select2-choices {
  border-color: #1B3A6B !important;
}
.crm-container .select2-container .select2-choices li.select2-search-field input {
  min-height: 24px !important;
  padding: 2px 0 !important;
}

/* ---------- La ayuda «?»: que informe, no que grite ---------- */
.crm-container .helpicon,
.crm-container a.helpicon {
  opacity: .5 !important;
  transform: scale(.82);
  transform-origin: center;
}
.crm-container .helpicon:hover { opacity: 1 !important; }

/* ---------- La «X» de limpiar un campo ---------- */
.crm-container .crm-clear-link,
.crm-container .crm-hover-button.crm-clear-link {
  color: #8791A0 !important;
  opacity: .6 !important;
}
.crm-container .crm-clear-link:hover { color: #E1251B !important; opacity: 1 !important; }

/* ---------- Grupos de opciones: aire entre Sí y No ---------- */
.crm-container .crm-form-radio + label,
.crm-container .crm-form-checkbox + label {
  margin: 0 16px 0 5px !important;
  font-weight: 500 !important;
  color: #1F2733 !important;
}
.crm-container input[type="radio"],
.crm-container input[type="checkbox"] {
  accent-color: #1B3A6B;
}

/* ---------- Los dos botones «Buscar» ----------
   CiviCRM repite la barra arriba y abajo. Se queda, porque en formularios
   largos evita subir, pero el de arriba pesa menos: el que manda es el final. */
.crm-container .crm-search-form-block .crm-submit-buttons:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   LO QUE SALE EN TODAS LAS PANTALLAS
   Una pantalla de resultados trae 600 botones de acción, un paginador y una
   tabla; y cualquier opción del menú acaba abriendo un cuadro de diálogo o
   soltando un aviso. Eso es lo que se ve en todas partes, así que es donde
   más rinde el trabajo.
   ============================================================ */

/* ---------- Acciones de fila ----------
   Eran enlaces azules subrayados, cientos por pantalla, compitiendo entre sí
   por la atención. Ahora son pastillas discretas que solo se encienden cuando
   el ratón pasa por encima: la fila se lee, y la acción aparece cuando hace
   falta. */
.crm-container .crm-hover-button,
.crm-container a.action-item {
  border-radius: 5px !important;
  padding: 3px 7px !important;
  font-size: 12px !important;
  color: #2B5AA0 !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
}
.crm-container .crm-hover-button:hover,
.crm-container a.action-item:hover {
  background: #E8EEF7 !important;
  border-color: #D4E0F1 !important;
  color: #1B3A6B !important;
  text-decoration: none !important;
}
/* El icono dentro de la acción, del mismo color que el texto. */
.crm-container .crm-hover-button .crm-i { color: inherit !important; }

/* El nombre del contacto es lo que se busca en la fila: que pese más. */
.crm-container .crm-summary-link,
.crm-container table.selector td a.crm-summary-link {
  font-weight: 600 !important;
  color: #1B3A6B !important;
}

/* ---------- Paginador ---------- */
.crm-container .crm-pager {
  padding: 12px 2px !important;
  border-top: 1px solid #E4E8EF !important;
  margin-top: 4px !important;
  font-size: 12.5px !important;
  color: #55606F !important;
}
.crm-container .crm-pager-link {
  border: 1px solid #E4E8EF !important;
  background: #fff !important;
  padding: 5px 10px !important;
  margin: 0 2px !important;
  border-radius: 6px !important;
}
.crm-container .crm-pager-link:hover {
  border-color: #2B5AA0 !important;
  background: #E8EEF7 !important;
}
.crm-container .crm-pager input[type="text"] {
  min-width: 0 !important;
  width: 48px !important;
  text-align: center !important;
}

/* ---------- Tabla de resultados ---------- */
.crm-container table.selector {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
/* EXCEPCIÓN CONSCIENTE a la regla de no tocar posiciones: la cabecera se queda
   fija al desplazar. En una lista de 50 contactos, perder de vista qué columna
   es cuál obliga a subir constantemente. El riesgo está acotado: si algún
   contenedor tiene overflow, sticky simplemente no hace nada y la tabla se ve
   como antes. Si diera problemas, se borran estas tres líneas. */
.crm-container table.selector thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}
/* La columna de casillas no necesita el mismo aire que un nombre. */
.crm-container table.selector td.crm-checkbox-column,
.crm-container table.selector th.crm-checkbox-column { padding-right: 0 !important; }

/* La barra de selección que aparece al marcar filas. */
.crm-container .crm-selection-reset,
.crm-container table.form-layout-compressed {
  font-size: 12.5px !important;
}

/* ---------- Ventanas emergentes ----------
   CiviCRM abre en diálogo casi todo: editar en línea, elegir, confirmar. Se
   veían como una caja gris de escritorio antiguo. */
.ui-dialog {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(14, 34, 68, .22) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: #F4F6FA !important;
  border: 0 !important;
  border-bottom: 1px solid #E4E8EF !important;
  border-radius: 0 !important;
  padding: 13px 18px !important;
}
.ui-dialog .ui-dialog-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1B3A6B !important;
}
.ui-dialog .ui-dialog-titlebar-close {
  border: 0 !important;
  background: none !important;
  opacity: .55 !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover { opacity: 1 !important; }
.ui-dialog .ui-dialog-content { padding: 18px !important; }
.ui-dialog .ui-dialog-buttonpane {
  background: #F4F6FA !important;
  border-top: 1px solid #E4E8EF !important;
  margin: 0 !important;
  padding: 12px 18px !important;
}
.ui-widget-overlay { background: #1F2733 !important; opacity: .38 !important; }

/* ---------- Avisos flotantes ---------- */
.ui-notify-message {
  border-radius: 10px !important;
  border: 1px solid #E4E8EF !important;
  border-left: 3px solid #2B5AA0 !important;
  box-shadow: 0 6px 22px rgba(14, 34, 68, .14) !important;
  background: #fff !important;
  color: #1F2733 !important;
  padding: 13px 16px !important;
}
.ui-notify-message h1 {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1B3A6B !important;
  margin: 0 0 3px !important;
}
.ui-notify-message.error { border-left-color: #E1251B !important; }
.ui-notify-message.success { border-left-color: #2E8B57 !important; }

/* ---------- Menús desplegables de acción ---------- */
.crm-container .crm-popup,
.ui-menu, .ui-autocomplete {
  border: 1px solid #E4E8EF !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 26px rgba(14, 34, 68, .16) !important;
  padding: 5px !important;
  background: #fff !important;
}
.ui-menu .ui-menu-item-wrapper,
.ui-autocomplete .ui-menu-item a {
  border-radius: 6px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border: 0 !important;
}
.ui-menu .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item a.ui-state-focus {
  background: #E8EEF7 !important;
  color: #1B3A6B !important;
  border: 0 !important;
  margin: 0 !important;
}

/* ---------- Enlaces de acción sueltos («Añadir…», «Nuevo…») ---------- */
.crm-container a.button,
.crm-container .crm-button-type-cancel {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
}

/* ============================================================
   BOTONES SIEMPRE A MANO, Y TABLAS MÁS LIMPIAS
   ============================================================ */

/* ---------- La barra de acciones no se pierde al fondo ----------
   El problema era tener que bajar hasta el final para encontrar «Guardar» o
   «Buscar». En vez de subirlos —que obligaría a bajar para leer y volver a
   subir para pulsar— la barra se queda PEGADA ABAJO de la pantalla: está a
   mano desde cualquier punto del formulario, sin moverse de donde uno lee.

   Es otra excepción consciente a lo de no tocar posiciones. Está acotada a la
   barra de botones; si diera guerra, se borra este bloque. */
.crm-container .crm-submit-buttons {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 5 !important;
  background: #fff !important;
  border-top: 1px solid #E4E8EF !important;
  box-shadow: 0 -2px 10px rgba(31, 39, 51, .05) !important;
  padding: 12px 0 !important;
  margin-top: 16px !important;
}
/* En una ventana emergente no hace falta: ya cabe entera. */
.ui-dialog .crm-container .crm-submit-buttons {
  position: static !important;
  box-shadow: none !important;
}

/* ---------- Tablas de resultados ---------- */
.crm-container table.selector {
  background: #fff !important;
  border: 1px solid #E4E8EF !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  width: 100% !important;
}
.crm-container table.selector thead th {
  background: #F4F6FA !important;
  border-bottom: 1px solid #E4E8EF !important;
  border-right: 0 !important;
  padding: 10px 14px !important;
  white-space: nowrap !important;
}
.crm-container table.selector tbody td {
  padding: 10px 14px !important;
  border-right: 0 !important;
  border-bottom: 1px solid #F0F3F8 !important;
  vertical-align: middle !important;
}
.crm-container table.selector tbody tr:last-child td { border-bottom: 0 !important; }
/* Aire en los extremos: sin esto el texto se pega al borde de la tarjeta. */
.crm-container table.selector th:first-child,
.crm-container table.selector td:first-child { padding-left: 16px !important; }
.crm-container table.selector th:last-child,
.crm-container table.selector td:last-child { padding-right: 16px !important; }

/* La fila que se está mirando, marcada sin estridencias. */
.crm-container table.selector tbody tr:hover td { background: #F4F6FA !important; }
/* Las franjas alternas se quitan: con separadores finos y el resaltado al
   pasar, ya se sigue la fila sin necesidad de rayar la tabla entera. */
.crm-container table.selector tbody tr:nth-child(even) td { background: transparent !important; }
.crm-container table.selector tbody tr:nth-child(even):hover td { background: #F4F6FA !important; }

/* Los números, en columna: cédulas y teléfonos se comparan de un vistazo. */
.crm-container table.selector td { font-variant-numeric: tabular-nums !important; }

/* Una tabla ancha se desplaza sola en vez de romper la página. */
.crm-container .crm-results-block,
.crm-container .crm-search-results {
  overflow-x: auto !important;
}

/* ============================================================
   PANTALLAS ESTRECHAS

   Los campos de los formularios nativos piden 260px de ancho mínimo
   para no parecer cajitas rotas. En un escritorio está bien; en un
   teléfono de 360px, esos 260px más la columna de la etiqueta se
   salen de la pantalla y la página entera se arrastra de lado.

   No se toca la maquetación de la tabla —etiqueta a la izquierda,
   campo a la derecha— porque hay formularios con tablas anidadas y
   convertirlas en bloques rompe unos para arreglar otros. Basta con
   que el campo deje de exigir un ancho que no hay.
   ============================================================ */
@media (max-width: 700px) {
  .crm-container table.form-layout .crm-form-text,
  .crm-container table.form-layout .crm-form-select,
  .crm-container table.form-layout select,
  .crm-container .select2-container,
  .crm-container .crm-select2 + .select2-container {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Las tablas de resultados se desplazan dentro de su caja, no
     llevándose la página con ellas. */
  .crm-container .crm-search-results,
  .crm-container .crm-results-block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
   Las pantallas que traen su propio título no llevan el de CiviCRM

   La agenda y los asistentes escriben su encabezado dentro, y encima
   sale el <h1> que pone el CRM: el mismo texto dos veces, y en el
   teléfono eso es media pantalla gastada antes de ver nada. El título
   propio además cambia según lo que se esté haciendo (crear, ficha),
   y el del CRM no.
   ============================================================ */
html.yu-titulo-propio .crm-page-title,
html.yu-titulo-propio .crm-container .crm-page-title { display: none !important; }