import { FONT_FAMILY_SANS } from '../../../designTokens';

export const MODAL_DETALLE_UNIDAD_WIDTH_PX = 720;
export const MODAL_DETALLE_UNIDAD_HEIGHT_PX = 620;

export const MODAL_DETALLE_UNIDAD_SECTION_LABEL_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '11px',
  lineHeight: '16px',
  letterSpacing: '0.08em',
  textTransform: 'uppercase',
  color: '#6B7280',
  margin: 0,
};

export const MODAL_DETALLE_UNIDAD_SUBTITLE_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '14px',
  lineHeight: '21px',
  color: '#6B7280',
  margin: 0,
};

export const MODAL_DETALLE_UNIDAD_TAB_BADGE_STYLE = {
  display: 'inline-flex',
  alignItems: 'center',
  justifyContent: 'center',
  minWidth: 20,
  height: 20,
  padding: '0 6px',
  borderRadius: 999,
  background: '#38656D',
  color: '#FFFFFF',
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '11px',
  lineHeight: '16px',
  marginLeft: 8,
};

export const MODAL_DETALLE_UNIDAD_MEMBERS_TITLE_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 600,
  fontSize: '12px',
  lineHeight: '18px',
  letterSpacing: '0.06em',
  textTransform: 'uppercase',
  color: '#29474C',
  margin: '0 0 12px',
};

/** Fondo card responsable — verde suave Hexa (main-50), no menta chillón. */
export const MODAL_DETALLE_UNIDAD_RESPONSABLE_CARD_BG = 'var(--color-main-50, #EEF5F6)';

export const MODAL_DETALLE_UNIDAD_RESPONSABLE_CARD_STYLE = {
  display: 'flex',
  alignItems: 'center',
  gap: 12,
  padding: 12,
  borderRadius: 12,
  background: MODAL_DETALLE_UNIDAD_RESPONSABLE_CARD_BG,
  border: '1px solid var(--color-main-100, #D3DFE1)',
  boxSizing: 'border-box',
  marginBottom: 16,
};

export const MODAL_DETALLE_UNIDAD_MEMBER_CARD_STYLE = {
  display: 'flex',
  alignItems: 'center',
  gap: 12,
  padding: 12,
  borderRadius: 12,
  background: '#FFFFFF',
  border: '1px solid #E5E7EB',
  marginBottom: 8,
};

export const MODAL_DETALLE_UNIDAD_DETAIL_LABEL_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 500,
  fontSize: '12px',
  lineHeight: '18px',
  color: '#6B7280',
  margin: '0 0 4px',
};

export const MODAL_DETALLE_UNIDAD_DETAIL_VALUE_STYLE = {
  fontFamily: FONT_FAMILY_SANS,
  fontWeight: 400,
  fontSize: '14px',
  lineHeight: '21px',
  color: '#29474C',
  margin: '0 0 16px',
};
