/* =============================================================================
   TMB — PREFERENCIAS DE DISEÑO (convenciones para botones/tarjetas/toggles nuevos)
   -----------------------------------------------------------------------------
   Sitio para IR ACUMULANDO las decisiones de diseño acordadas, de forma que los
   componentes NUEVOS las hereden y todo quede consistente. Se incluye en el muro
   (index.tpl). Auto-fresco (?v={$smarty.now}).

   OJO con los COLORES de marca: #color1/#color2/#color3 se sustituyen POR FUNERARIA
   en users.css (se sirve como /media/u/{id}/user.css). Por eso aqui va SOLO lo
   ESTRUCTURAL reutilizable (radios, sombras, transiciones, comportamiento del hover);
   el color3 real (borde/fondo) se aplica en users.css sobre estas mismas clases.

   ---------------------------------------------------------------------------
   CONVENCIONES ACORDADAS (Carlos, jul-2026):
   - BOTONES DE ACCION: texto e icono SIEMPRE en blanco (tambien en hover). En hover
     el boton se OSCURECE un poco (NO invierte a claro). Si es de seleccionar/confirmar,
     mostrar un check ✓ al lado en hover/seleccion.
   - ZONAS SELECCIONABLES (tarjetas): esquinas CURVAS y consistentes, cursor pointer,
     y en hover se "levantan" (sombra) + el borde pasa a COLOR3.
   - TOGGLES/switches: tamaño NORMAL (no estirar al ancho del contenedor); label a la
     izquierda, switch a la derecha en columna estrecha (col-xs-3 text-right).
   - ETIQUETAS de secciones: "Mayuscula inicial, resto minusculas" (no TODO MAYUSCULAS).
   - TRADUCIBILIDAD: todo texto de cliente por {l s=..}/l()/_(), nunca hardcodeado.
   ============================================================================= */

:root {
  --tmb-radio: 12px;
  --tmb-radio-lg: 14px;
  --tmb-borde: 2px;
  --tmb-sombra-hover: 0 10px 24px rgba(0, 0, 0, 0.16);
  --tmb-transicion: 0.2s ease;
}

/* --- Tarjeta / zona seleccionable ---------------------------------------------
   Estructura. El COLOR del borde en hover/seleccion (color3) se pone en users.css:
     .tmb-selectable:hover, .tmb-selectable.is-selected { border-color:#color3 !important; } */
.tmb-selectable {
  border-radius: var(--tmb-radio-lg);
  border: 0;
  box-shadow: 0 0 0 var(--tmb-borde) #d7d7d7 inset;   /* "borde" por INSET: NO usar 'border' aqui -> con
        border+border-radius+overflow:hidden Chrome deja un hilo del fondo en las esquinas. El inset lo evita. */
  overflow: hidden;                 /* recorta los hijos al mismo radio -> esquinas limpias */
  cursor: pointer;
  transition: box-shadow var(--tmb-transicion), transform var(--tmb-transicion);
}
.tmb-selectable:hover,
.tmb-selectable.is-selected {
  box-shadow: 0 0 0 var(--tmb-borde) #d7d7d7 inset, var(--tmb-sombra-hover);
  transform: translateY(-2px);
}
/* El COLOR3 del ring en hover/seleccion se pone en users.css:
   .tmb-selectable:hover, .tmb-selectable.is-selected { box-shadow: 0 0 0 2px #color3 inset, <sombra> !important; } */

/* --- Boton de accion -----------------------------------------------------------
   Estructura. El color de fondo (color3) + texto blanco en hover/seleccion se pone en
   users.css. El texto/icono SIEMPRE blancos; en hover se oscurece un poco. */
.tmb-btn-accion {
  border: 0;
  border-radius: var(--tmb-radio);
  font-weight: 700;
  color: #fff;
  transition: background-color var(--tmb-transicion), filter var(--tmb-transicion);
}
.tmb-btn-accion,
.tmb-btn-accion i,
.tmb-btn-accion span { color: #fff; }
.tmb-btn-accion:hover { filter: brightness(0.92); }

/* Check ✓ opcional al lado del texto: oculto por defecto, visible en hover/seleccion. */
.tmb-check { display: none; margin-left: 8px; }
.tmb-selectable:hover .tmb-check,
.tmb-selectable.is-selected .tmb-check,
.tmb-btn-accion:hover .tmb-check,
.tmb-btn-accion.is-selected .tmb-check { display: inline-block; }